https://github.com/abujaforhadi/bdgadget
https://github.com/abujaforhadi/bdgadget
custom dasiyui gadgets hooks-api-react rest-api
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/abujaforhadi/bdgadget
- Owner: abujaforhadi
- Created: 2024-11-16T09:31:10.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-23T13:29:22.000Z (7 months ago)
- Last Synced: 2025-01-25T14:26:33.882Z (5 months ago)
- Topics: custom, dasiyui, gadgets, hooks-api-react, rest-api
- Language: JavaScript
- Homepage: https://bdgadget.abujafor.me/
- Size: 359 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BDGadget✨
**Live Website**: [BDGadget](https://bdgadget.netlify.app/)
## Additional Information
**Requirement Document**: [Requirement Document.pdf](https://github.com/user-attachments/files/17644009/Requirement.Document.pdf)
---
## Table of Contents
- [Project Description](#project-description)
- [Features](#features)
- [React Concepts](#react-concepts)
- [Data Management](#data-management)
- [Installation & Setup](#installation--setup)
- [Additional Information](#additional-information)
---
## Project Description
**BDGadget ** is a responsive e-commerce platform for gadget enthusiasts. The platform includes features like structured navigation, product categories, detailed product pages, a shopping cart, and a wishlist. Built on a detailed Figma design, **BDGadget** offers a smooth, interactive shopping experience with Context API and LocalStorage for efficient state and data management.
---
## Features
1. **Dynamic Product Categories**: Filter gadgets by categories with a sidebar for seamless navigation.
2. **Product Details Page**: Detailed product information page with add-to-cart and add-to-wishlist options.
3. **Shopping Cart**: Tracks selected items with total cost calculation and a "Sort by Price" option.
4. **Wishlist**: Allows users to save items and prevents duplicate entries.
5. **Toast Notifications**: Provides feedback when items are added to the cart or wishlist.
---
## React Concepts
- **Components**: Reusable sections for Navbar, Footer, Product Cards, etc.
- **Props**: Data passed to components like Product Cards and Details Page.
- **State Management**: Manages local UI states for features like wishlist and cart.
- **Hooks**:
- `useState` - Local state handling.
- `useEffect` - Data fetching and state updates.
- `useContext` - Access to cart and wishlist data.
- `useNavigate` - Internal routing without page reloads.
- `useLocation` - Conditional styling based on page.
- **React Router**: Routing for pages like Home, Dashboard, and Details.
- **Error Handling**: Custom 404 page for invalid routes.
---
## Data Management
- **Context API**: Centralized management for cart and wishlist states across the app.
- **LocalStorage**: Persists cart and wishlist data to avoid data loss on reload.
---
## Installation & Setup
1. Clone the repository:
```bash
git clone https://github.com/abujaforhadi/BDGadget.git
[](https://app.netlify.com/sites/bdgadget/deploys)