Luxe Noir — Shopping Cart
A luxury dark-theme fashion storefront built with Next.js 16 and TypeScript. Products are fetched from the DummyJSON API, grouped by collection, and managed through a React Context cart with a slide-in drawer.
- Scope
- BUILT
- Timeline
- April 2026
- Role
- Frontend Development
- Stack
- Next.js 16React 19TypeScriptTailwind CSSReact Context
- Deployed on
- Vercel
5
Collections
DummyJSON
Products API
Overview
The project
Luxe Noir is a small fashion storefront built as a self-directed practice project — the project where the goal is to make a cart actually feel like state, not a list. Products come from the public DummyJSON API, grouped into five collections on the shop page. Adding an item updates a live count in the navbar, opens a slide-in drawer, and recalculates the total; quantities can be changed or items removed from there. The interesting part was architecture rather than styling: cart data lives in one React Context and the open/close state of the drawer and mobile menu in another, each exposed through a custom hook so components stay decoupled from where the state actually lives.
What's inside
Features & pages
Cart drawer
Slide-in cart with quantity controls, item removal, and a live total
Category shop
Products fetched from DummyJSON and grouped by collection
Shared cart state
Cart and UI state shared app-wide via React Context and custom hooks
Responsive storefront
Dark luxury theme with a mobile hamburger menu and an adaptive grid
What was hard
Challenges & solutions
Problem
The navbar cart count and the cart drawer needed the same live data without threading props through every component.
Solution
Lifted cart state into a React Context (CartContext) exposed through a useCart() hook, so any component reads and updates the cart directly.
Problem
The API only serves products one category at a time, but the shop page shows several collections at once.
Solution
Fired all five category requests in parallel with axios + Promise.all() and flattened the responses into a single product list.
Problem
The cart drawer and mobile menu needed overlays that sit above everything and lock the page behind them.
Solution
Managed open/close in a separate UIContext and layered the drawer with fixed positioning and deliberate z-index so overlays never fight the page.
Built with
Tech stack
Next.js 16
Framework (App Router)
React 19
UI + hooks
TypeScript
Type safety
Tailwind CSS
Styling
React Context
Cart & UI state
Axios
Data fetching
DummyJSON
Product data
Vercel
Deployment