A web app for sharing temporary secrets!
The frontend is hosted on GitHub Pages, and the backend is hosted on Heroku. I used the Heroku Postgres add-on for database storage.
If you have a secret you would like to share with someone, you can use this web app to share a password-protected secret.
First, the sender creates a secret message with a password. The web app provides the sender with a URL to give to the recipient.
Then, the sender provides this URL and the password to the recipient, preferably in two different forms of communication (URL by email, password by phone).
Finally, the recipient goes to the URL and enters the password to retrieve the secret. The secret is then deleted from the server and the same URL and password cannot be reused again.
The secret has an expiration of 15 minutes, so after 15 minutes, the secret will be deleted.
- Creating password-protected secrets
- Retrieving secret messages when providing a password
- Encrypting passwords and messages on the backend
- Storing secrets into a Heroku Postgres Database
This web app is accessible at this link: https://emman-b.github.io/OTSecret/#/
The following instructions are for hosting the web app locally.
- Node version 14.15.0 (older versions may work)
- PostgreSQL Database (I used the PostgreSQL Windows installer v13.3)
First, install the above required software. For PostgreSQL, keep track of the information you provided in the installation since you will need it when setting up environment variables.
Next, you need to create a .env file in the backend/ directory. I have a .env.example file with example values, so you can use that as a template.
Afterwards, run npm install in both the frontend/ and backend/ directories.
In the frontend/ and backend/ directories, run the following:
npm startNote: On the frontend, if you happen to run into a digital envelope routines::unsupported error when running the frontend locally, then try running the following instead (frontend only):
npm run localBy default, the frontend web application is accessible here:
http://localhost:3000
To test the backend API, go to the following URL (make sure to replace <PORT> with the actual port number provided in the .env file):
http://localhost:<PORT>/v1/api-docs/
This was a full-stack web application that taught me more about how to deploy a web application with a functioning frontend and backend. I learned more about HTML and CSS and having a mobile-first responsive web design. I also learned about best practices when dealing with communication between the frontend and backend in production environments.
Mobile Main View
Mobile Get-Secret View
