A frontend e-commerce storefront for fashion retail, built as a single-page application with React 19 and Vite.
The challenge here was building a frontend that feels like a real storefront: products are browsable and filterable, cart state is shared across the app, navigation resets scroll position correctly, and the UI responds naturally across all screen sizes without fighting the layout system.
The application is structured around centralized state management via React Context, keeping cart and session data available across all views without prop drilling. Routing is handled by React Router v7 with a custom ScrollToTop component that resets position on every route change, but it's the difference between a prototype and something that actually feels polished.
Also Bootstrap 5 handles the responsive grid and utility layer, with custom CSS scoped per component to avoid specificity conflicts.
src/
├── components/ # Shared UI elements (Navbar, Footer, ProductCard, etc.)
├── pages/ # Route-level components (Home, ProductView, Cart, Register...)
├── data/ # Static product catalog and category definitions
├── hooks/ # Custom hooks
└── main.jsx # App entry with router and context providers
| Decision | Why |
|---|---|
| React 19 | Concurrent features and improved rendering for list-heavy catalog pages |
| Vite over CRA | Significantly faster HMR in development; leaner build output in production |
| React Router v7 | File-system-like route definitions; cleaner nested layout support |
| Bootstrap 5 (no jQuery) | Fast utility-first responsive grid without a JS runtime dependency |
| SweetAlert2 for feedback | Consistent, accessible modals for cart actions and form confirmations no custom modal code needed |
| Context API over Redux | The state scope here doesn't justify a full Redux setup; Context keeps it maintainable |
git clone https://github.com/Wahab-Al/Fashion.git
cd Fashion
npm install
npm run devProduction build:
npm run build
MIT