Busy Buy - E-commerce Web App

Busy Buy is a robust and feature-rich online shopping/eCommerce website crafted with React.js and powered by Firebase database. This application seamlessly blends React's component-based architecture, Firebase's cloud-based data storage, and ContextAPI for efficient state management and function creation. Busy Buy provides users with a delightful and intuitive shopping experience, allowing them to sign up, sign in, manage their cart, and place orders.

Table of Contents

• Installation and Running the Code
• Features
• Tools and Libraries
• Getting Started

Installation and Running the Code

Follow these steps to run the code locally on your machine:

1. Clone the repository to your local machine.
2. Navigate to the root directory of the code.
3. Open a command terminal.
4. Run the command npm install to install all required dependencies.
5. To start the application, run the command npm start in your terminal.
6. View the output by opening http://localhost:3000/ in your browser.

Features

• User Authentication:

  • Create an account to sign up.
  • Sign in with an existing account.

• Shopping Cart:

  • Add multiple products to the cart by clicking the "Add to Cart" button.
  • Remove specific products or clear the entire cart.

• Quantity Control:

  • Increase or decrease the quantity of a product in the cart.

• Order Placement:

  • Purchase all items in the cart with a single click.

• Order History:

  • View the placed order history, including date and time of orders and a list of purchased products with the total amount.

• Persistent User Data:

  • User data is saved in the Firebase database, allowing users to access their order history at any time.

Tools and Libraries

• React.js: The JavaScript library for building user interfaces.
• Firebase Database: A cloud-based NoSQL database for storing user and product data.
• ContextAPI: React's Context API for state management and creating functions.
• React Router: For handling navigation within the application.
• React Toastify: Displaying notifications for user actions.
• React Spinner: A loading spinner to indicate data retrieval or loading states.
• CSS: Styling the components and providing a visually appealing user interface.

Getting Started

To get started with Busy Buy, follow the installation instructions and begin exploring the world of seamless online shopping.