https://github.com/salmanfxrsi/gadget-heaven

https://github.com/salmanfxrsi/gadget-heaven

Last synced: 12 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/salmanfxrsi/gadget-heaven
• Owner: salmanfxrsi
• Created: 2024-12-09T12:40:13.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-09T12:41:51.000Z (about 2 months ago)
• Last Synced: 2024-12-09T13:42:39.057Z (about 2 months ago)
• Language: JavaScript
• Size: 650 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# GadgetHaven E-commerce Platform

Welcome to the **GadgetHaven** e-commerce website. This platform is a gadget-buying website designed using React, where users can explore, filter, and purchase products. The website includes key features such as a shopping cart, wishlist system, product filtering, and responsive design.

---

## Live Website Link:

[Netlify](#)  

*(https://gadget-heaven-salman.netlify.app/)*

## Requirement Document Link:

[Requirement PDF](#)  

*(file:///D:/Resources%20For%20Practice/B10-A8-gadget-heaven/Batch-10_Assignment-08.pdf)*

---

## React Fundamentals Used in the Project:

- **JSX**: Used for structuring UI components in a declarative syntax.

- **Components**: Functional components used throughout the project to break down the UI into reusable and manageable parts.

- **Props**: Data is passed from parent to child components using props.

- **State**: The local state is managed with React's `useState` hook, especially for cart and wishlist data.

- **useEffect**: Used to perform side effects such as fetching data, updating the page title, etc.

- **React Router**: Handles navigation between different pages of the website.

- **Hooks**:

  - `useState`: For local state management (e.g., cart, wishlist).

  - `useEffect`: For side effects like updating the page title or fetching data from an API.

  - `useContext`: For accessing global state from Context API.

- **Conditional Rendering**: Displaying UI elements based on certain conditions (e.g., "Out of Stock" labels).

  

---

## Data Management Methods Used:

- **LocalStorage**:  

   - Used for data persistence. Cart and wishlist data are stored in `localStorage` so that users can continue their shopping even after a page refresh.

---

## Features of the Website:

1. **Product Catalog**: Display various categories of gadgets with product details (price, description, and images).

2. **Search & Filter Options**: Filters products by category and price, making it easy for users to search.

3. **Shopping Cart**: Users can add products to their cart, view the cart, remove items, and proceed to checkout.

4. **Wishlist System**: Users can save products to their wishlist for future reference or purchase.

5. **Responsive Design**: The site is fully responsive, ensuring it works seamlessly across mobile, tablet, and desktop devices.