GadgetHaven is an e-commerce platform focused on selling gadgets. Key functionalities include product categories, individual product pages, shopping cart, wishlist, and product filtering. We’ll also implement structured navigation and responsive design to ensure a seamless experience on all devices.

Core Functionalities

1. Navigation Bar and Product Categories:

   • A structured, responsive navigation bar with links to product categories and essential pages.
   • Categories like "Phones," "Laptops," "Accessories," etc., to allow easy browsing.

2. Product Details Page:

   • Individual pages displaying product information, images, and prices.
   • Option to add products to the shopping cart or wishlist.

3. Shopping Cart and Wishlist:

   • Users can add items to the cart or wishlist.

4. Product Filtering and Sorting:

   • Users can filter products by category or search criteria.
   • Sorting options by price or popularity for better user convenience.

5. Edge Case Handling:

   • Proper handling of price limits and empty states in the cart/wishlist.

Technical Implementation

• Framework and Libraries:

  • React for component-based development.
  • Tailwind CSS or DaisyUI for responsive styling and layout consistency.
  • React Router DOM for page navigation and routing.

• State Management:

  • Context API to manage state across cart and wishlist components.

• Additional Features:

  • Smooth user experience with conditional rendering and error boundary handling.
  • Dynamic titles for pages using useEffect .

---

1. Live Website Link:
   • https://theabhgadgethaven.netlify.app/

1.1 GithubLink:

• https://github.com/programming-hero-web-course2/b10a8-gadget-heaven-abrarbinhabib003

2. React Fundamental Concepts Used:

   • Functional Components: Using functional components for a clean, modular structure.
   • Hooks: useState, useEffect, and useContext for managing state and side effects.
   • Routing: React Router DOM for seamless navigation.
   • Conditional Rendering: Displaying content based on state or user actions.
   • Responsive Design: Making use of Tailwind CSS or CSS media queries.

3. Data Handling and Management:

   • Context API: For centralized state management of the cart and wishlist.

4. Five Key Features:

   • Responsive Navigation: Easy-to-use navigation bar with structured links for categories.
   • Product Filtering and Sorting: Find and sort gadgets by price, popularity, or type.
   • Modals: Modals on Adding and Purchasing.
   • Detailed Product Pages: Product information, including images, descriptions, and prices.
   • Error Handling and Edge Cases: Alerts for empty cart/wishlist, out-of-stock items, and price limits.

---