https://github.com/abdulmazidakash/assignment-8
GadgetHeaven is an e-commerce platform where users can explore, add to cart, and manage their favorite gadgets. This project demonstrates fundamental web development and React skills.
https://github.com/abdulmazidakash/assignment-8
localstorage react useeffect usestate
Last synced: about 1 month ago
JSON representation
GadgetHeaven is an e-commerce platform where users can explore, add to cart, and manage their favorite gadgets. This project demonstrates fundamental web development and React skills.
- Host: GitHub
- URL: https://github.com/abdulmazidakash/assignment-8
- Owner: abdulmazidakash
- Created: 2024-11-25T15:19:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-26T04:02:00.000Z (over 1 year ago)
- Last Synced: 2025-03-27T23:30:38.286Z (about 1 year ago)
- Topics: localstorage, react, useeffect, usestate
- Language: JavaScript
- Homepage: https://gadget-heaven-akash.netlify.app/
- Size: 333 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GadgetHeaven ✨
**GadgetHeaven** is an e-commerce platform where users can explore, add to cart, and manage their favorite gadgets. This project demonstrates fundamental web development and React skills.
## Live Website Link
https://gadget-heaven-akash.netlify.app/
## Requirement Document Link
https://github.com/ProgrammingHero1/B10-A8-gadget-heaven/blob/main/Batch-10_Assignment-08.pdf
---
## List of React Fundamental concepts used in the project
- Component-based architecture: Used for structuring UI with reusable components like AddToCard and AddToWishList.
- useState hook: For managing state such as cart items and wishlist.
- useEffect hook: For handling side effects like fetching data and updating the document title.
- Conditional rendering: Displaying Cart or Wishlist based on the active state.
- LocalStorage integration: Managing data persistence for cart and wishlist.
---
## What you have used for handling and managing data (context API/local storage)
I using localStorage to store and retrieve data on the client-side. This is useful for persisting the cart and wishlist data even after the page is refreshed. Specifically:
- Data Persistence: Uses localStorage to save and retrieve cart and wishlist data.
- Cart Management: Adds items to the cart and checks for duplicates before updating localStorage.
- Wishlist Management: Similar to cart management, but also updates the wishlist count via setWishCount if passed.
- User Feedback: Utilizes react-hot-toast for success and error notifications when adding items to the cart or wishlist.
- State Management: React state (setWishCount) is used to update the wishlist count dynamically.
---
## 5 features of your website/project
- Structured Navigation Bar
- Product Categories Sidebar
- Add to Cart and Wishlist Functionality
- Dynamic Product Details Page
- Sorting and Filtering Options
