🛒 ShopEase - E-Commerce Platform

🔹 Project Description

ShopEase is a modern e-commerce platform built with React, Firebase Authentication, and Tailwind CSS. It allows users to:

• Browse products
• Add items to a shopping cart
• Manage item quantities
• Sign up/login securely with Firebase
• Display username with hover-to-logout feature
• Added toast notifications for login, logout, and cart actions.
• Integrated toast alerts for better user experience and feedback.

---

🔹 Features

• Authentication

  • Firebase Email/Password signup and login
  • Display username in Navbar
  • Hover to logout functionality

• Products

  • View all products
  • Add to cart
  • Update or remove items in cart

• Shopping Cart

  • Persistent cart stored in localStorage
  • Dynamic cart count displayed in Navbar

• Responsive Design

  • Fully responsive Navbar with mobile menu
  • Smooth UX for desktop and mobile users

---

🔹 Tech Stack

• Frontend: React, React Router, Tailwind CSS
• Authentication: Firebase Auth
• Icons: React Icons
• State Management: useState, useEffect

---

🔹 Folder Structure

src/
├─ Components/
│ ├─ Navbar.jsx
│ ├─ AllProducts.jsx
│ ├─ About.jsx
│ ├─ Contactt.jsx
├─ Pages/
│ ├─ Home.jsx
│ ├─ Cart.jsx
│ ├─ Login.jsx
│ ├─ Signup.jsx
├─ Firebase/
│ ├─ FirebaseAuth.js
├─ App.jsx
├─ index.js

---

🔹 Firebase Setup

1. Create a Firebase project: Firebase Console
2. Enable Authentication → Email/Password
3. Create FirebaseAuth.js:

---

🔹 Installation

1. Clone the repository:

git clone https://github.com/yourusername/shopease.git
cd shopease

2.Install dependencies:

npm install

3.Start the development server:

npm run dev

4.Open http://localhost:5173

---

🔹 Usage

• Browse products and click Add to Cart

• Update quantities or remove products

• Sign up / Login using Firebase Auth

• Hover over the username in Navbar to Logout

---

🔹 Screenshots

• Home Page

---

• Product Listing

---

• Cart Page

---

• Login

---

• Signup

---

• Firebase

---

🔹 Future Improvements

• Add Checkout & Payment System

• Implement Search by Product Name functionality