A modern React-based e-commerce platform that lets users browse, select, and manage their favorite gadgets with an interactive cart and wishlist system.
✅ Fantasy Gadget Selection – Users can browse and select products with detail handling.
✅ Dynamic Cart & Wishlist – Add/remove items, with real-time updates displayed.
✅ Sort Functionality – Sort items by price for better visibility of high-value products.
✅ Modal Purchase Confirmation – Displays a confirmation popup with the total amount.
✅ Persistent Data Storage – Keeps cart & wishlist selections saved via local storage.
- Components – Structured project using reusable components.
- Props – Passed dynamic data between components.
- State Management (
useState) – Managed UI state effectively. - Side Effects (
useEffect) – Loaded data dynamically. - Conditional Rendering – Displayed different views based on state.
- React.js – Component-based UI with state management.
- Context API – Global state handling for cart and wishlist.
- Tailwind CSS – Sleek, responsive UI styling.
- DaisyUI – Pre-styled Tailwind components for an enhanced UI.
- Local Storage – Saves user selections for persistence.
- Vite – Fast development server & build tool.
| Package | Version |
|---|---|
react |
^18.3.1 |
react-dom |
^18.3.1 |
react-router-dom |
^6.27.0 |
react-icons |
^5.3.0 |
react-toastify |
^10.0.6 |
recharts |
^2.13.3 |
react-tabs |
^6.0.2 |
localforage |
^1.10.0 |
match-sorter |
^7.0.0 |
sort-by |
^1.2.0 |
| Package | Version |
|---|---|
vite |
^5.4.10 |
@vitejs/plugin-react |
^4.3.3 |
eslint |
^9.13.0 |
eslint-plugin-react |
^7.37.2 |
eslint-plugin-react-hooks |
^5.0.0 |
postcss |
^8.4.47 |
autoprefixer |
^10.4.20 |
tailwindcss |
^3.4.14 |
daisyui |
^4.12.14 |
 |
 |
🔗 Live Website: Gadget Haven
# Clone the repository
git clone https://github.com/programming-hero-web-course2/b10a8-gadget-heaven-alazim-star.git
# Navigate to the project directory
cd gadget-haven
# Install dependencies
npm install
# Start the development server
npm run dev