https://github.com/jahidul2004/gadget-haven
Gadget Haven is a modern e-commerce platform for gadget lovers, offering the latest smartphones, laptops, smartwatches, gaming accessories, and more!
https://github.com/jahidul2004/gadget-haven
firebase react reactrouter tailwindcss
Last synced: 2 months ago
JSON representation
Gadget Haven is a modern e-commerce platform for gadget lovers, offering the latest smartphones, laptops, smartwatches, gaming accessories, and more!
- Host: GitHub
- URL: https://github.com/jahidul2004/gadget-haven
- Owner: jahidul2004
- Created: 2025-01-21T12:55:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-13T13:10:30.000Z (over 1 year ago)
- Last Synced: 2025-06-08T16:42:30.649Z (about 1 year ago)
- Topics: firebase, react, reactrouter, tailwindcss
- Language: JavaScript
- Homepage: https://gadget-haven-a8.netlify.app/
- Size: 646 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gadget Haven
Gadget Haven is an e-commerce platform designed to provide a seamless online shopping experience for tech enthusiasts. The website offers a wide range of gadgets, including phones, laptops, MacBooks, and other electronic devices. Users can browse through the latest products, add them to their cart, and make secure purchases.
## Live Website Link
- [Gadget Haven Live Website](https://gadget-haven-a8.netlify.app/)
## Requirement Document Link
- [Download the Requirement Document](https://github.com/ProgrammingHero1/B10-A8-gadget-heaven/blob/main/Batch-10_Assignment-08.pdf)
## Introduction
Gadget Haven aims to be the one-stop shop for all tech lovers looking for the latest and greatest gadgets. Whether you are looking for a new phone, laptop, or accessories, Gadget Haven offers a wide variety of products to choose from. Our user-friendly interface and secure checkout process ensure a great shopping experience.
## Features
1. **Product Catalog**: View and explore a wide selection of gadgets, including phones, laptops, and MacBooks.
2. **Cart Management**: Add products to the cart and manage them easily, with the ability to persist cart items using local storage.
3. **Product Search & Filter**: Search and filter products based on categories like brand, price range, and ratings.
4. **Secure Checkout**: Complete a purchase securely using a checkout system.
5. **Responsive Design**: Fully responsive design that ensures a great shopping experience on mobile devices, tablets, and desktops.
## React Fundamental Concepts Used
- **Components**: Each gadget item, cart, and product filter are represented as React components.
- **Props**: Used to pass data between components, such as passing product details to product card components.
- **State**: Local component state is used to manage user interactions, such as the cart items and search results.
- **useState & useEffect**: Used for managing state and handling side effects, such as updating the cart and fetching products.
- **React Router**: Used for routing between different pages, such as the home page, product detail page, and checkout page.
- **Event Handling**: Handlers are implemented for user interactions like clicking on the "Add to Cart" button.
- **Conditional Rendering**: Used to show or hide components based on conditions, such as displaying an empty cart message if no items are in the cart.
## Handling and Managing Data
- **Local Storage**: The cart data is stored in the browser's local storage, allowing users to maintain their cart even after closing the browser.
## Technologies Used
- **Frontend**: React, React Router, Recharts (for charts)
- **Backend**: Node.js, Express.js (optional, if you have a backend)
- **Storage**: Local Storage for cart management
- **Styling**: CSS, Bootstrap (or any other styling framework of your choice)