This is a front-end React application written in Typescript.
This app takes the text input and writes it to the metadata of a newly created PNG file that is generated from the HTML canvas. The image is an 8bit integer array of binary code translated from the entered text. There is a toggle that determines whether the data will be embedded with 128 bit AES encryption or as plain text. Once you click Save, the file will be downloaded to your computer. Whomever you share the image with would be able to extract and decipher the text by dragging the PNG file into the drop zone and entering the passkey you provide them, if it's encrypted.
I realise that nobody asked for this, I just made it as a fun, gimmicky way to send secret messages to the people who visit my site and thought it would be a fun project to share as open source for those who are wanting to learn about the technology within.
It was created with Vite, Tailwind, Flowbite, and Font Awesome icons.
This project is published under the GPLv3 license.
- Typescript
- React
- HTML Canvas
- Cryptography in the browser
- Image generation and consumption
- Embedding metadata in files
- React router
- Internationalisation
- API with AWS Lambda
You can play with a demo here.
After cloning the repo you can get this running on your local development environment by first install the dependencies
npm installand then start your local development environment with
npm run dev