Gadget Heaven is a cutting-edge e-commerce platform that allows users to browse, manage, and purchase the latest gadgets. Built with React and enhanced with efficient data handling techniques, it offers a seamless shopping experience with dynamic UI interactions and persistent user data.
This project integrates core React functionalities to ensure a smooth and responsive user experience:
- Components: Modular, reusable components for a clean architecture.
- State Management: Dynamic UI updates using
useStatefor managing local component states. - Effect Hook:
useEffectfor fetching gadget data and handling side effects. - Conditional Rendering: Displaying UI elements based on user interactions and state conditions.
- Event Handling: Interactive features like adding/removing items from Cart and Wishlist.
- 📦 Local Storage: Persistent storage for Cart and Wishlist data across sessions, ensuring user preferences are retained even after a page refresh.
- 🌍 Context API: Centralized global state management to seamlessly share data across components without prop drilling.
-
🛒 Add to Cart & Wishlist
- Easily add gadgets to your Cart or Wishlist. Duplicate checks ensure items aren’t added more than once.
-
🔄 Real-Time Updates
- Dynamic updates to Cart and Wishlist indicators in the navbar as items are added or removed.
-
📊 Sorting Functionality
- Sort Cart items by price to quickly view high-value or budget-friendly gadgets.
-
💳 Purchase Modal with Summary
- A detailed modal appears during checkout, summarizing the total cost and providing a confirmation message.
-
💾 Persistent Storage
- Your Cart and Wishlist are saved in local storage, allowing you to pick up right where you left off on your next visit.
- Frontend: React, Tailwind CSS
- State Management: React Context API, Local Storage
- Notifications: React Hot Toast for real-time feedback
- Icons & UI Enhancements: Lucide React for icons, Framer Motion for animations
Follow these steps to run Gadget Heaven locally:
-
Clone the Repository
git clone https://github.com/ornobaadi/Gadget-Heaven.git
-
Navigate to the Project Directory
cd Gadget-Heaven -
Install Dependencies
npm install
-
Run the Development Server
npm run dev
-
Open in Browser
Go to http://localhost:5173 to view the app.
- 🔍 Advanced Search Filters: Allow users to search for gadgets by specifications like brand, price range, or features.
- 🌐 API Integration: Connect with external APIs for real-time gadget updates and pricing.
- 🛡️ User Authentication: Add user accounts for personalized experiences and secure order tracking.
Developed with ❤️ by Ornob Aadi.
🎉 Enjoy your journey through Gadget Heaven and discover the latest tech wonders! 🚀🔌