All Projects
NextMart
Full-stack e-commerce platform with modern UI and JWT authentication
Overview
NextMart is a production-ready e-commerce platform built with Next.js on the frontend and Django REST Framework on the backend. It features a fully functional shopping experience including product browsing, cart management, order processing, and a secure JWT-based authentication flow.
Problem & Solution
The Problem
Building a modern e-commerce experience requires tight coordination between a performant, SEO-friendly frontend and a robust, secure backend API. Off-the-shelf solutions are inflexible; custom builds expose exactly where the complexity lives — state management, auth token lifecycles, and data consistency across client and server.
The Solution
Separated concerns cleanly by using Next.js App Router for server-side rendering and client-side interactivity, paired with Django REST Framework as a dedicated API layer. JWT access/refresh token rotation is handled transparently in middleware, so protected routes and API calls feel seamless to the user while remaining secure.
Tech Stack
App Router enables per-route server components, reducing client-side JavaScript and improving Time-to-Interactive. Built-in image optimisation and metadata API also handle SEO without extra libraries.
DRF's class-based views and serialisers make it fast to build a well-structured REST API with proper validation. Django's ORM abstracts PostgreSQL queries and makes migrations painless.
Relational integrity is critical for an e-commerce data model (orders → line items → products). PostgreSQL's ACID guarantees prevent overselling and data corruption under concurrent writes.
Stateless authentication scales horizontally without shared session storage. Access + refresh token rotation provides a good balance between security and user experience.
Utility-first CSS keeps styles co-located with markup, eliminates dead CSS, and makes responsive design fast to prototype and refine.
Lightweight global state for cart and auth state. Zustand's minimal API avoids Redux boilerplate while still being testable and devtools-friendly.
Key Features
- User registration, login, and JWT refresh-token rotation
- Product catalogue with search and category filtering
- Persistent shopping cart synced to the backend
- Order placement and order history dashboard
- Admin panel via Django admin for product and order management
- Fully responsive layout (mobile-first)
- Optimised images via Next.js Image component
Challenges & Learnings
Token refresh without user disruption
Access tokens expire in 15 minutes. Intercepting 401 responses, silently refreshing the token, and retrying the original request — all without the user noticing — required careful async queue management in Axios interceptors.
Cart state hydration on SSR
Cart data lives in Zustand (client-side) but product pages are server-rendered. Avoiding hydration mismatches required deferring cart reads until after the first client render using a Zustand persist middleware pattern.
Django CORS & cookie policy
Aligning Django's CSRF and CORS settings with Next.js's server-action requests across different origins during development took careful configuration of django-cors-headers and SameSite cookie attributes.
Screenshots
NextMart home page
Product listing page
Product detail page
Shopping cart
Checkout & order flow