Full-stack case study
Checklist app
Full-stack task/checklist app: React + Vite + Tailwind front end, Express + MongoDB API. Strongest proof of shipping production-style full-stack code.
- Role
- Full-stack — design & build, solo
- Front end
- React 18, Vite, Tailwind v4
- Back end
- Express, MongoDB, Mongoose
- Context
- Harvard Extension — Web App Dev
What it is
A polished checklist manager where you create color-coded lists, add items with priorities and due dates, reorder them by dragging, and watch a progress bar fill as you check things off. I designed and built the whole thing end to end — the React interface, the REST API, and the MongoDB data model — to learn the MERN stack by shipping something real rather than a toy.
How it's built
A clean separation between a React single-page app and an Express REST API backed by MongoDB. State lives in a single Zustand store that talks to the API through an Axios service layer; the server follows an MVC structure (routes → controllers → models) with validation and centralized error handling.
React client
Vite SPA · Zustand store · optimistic updates · dnd-kit · Framer Motion
Express API
REST · routes → controllers → models · express-validator · error middleware
MongoDB
Mongoose schema · checklists with an embedded items subdocument array
Request flow: UI action → Zustand → Axios → Express route → controller → Mongoose → MongoDB, and back — with the UI updating optimistically and reverting on any error.
Things I'm proud of
Drag-and-drop reordering
Items reorder with @dnd-kit; the new order is persisted to MongoDB so it survives a refresh.
Optimistic UI
Toggling, deleting, reordering, and clearing completed update instantly in a Zustand store and roll back automatically if the API call fails.
Priorities & due dates
Each item carries a priority (low/medium/high) and an optional due date, with color-coded badges.
Progress at a glance
A live progress bar reflects how much of each checklist is complete as items are checked off.
Considered motion
Framer Motion handles page transitions, list entrance, and a spring animation on the checkbox — polish, not noise.
Validated, resilient API
A REST API with express-validator input validation, centralized error handling, and graceful shutdown.
Stack
Front end
- React 18
- Vite
- React Router
- Zustand
- Tailwind CSS v4
- Framer Motion
- @dnd-kit
- Axios
Back end
- Node.js
- Express
- MongoDB
- Mongoose
- express-validator
Honest context
This started as a project for my Harvard Extension Web Application Development micro-certificate — my MERN experience is, so far, academic. I'm including it because it's real, working, full-stack code I designed and built solo, and because it shows how I learn: by going past the assignment to ship something polished. With more time, the natural next steps are authentication, automated tests, and pagination — and I'd enjoy building them.