Todo App (MERN) — Vanilla JS Frontend
Full‑stack developerAugust 2025 - May 2026
Todo App (MERN) — Vanilla JS Frontend:Full‑stack todo application with user authentication and CRUD; Node/Express backend with MongoDB and a lightweight vanilla‑JS frontend. Deployed on Vercel. User authentication: signup/signin with JWT; token stored in HTTP‑only cookies and validated by middleware. Todo management: create, read, update, delete todos persisted in MongoDB via Mongoose. Client groups todos by creation date and renders UI dynamically using vanilla JavaScript DOM manipulation. Input validation using Zod schemas; secure password hashing with bcrypt. Security features: express-rate-limit, CORS configuration for allowed origins, and secure cookie settings. Frontend UX enhancements using Lottie animations; notification UI via Notyf. REST API surface includes: /sign/signup, /sign/signin, /logout, /issignedin/checktoken, /todos/fetchtodos, /todos/addtodo, /todos/updatetodo/:id, /todos/deletetodo/:id. Deployed frontend & backend on Vercel with MongoDB Atlas as the database.
Services:
JavaScriptNode.jsExpressMongoDB (Mongoose)AxiosZod (validation)Vercel (deployment)Postman
Challenges:
Implementing secure, cookie‑based JWT authentication and robust input validation while keeping a minimal, framework‑free frontend; also handling CORS and rate‑limiting across local and deployed environments.
What I learned:
- How to implement JWT auth with HTTP‑only cookies and validate them in Express middleware.
- Using Zod for expressive server-side validation and surfacing errors to the client.
- Designing a small, well-scoped REST API with Express and Mongoose.
- Building interactive UIs with plain JavaScript (no framework) and integrating third‑party libs (Axios, Notyf, Lottie).
- Deploying backend and static frontend to Vercel and configuring environment/CORS settings.
