https://github.com/satyam-software-developer/buybusy-i-react
buybusy-i created with reactjs for frontend web developemnt.
https://github.com/satyam-software-developer/buybusy-i-react
context-api css firbase-database git github react-router-dom react-spinner react-tostify reactjs
Last synced: 17 days ago
JSON representation
buybusy-i created with reactjs for frontend web developemnt.
- Host: GitHub
- URL: https://github.com/satyam-software-developer/buybusy-i-react
- Owner: satyam-software-developer
- License: mit
- Created: 2024-12-17T22:36:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-29T09:49:14.000Z (about 1 year ago)
- Last Synced: 2025-02-12T10:53:35.108Z (about 1 year ago)
- Topics: context-api, css, firbase-database, git, github, react-router-dom, react-spinner, react-tostify, reactjs
- Language: JavaScript
- Homepage: https://buybusy-i-react.vercel.app
- Size: 2.18 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Problem statement
- https://classroom.codingninjas.com/app/classroom/me/25434/content/694582/offering/11358835?leftPanelTabValue=PROBLEM
# 📦 BuyBusy-I — E-Commerce Web App
BuyBusy is an online shopping (eCommerce) web application built using React.js, Firebase, and Context API.
Users can create accounts, log in, add/remove items from their cart, modify item quantities, and place orders.
All user data—including cart and order history—persists in Firebase, allowing users to revisit their purchase history anytime.
# 🚀 Installation & Running the Project
1. Download or clone the repository.
2. Open the project folder in your terminal.
3. Install required dependencies:
npm install
4. Start the development server:
npm start
5. Open the application in your browser:
👉 http://localhost:3000/
# ✨ Features
- Create a new user account (Sign Up)
- Log in to an existing account (Sign In)
- Add products to the cart
- Remove individual products or clear the entire cart
- Increase or decrease product quantity
- Purchase all products in the cart at once
- View complete order history with:
- Order date & time
- List of purchased items
- Total amount
- All data is permanently stored in Firebase
# 🛠️ Tools & Libraries Used
- React.js
- Firebase (Auth + Firestore Database)
- Context API
- react-router-dom
- react-toastify (notifications)
- react-spinners (loading indicators)
- CSS
# ⭐ BuyBusy-I — E-Commerce Web App (React + Firebase)
BuyBusy-I is a full-stack E-Commerce Web Application built using React.js and Firebase. It allows users to browse products, manage shopping carts, place orders, and securely authenticate using Firebase Authentication.
The project demonstrates CRUD operations using Firestore along with proper state management, routing, reusable components, and clean code practices.
# 🚀 Objective
Build a fully functional e-commerce web application for customers to:
- Browse products
- Search & filter items
- Add/remove items in the cart
- Increase/decrease cart quantities
- Place orders
- Register & login securely
# 🎯 Goal
Develop a modern E-Commerce platform that supports user authentication, product exploration, cart management, and order handling with Firebase acting as the backend.
# ✅ Features / Acceptance Criteria
✔ 1. Firebase CRUD Integration
The React app uses Firestore for:
- Storing all products
- Adding/removing items from user carts
- Updating product quantity
- Storing user orders
✔ 2. User Authentication
Using Firebase Authentication, users can:
- Register a new account
- Login with email/password
- Persist session
✔ 3. Routing
All pages handled using react-router-dom, including:
- /register
- /login
- /
- /cart
- /orders
✔ 4. Global State with useContext
The app uses:
- AuthContext → stores user login/logout state
- ProductContext → manages products, filters, and cart
✔ 5. React Hooks
Used everywhere:
- useState
- useEffect
- useContext
- useReducer
- Custom hooks (if created)
✔ 6. Clean Code & Documentation
Every component is well-structured, readable, modular, and commented.
✔ 7. 100% Original Project Code
No external copying.
Everything is written fresh for this project.
# 🎁 Bonus Features Included (Optional Enhancements)
## ⭐ Sidebar Filters
Filter products by:
- Category
- Price range
Search + Filters work together.
## ⭐ Loaders with react-spinners
Shows loading indicators during:
- Fetching products
- Fetching cart
- Updating orders
## ⭐ Toast Notifications (react-toastify)
Used for:
- Adding to cart
- Removing from cart
- Login/register success
- Error states
- Order placed
# 📁 Firebase API Structure
/products
/usersCarts//myCart
/userOrders//orders
# 🛠️ Tech Stack
Frontend
- React.js
- React Router
- useContext / useReducer / hooks
- CSS modules / Tailwind / own CSS (based on project)
Backend
- Firebase Firestore (CRUD database)
- Firebase Authentication
- Libraries
- react-toastify
- react-spinners
- Firebase SDK v9+
# 📦 Folder Structure
BuyBusy-I/
│── src/
│ ├── components/
│ │ └── ProductCard.jsx
│ │ └── Navbar.jsx
│ │ └── Sidebar.jsx
│ ├── pages/
│ │ └── Home.jsx
│ │ └── Cart.jsx
│ │ └── Orders.jsx
│ │ └── Login.jsx
│ │ └── Register.jsx
│ ├── context/
│ │ └── AuthContext.js
│ │ └── ProductContext.js
│ ├── firebase/
│ │ └── firebaseConfig.js
│ ├── App.js
│ ├── index.js
│── public/
│── README.md
│── package.json
# 🧩 Core Functionalities
## 🏠 Home Page
- Displays all products
- Search bar (live filtering)
- Sidebar filter
- Add to cart button
## 🛒 Cart Page
- Shows all items added
- Increase/decrease quantity
- Remove product
- Place order
## 🧾 Orders Page
- Lists all previous orders
- Shows order date
## 🔑 Authentication
- Register user
- Login user
- Persist session using Firebase
# 🔥 Important Logic Notes
✔ Search + Filter Combination
A custom function handles:
search term → filter by name
price range → filter by min/max
categories → filter by category
All applied at the same time.
# 🧪 Testing Expectations
Make sure the following works flawlessly:
- Login & Logout
- Register new user
- Add to cart
- Remove from cart
- Increase/decrease quantity
- Filter + search together
- Orders page shows correct data
- Toasts for success/error
- Loader during async operations
# 📜 License
This project is created solely for educational & professional development purposes.
# 🤝 Contributing
Feel free to submit issues or pull requests.
# ❤️ Acknowledgments
- Firebase Documentation
- React Documentation
- react-toastify
- react-spinners
# Author
Satyam Kumar