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. Built as part of The Odin Project React curriculum.
Timeline
April 2026
Role
Frontend Development
Deployed on
Vercel
Stack
Next.js 16
React 19
TypeScript
Tailwind CSS
React Context
5
Collections
DummyJSON
Products API
Preview
project description
Overview
Luxe Noir is a small fashion storefront built as part of The Odin Project React curriculum — 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
Problems solved
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
More work
Other dev projects
Memory Card Game
A Pokémon-themed memory game built with Next.js 16 and TypeScript. Twelve cards are fetched live from the PokeAPI, reshuffle after every click, and track your current and best score. Built as part of The Odin Project React curriculum.
CV Builder
A dynamic CV builder built with React 19 and Vite. Fill in your details across six sections, watch an A4 preview update in real time, and export a clean single-page PDF with one click via html2pdf.js. Built as part of The Odin Project React curriculum.
Lost & Found Web Platform
A full-stack lost-and-found platform built as my college graduation project. Node.js and Express on an MVC architecture, EJS + Bootstrap frontend, and a MySQL database — with user authentication, item reporting with photo uploads, and email notifications. Designed and developed end to end.