https://github.com/najibhossain49/gadget-heaven
Gadget Heaven—a cutting-edge e-commerce platform
https://github.com/najibhossain49/gadget-heaven
Last synced: about 2 months ago
JSON representation
Gadget Heaven—a cutting-edge e-commerce platform
- Host: GitHub
- URL: https://github.com/najibhossain49/gadget-heaven
- Owner: NajibHossain49
- Created: 2024-11-05T17:45:11.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-01T18:22:04.000Z (6 months ago)
- Last Synced: 2024-12-24T00:17:27.104Z (5 months ago)
- Language: JavaScript
- Homepage: https://n49h-gadget-heaven.netlify.app/
- Size: 2.98 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gadget Heaven✨ - Your Go-To Destination for the Latest and Greatest Gadgets
Welcome to **Gadget Heaven**—a cutting-edge e-commerce platform that allows you to explore, discover, and purchase the latest gadgets. This website is built with a focus on a smooth and intuitive user experience, enabling users to shop for their favorite tech products, manage their shopping cart and wishlist, and filter through products with ease.
---
## Features
Here are the key features of the **Gadget Heaven** platform:
1. **Structured Navigation Bar**: Easily browse through categories and access the shopping cart, wishlist, and other essential sections.
2. **Product Categories**: Explore different types of gadgets, including Smartphones , Accessories, Wearables, and more.
3. **Individual Product Pages**: Detailed pages for each product featuring images, descriptions, specifications, and pricing.
4. **Shopping Cart**: Add, remove, and manage products in the shopping cart.
5. **Wishlist System**: Save favorite products to your wishlist for easy access later.
6. **Product Filtering**: Filter products by price, category, and other parameters to easily find your desired items.
7. **Smooth User Experience**: The site is designed for perfect navigation, ensuring a pleasant shopping experience for all users.
---
## Live Website
[**Visit Gadget Heaven Live Website**](https://n49h-gadget-heaven.netlify.app/)
---
## Requirement Document
[**View Requirement Document**](https://drive.google.com/file/d/1i4YBZAZnATeDvQ275IRrEi98JtWBOM-f/view?usp=sharing)
---
## Technologies & Concepts Used
### 1. **React Fundamentals**
This project is built using **React**, which provides a fast and interactive UI. The following React fundamentals have been used:
- **Functional Components**: All components are built as functional components.
- **React Router**: For client-side routing and navigation between pages (Home, Dashboard, Product Details, Cart, Wishlist, etc.).
- **State Management (Local Storage)**: To manage states like the shopping cart and wishlist across different components.
- **React Hooks**: Utilized for managing state and lifecycle events. Specifically:
- `useState`: For local state management within components.
- `useEffect`: For side effects like fetching data or saving to local storage.
- `useLocation (React Router)`: Accesses the current location object, such as the current URL.
- `useNavigate (React Router v6+)`: Programmatically navigates to different routes.
- **Conditional Rendering**: Displaying different UI elements based on the state (e.g., showing the cart if it's populated).
### 2. **Data Management**
To handle and manage data effectively, I use:
- **LocalStorage**: For data persistence across page reloads. Cart and wishlist items are saved in the browser's local storage to ensure that users' selections remain intact even if they refresh or revisit the site.
---
## Features in Detail
Here are five key features of the **Gadget Heaven** platform:
1. **Structured Navigation Bar**
The site’s top navigation bar includes a logo, Home, Dashboard, a shopping cart icon, and a wishlist icon. Each section allows for quick navigation to the most important pages.
2. **Product Filtering**
Users can filter products by **category**. This feature allows users to find products that fit their specific needs quickly. Filters update dynamically as selections are made.
3. **Cart and Wishlist Management**
Users can add products to their cart, remove items, and even clear the entire cart. Similarly, users can add products to their wishlist for later purchase. Both functionalities are backed by the using LocalStorage.
4. **Product Detail Pages**
Each product has a detailed page that includes high-quality images, descriptions, technical specifications, and an “Add to Cart” button also "Wishlist" button.
5. **Custom Error Page for Handling Issues**
A custom error page ensures that when an unexpected issue occurs (e.g., product data failure, unavailable items, or an unexpected bug), users don’t get a generic 404/500 page but are instead guided through the error with context and helpful suggestions:
- `Clear Error Message`: Inform users about the issue without overwhelming them.
- `Helpful Links`: Offer options like Return to the homepage.
- `User-Friendly Language`: Make the message light and friendly, maintaining a positive tone despite the error.
---
## Attachments
- [**Alternate Live Website Link**](https://n49h-gadget-heaven.surge.sh/)
- [**View Requirement Document**](https://drive.google.com/file/d/1i4YBZAZnATeDvQ275IRrEi98JtWBOM-f/view?usp=sharing)
---
### React Concepts Used:
- **Functional Components**
- **React Router**
- **State Management**
- **React Hooks** (`useState`, `useEffect eg,..`)
### Data Handling:
- **Local Storage**: For persistence of cart and wishlist data across by Local Storage.
---
## Follow Me
- Connect with me on [LinkedIn](https://www.linkedin.com/in/md-najib-hossain/)
- Email me at [[email protected]](mailto:[email protected])
That's it!