https://github.com/wahedpro/gadget-heaven
Gadget Heaven - your one-stop destination for the latest gadgets and tech products!
https://github.com/wahedpro/gadget-heaven
css firebase html javascript tailwindcss
Last synced: 2 months ago
JSON representation
Gadget Heaven - your one-stop destination for the latest gadgets and tech products!
- Host: GitHub
- URL: https://github.com/wahedpro/gadget-heaven
- Owner: wahedpro
- Created: 2025-01-05T07:14:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T10:01:07.000Z (over 1 year ago)
- Last Synced: 2025-10-04T03:38:38.517Z (9 months ago)
- Topics: css, firebase, html, javascript, tailwindcss
- Language: JavaScript
- Homepage: https://gadget-heaven-assignment8.netlify.app
- Size: 846 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gadget Heaven
Welcome to **Gadget Heaven** - your one-stop destination for the latest gadgets and tech products!
## 🌐 Live Demo
[Live Project Link](https://gadget-heaven-assignment8.netlify.app)
## 📄 Requirement Document
[Requirement Document](https://github.com/programming-hero-web-course2/b10a8-gadget-heaven-wahedpro/blob/main/public/Batch-10_Assignment-08.pdf)
---
## 🚀 Key React Fundamentals Used
This project is built on core concepts of React, including:
- **Components**: Reusable components for a modular structure.
- **Props and State**: Managed data flow between components.
- **Conditional Rendering**: Dynamically changed UI elements.
- **Hooks (useState, useContext, useEffect)**: Managed state and side effects.
- **React Router**: Implemented for seamless navigation.
---
## 📊 Data Handling and Management
We used **Context API** for managing global state across the app. Additionally:
- **Local Storage** is used to persist certain data between sessions for a better user experience.
---
## 🌟 Top 5 Features
1. **Dynamic Navigation**: The background color of the navigation bar changes based on the selected page.
2. **Product Cart Management**: Users can add items to the cart, with real-time updates of item count and a badge indicating the total.
3. **Feedback System**: Users can provide feedback with different rating levels and submit their details.
4. **Product Wishlist**: Ability to mark favorite products, which is saved in local storage.
5. **User Authentication**: Allows users to securely log in and manage their personalized data.
---
## 📦 Dependencies
The project uses the following dependencies:
```json
{
"localforage": "^1.10.0",
"match-sorter": "^7.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-icons": "^5.3.0",
"react-router-dom": "^6.27.0",
"react-toastify": "^10.0.6",
"recharts": "^2.13.3",
"sort-by": "^1.2.0"
}
```
---
## 🛠 How to Run the Project Locally
### Clone the Repository
```sh
git clone https://github.com/wahedpro/Gadget-Heaven
cd Gadget-Heaven
```
### Install Dependencies
```sh
npm install
```
### Run the Project
```sh
npm run dev
```
This will start the development server. Open [http://localhost:3000](http://localhost:3000) in your browser.
---
Thank you for exploring **Gadget Heaven**! 🚀