https://github.com/rohan26ir/gadget-heaven
GadgetHeaven is a React-based e-commerce site with smooth navigation, a wishlist, and cart system. It uses Context API and LocalStorage for state management.
https://github.com/rohan26ir/gadget-heaven
first-react-project json react surge-deployment tailwindcss website
Last synced: 12 days ago
JSON representation
GadgetHeaven is a React-based e-commerce site with smooth navigation, a wishlist, and cart system. It uses Context API and LocalStorage for state management.
- Host: GitHub
- URL: https://github.com/rohan26ir/gadget-heaven
- Owner: rohan26ir
- Created: 2024-12-28T19:21:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-28T19:25:43.000Z (over 1 year ago)
- Last Synced: 2025-02-22T20:32:37.953Z (over 1 year ago)
- Topics: first-react-project, json, react, surge-deployment, tailwindcss, website
- Language: JavaScript
- Homepage: https://gadget-heaven-01.surge.sh/
- Size: 4.33 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GadgetHeaven✨
Welcome to **GadgetHeaven**, your top place to find the latest and coolest gadgets! GadgetHeaven is an easy-to-use e-commerce website designed to give you a smooth shopping experience with clear navigation, a handy cart and wishlist system, and a variety of gadgets to explore. This site is built with React, using the Context API and LocalStorage to manage and save data.
## 🛠 Key React Concepts Used
Here are the main React features used to build GadgetHeaven:
- **Components**: Reusable parts of the site like the Home, Navbar, Footer, and Error.
- **React Router**: Helps to link different pages like Home, Dashboard, Statistics, and the 404 page.
- **State Management**: Used to manage the app's data, like tracking items in the cart or wishlist.
- **useEffect Hook**: For loading data, updating when needed and change the website title.
- **Conditional Rendering**: Changes the view based on actions, such as disabling the wishlist button after an item is added.
---
## 📦 Data Handling
- **Context API**: Manages global data for things like the cart and wishlist, so these features work smoothly across the site.
- **LocalStorage**: Saves your cart and wishlist items, so you don’t lose them if you refresh or revisit the site.
---
## 🌟 Main Features
1. **Shopping Cart**: Add items to your cart, see the total price, and sort items by cost.
2. **Wishlist**: Save items you like to a wishlist with one click. Items don’t duplicate in the wishlist.
3. **Category Filtering**: Browse by gadget type (like computers, phones) using a sidebar for easy filtering.
4. **Smooth Navigation**: Responsive layout, automatic handling of page reloads, and an error-free experience.
5. **Notifications**: Real-time alerts when items are added to the cart or wishlist with unique messages.
---
## 📜 Page Details
### Navbar
- **Menu Options**: Logo, Brand Name, Dashboard, and Stats links
- **Current Page Indicator**: Shows you which page you’re on.
### Home Page
- **Banner Section**: Attractive banner with a button linking to the Shop.
- **Categories Sidebar**: Lists gadget categories (like computers and phones).
- **Gadget Cards**: Shows gadgets in a grid with an image, name, price, and details button.
### Device Details Page
- **Gadget Information**: Shows product image, name, price, and other details.
- **Cart and Wishlist**: Buttons to add the Gadget to your cart or wishlist.
### Dashboard Page
- **Tabs for Cart and Wishlist**: View items in the cart or wishlist by switching tabs.
- **Total Price**: See the total cost of items in your cart.
- **Sort by Price**: Sort cart items from most expensive to least.
### Additional Features
- **404 Page**: Custom page if you try to access a non-existent page.
- **Dynamic Background**: Different background colors on the Home page compared to other pages.
- **Purchase Confirmation**: A pop-up message for purchases with navigation back to the Home page.
- **Page Titles**: Custom titles for each page.
---
## 🚀 Live Website
[Visit GadgetHeaven](https://gadget-heaven-01.surge.sh/)
## 📄 Requirement Document
[Access Requirements Document](https://github.com/rohan26ir/Gadget-Heaven/tree/main/UI_Design)
---
Enjoy exploring and shopping on GadgetHeaven! 😊