Bring a coherent shopping journey to a catalog, product pages, variants and a cart. This personal build explores the connection between streetwear art direction and the details of online shopping.
01 / SELECTED WORK
AURA
Built for style.
Designed to shop.
Personal development project. Editorial cover created for this presentation; project source available on GitHub.
THE CONTEXT
A streetwear store built with React and TypeScript, connecting collection discovery, product selection and cart management.
Dedicated routes and reusable components structure the journey. Category and price filters organize the catalog; cart state distinguishes each product, size and color combination.
AN IDEA, A CHARACTERAURA
Style draws you in.
The journey matters.
The journey matters.
FROM THE PROJECT TO THE CODEAn idea takes shape.
Explore the GitHub repository An idea takes shape.
Code brings it to life.
- React
- TypeScript
- Tailwind CSS
- Framer Motion
01
Explore the catalog
Category and price filters, product sorting.
src/pages/ProductsPage.tsxView source file 02 Build the cart
Variants, quantities and calculated totals.
src/context/CartContext.tsxView source file 03 Connect the experience
Dedicated routes, context providers and transitions.
src/App.tsxView source file mouadbusni / AURA-V9-main · Personal build
Every choice
has a reason.
- 01
Filter by category and price, then sort products to support discovery.
- 02
Manage variants, quantities and totals through shared React context.
- 03
Connect the catalog, product pages, cart and checkout screens through dedicated routes.
EXPLORE THE DETAILSINTERACTIVE PREVIEW
The project at a glance.
KEEP EXPLORING
AutoPro
Personal project · Automotive catalog
What if we wrote your story?
Let’s talk about your project↗