A full-featured storefront built with React, integrating a live REST API, persistent cart state, and production-style UX patterns (loading states, error handling).
This project goes beyond a typical portfolio storefront by fetching real product data from a live API instead of static mock data, and handling the edge cases that come with it — loading states, failed requests, and persisted user state across sessions.
| Category | Tools |
|---|---|
| Core | React 19, React Router |
| State Management | Context API |
| Data | DummyJSON REST API (fetch), error handling with try/catch |
| Animation | Framer Motion |
| UI Feedback | React Hot Toast |
| Carousel | Swiper |
| Styling | CSS |
- Live product data — fetched from the DummyJSON API with proper error handling for failed requests
- Skeleton loading states — dedicated loading components (
SlideProductLoading,ProductDetailsLoading) instead of blank screens while data loads - Persistent cart & favorites — state is saved to
localStorage, so items survive page reloads - Full cart logic — add, remove, increase/decrease quantity, all managed through Context API
- Product discovery — category browsing, search, and filtering
- Responsive, animated UI — mobile-first layout with Framer Motion transitions and toast notifications for user feedback
git clone https://github.com/omar-khatab/E-commerce.git
cd E-commerce
npm install
npm run devOmar Khatab — Frontend Developer (React / Next.js)