Textcache

Textcache is an alternative to Pastebin which allows for sharing of text snippets (with the option of password protection) in a safe manner. The text shared is end-to-end encrypted using AES encryption - check that out at AES wiki. This repository has the frontend React code styled with Chakra library. The project is hosted at Vercel.

Web Preview

Guide

The website allows u to get shareable links (upto 15 mins from generation) which can serve the content to anyone with the link. The other user can copy/download the content. The usage is pretty intutive and one can follow below steps:

1. Open the vercel link and click on Paste your text, a moncaco editor screen will pop-up.

2. One can type into or paste text (of any kind <= 5000 lines) to it and click on Share button.

3. The link got can be used by anyone to access the paste.

4. One can also click on the Protect button to setup a 5 digit PIN to encrypt the content.

Internally, the text is end-to-end AES encrypted. The decryption process only occurs at client-side. Both the server & redis container contain the encrypted text which makes the paste secure in case of data leaks.

Building & Running

To build & run the project, u must have node.js installed on your system so that u can utilize npm for installing project dependencies and building it. Check out the node.js setup at installation.

Follow the below steps to run the project locally & subsequently build it too (not required for deployment tho)

# clone the project to get local folder
git clone https://github.com/vercetti322/TextCache.git

cd TextCache

# install the required dependencies (make sure ur current dir has package.json)
npm install

# to run it locally, just hit following
npm run dev

# to build it (after u have tested test server)
npm run build

Is that it? Unfortunately not, u gotta run the backend also and modify the base URL to the localhost port where ur backend runs. Don't worry, just head on to backend and follow instructions to setup ur server along-with redis!

Seems daunting right? Don't worry deployment to vercel is much straightforward.

Deplopyment

Just head on to vercel and create a free tier account (mention that you are hobbyist student) until u get an empty dashboard. Follow the below steps to deploy:

1. Click on the "Add new" and select the option for "Project"

3. On the import git repository, select your react project (we have used vite here, but no issue with CRA), and simply click "Deploy"

5. Also, mention any environment variables (not in our case, i mentioned the base url of hosted server directly).

6. Wait for some time untill the project builds and u get a live link!

Issues

This section talks about some issues u might run into while deploying:

1. Make sure u have a vercel.json which tells vercel to route back any dynamic routes (as in our case) to index.html.

2. If u get an npm run build error (exit 1) error then 99% u the index.html is not able to ref the main.jsx. Other errors like capitalization of components, directory not having package.json, etc. might also be the cause.