2026 · case study
Minimal Efficient ToDo
A full-stack task app that stays out of your way — auth, CRUD, and a bit of momentum.
Stylised wireframe — this project has no public live build to screenshot.
01 Overview
React + TypeScript client with an Express/MongoDB API. JWT register and login, protected task CRUD, bcrypt-hashed passwords and small gamification touches to keep the list moving.
02 The problem
Todo apps are a cliché, which is exactly why they are a good full-stack exercise — auth, protected routes and CRUD with nowhere to hide.
03 What I built
A typed React frontend and a clean Express backend. Users register, the password is bcrypt-hashed, a JWT is issued and sent as a Bearer token on every protected task route. Utility functions add light gamification on top of plain task data.
04 Key features
Register and login with JWT Passwords hashed with bcrypt Bearer token on protected routes Task CRUD — GET / POST / PUT / DELETE /api/tasks Home, Login and Signup pages API service layer on the client Gamification utilities Tailwind styling, responsive layout
05 Technologies
- React
- TypeScript
- JavaScript
- Tailwind CSS
- REST API integration
- Auth & JWT
- Node.js
- Express
- MongoDB / Mongoose
- Responsive design
06 Engineering decisions
Clean backend layering
Routes, controllers, middleware, models and db config are each their own folder. Auth middleware validates the token once and everything protected sits behind it.
A real service layer on the client
Components never call fetch directly — a services module owns the API surface and token attachment, so the UI stays about UI.
07 What I took from it
- The boring parts — token refresh, error states, 401 handling — are where a full-stack app is actually won.
- TypeScript on the client pays for itself the moment the API shape changes.