This is a simple, client-side encrypted todo web app, inspired by TodoMVC, and supported by SvelteKit. It has basic CRUD abilites, meaning you can create, view, update and delete your todos.
Authentication runs over RSA, specifically being in knowledge of the respective private key, which is generated for you when creating a new user on the webpage. Only that private key allows you to access your data later on other devices (or if you reset your browser data).
A live demo can be found here (hosted on Vercel).
The rough application architecture can be seen below or in this collection of diagrams.
If you are interested into how the encryption works behind the scenes, check out this article I wrote on Client-Side Encryption!
The application uses MongoDB as a backend database, although you could also use every other database supported by Prisma.
The most demanding part here was solving all the authentication/cryptography on the browser side, like generating the public key from the private key, generating a key pair as a whole etc. For this, the frontend utilizes forge, a native implementation of many cryptographic tools.
To get started with this project, follow these steps:
git clone https://github.com/flawnn/E2EETodo.git
.env
, as following (see .env.example
)DATABASE_URL="..."
JWT_SECRET="..."
npm install
npm run dev
This will start the development server with hot reload enabled. You can now make changes to the code and see the changes immediately in the browser.
Optionally you can run npm run build
to generate needed files for a production deployment.
ā Using the App simultaneously on two devices isn't advised as they'll overwrite the encrypted data on the server with their own local state. Meaning, having changed a todo on one device, doesn't reflect on the other one until you refresh the page. Be aware of that
This project is licensed under the MIT License.