https://github.com/engrsakib/sakib-gadegets-shops-simple-react-projects

https://github.com/engrsakib/sakib-gadegets-shops-simple-react-projects

Last synced: about 5 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/engrsakib/sakib-gadegets-shops-simple-react-projects
• Owner: engrsakib
• Created: 2024-11-09T16:22:52.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-17T13:55:58.000Z (22 days ago)
• Last Synced: 2024-12-17T14:29:48.946Z (22 days ago)
• Language: JavaScript
• Size: 4.41 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# GadgetHaven - Sakib Gadget Haven

Sakib Gadget Haven is an intuitive and feature-rich e-commerce platform for buying gadgets. The website is built based on a detailed Figma design and includes features like product categories, structured navigation, a shopping cart, wishlist system, product filtering, and more. It ensures a smooth user experience and data persistence with Context API and LocalStorage.

---

### 🚀 **Live Website Link**

[Visit Sakib Gadget Haven Live](https://engrsakib-p-hero-assignment8.surge.sh/)

---

### 📄 **Requirement Document Link**

[Download the Requirement Document](https://github.com/ProgrammingHero1/B10-A8-gadget-heaven/blob/main/Batch-10_Assignment-08.pdf)

---

### ⚙️ **React Fundamental Concepts Used**

- **Functional Components**: The app is built using React functional components for a simpler and more maintainable structure.

- **JSX**: JSX syntax is used to render HTML-like structures within JavaScript code.

- **State Management**: The app uses React's `useState` hook to manage state within components.

- **Context API**: Used to globally manage the state of the shopping cart and wishlist.

- **React Router**: Used to handle page routing, allowing users to navigate between product pages, cart, and wishlist.

- **useEffect**: Utilized to manage side effects like data fetching and persisting cart/wishlist data with LocalStorage.

---

### 🛠️ **Data Handling and Management**

- **LocalStorage**: LocalStorage is used to persist cart and wishlist data across page reloads, ensuring the data remains available even after the user refreshes the page or closes the browser.

---

### 💻 **Key Features of GadgetHaven Website**

1. **Product Filtering**: Users can filter products by category and price range to help them find the items they are looking for.

2. **Shopping Cart**: Users can add or remove items from the cart, view the cart, and proceed to checkout. The cart data is managed globally with the Context API.

3. **Wishlist System**: Users can add products to their wishlist for later purchase. The wishlist is also managed with the Context API.

4. **Product Sorting**: Products can be sorted by price (ascending or descending) to allow users to compare prices easily.