How I Built a Full-Stack E-Commerce App in 3 Months
Olamilekan Kilani
Frontend Developer
Overview
Footies by Zain is a full-stack e-commerce platform for premium footwear. I built it from scratch using Next.js for the frontend and Express.js with MongoDB for the backend. The goal was to build something real — not a tutorial project, but an actual working application.
Tech Stack
- Frontend: Next.js 15, TypeScript, Material UI, SWR
- Backend: Express.js, MongoDB, Mongoose, JWT
- Deployment: Vercel (frontend + backend)
The Challenges
Authentication
The first real challenge was building JWT authentication from scratch. I had to learn how tokens work, how to store them securely using both localStorage and cookies, and how to protect routes using Next.js middleware.
Cart Management
Building a cart with React Context that persists across pages and handles stock limits was trickier than expected. The key insight was storing cart state in localStorage so it survives page refreshes.
Checkout Flow
The multi-step checkout (Delivery Info → Payment → Success) required careful state management. I used React useState to track which step the user was on and pre-filled delivery info from the user's profile.
Admin Dashboard
Building the admin dashboard taught me a lot about role-based access control. Admins get a different token, different routes, and different middleware checks.
What I Learned
- How to build and consume a REST API end to end
- JWT authentication and protected routes
- MongoDB data modeling and Mongoose
- Next.js App Router, middleware, and server components
- Performance optimization and Lighthouse scores
- Deploying full-stack apps on Vercel
Conclusion
This project took about 3 months of consistent work. It's the project I'm most proud of because it's real, it's deployed, and it works. If you want to check it out, visit footiesbyzain.vercel.app.