Gadget Heaven

Gadget Heaven is an e-commerce platform built with React, offering users the ability to explore and purchase the latest gadgets. The website includes features like a dashboard, cart, wishlist, product filtering, and sorting by price. It also provides a clean and dynamic UI with the use of context and local storage for managing cart and wishlist data.

Key Features

1. Home Page with Gadget Listings: Displays cutting-edge gadgets, sorted by category.
2. Dashboard: A personalized dashboard for users to manage their cart and wishlist.
3. Cart and Wishlist Management: Users can add, remove, and sort products by price in the cart and wishlist.
4. Responsive Design: Optimized for both mobile and desktop views using Tailwind CSS.
5. Persistent Data with Local Storage: Cart and wishlist data are saved in local storage, so users can pick up where they left off.

React Fundamental Concepts Used

• Functional Components: All components in the app are functional components.
• JSX: React's syntax extension to write HTML-like code within JavaScript.
• Props and State: Used to pass data between components and manage component states.
• useState: React hook to manage local component state.
• useEffect: React hook for handling side effects like data fetching and DOM manipulation.
• useContext: Used to manage global state across multiple components using Context API.
• React Router: Used for client-side routing, enabling navigation between pages.
• Conditional Rendering: Dynamically rendering content based on state or props values.
• Event Handling: Handling user interactions like clicks and form submissions.

Data Handling and Management

• Context API: Used to manage global state, specifically for the cart and dashboard product data. The DashBoardContext provides the product list and allows updates to the cart state across the entire app.
• Local Storage: Used to persist the cart and wishlist data across browser sessions, allowing users to pick up where they left off. The getToLocalStorage and setToLocalStorage utility functions manage storing and retrieving data from the browser's local storage.

Requirement Document

You can find the requirement document here: Requirement Document

Live Link:

https://assignment-8-gadget-hunter.netlify.app/

Private Repo Link:

https://github.com/Saiful109710/assignment-8-gadgets-web-react

Figma file Link:

https://www.figma.com/design/qr7hizhQyfmitEimBC6blK/Assignment-8?node-id=0-1&node-type=canvas&t=7Sr6v8i3wIN015u6-0