Smart product grid
Responsive, card-based layout that adapts from single-column mobile to three-column desktop, keeping your catalogue clean and scannable.
Mandi · Feature Overview
A modern ecommerce frontend, built the right way.
Mandi's frontend is designed as a real-world storefront: reusable components, clean architecture, and a UI that's ready for production APIs, filters, and future expansion.
Core shopping experience
Everything from the home page to the product listing is structured for clarity, performance, and reusability.
Client-side pagination
Custom pagination powered by a reusable usePagination hook, swapping products in place without jarring page reloads.
Category-aware layout
Dedicated FilterBar ready to plug in category, price, and sort controls so shoppers can quickly narrow down what they want.
API-backed storefront
Products are fetched from the FakeStore API at build or request time, simulating a real-world headless ecommerce setup.
Under the hood
The frontend is architected as a teaching-quality codebase: clear separation of concerns and patterns you can extend in real projects.
- Next.js App Router with server + client components
- Typed product models with TypeScript (IProduct)
- Reusable ProductGrid and ProductCard components
- Tailwind CSS utility-first styling
- Layout primitives via a shared Container component
Shopper-focused experience
Every interaction on the storefront is tuned for clarity and ease-of-use, from the product grid layout to how pagination keeps users in context.
- Instant product browsing with no full page reloads.
- Consistent card design for every product tile.
- Clean separation between data fetching and UI rendering.
- A layout that’s ready for search, filters, and sorting.
- Mobile-first structure that scales up gracefully to desktop.
Ready for the next layer.
From here, you can plug in real categories, add search and filters to the FilterBar, wire up server-side sorting, or connect Mandi to a production-ready headless commerce backend.
Continue building on this foundation