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.
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.
- 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.
- Shopping Cart: Add items to your cart, see the total price, and sort items by cost.
- Wishlist: Save items you like to a wishlist with one click. Items don’t duplicate in the wishlist.
- Category Filtering: Browse by gadget type (like computers, phones) using a sidebar for easy filtering.
- Smooth Navigation: Responsive layout, automatic handling of page reloads, and an error-free experience.
- Notifications: Real-time alerts when items are added to the cart or wishlist with unique messages.
- Menu Options: Logo, Brand Name, Dashboard, and Stats links
- Current Page Indicator: Shows you which page you’re on.
- 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.
- Gadget Information: Shows product image, name, price, and other details.
- Cart and Wishlist: Buttons to add the Gadget to your cart or wishlist.
- 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.
- 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.
Enjoy exploring and shopping on GadgetHeaven! 😊