E-Commerce App

Welcome to the E-Commerce App repository! This project is a fully functional e-commerce web application built with React, Tailwind CSS, Firebase, and other modern web technologies.

Table of Contents

• Introduction
• Demo
• Features
• Installation
• Usage
• File Structure
• Technologies Used
• Contributing
• License
• Contact

Introduction

The E-Commerce App is a modern web application designed to provide a seamless shopping experience for users. It includes all the essential features required for an e-commerce platform, such as product listings, detailed product pages, a shopping cart, a secure checkout process, user authentication, and more. The app is built using React for the frontend, Firebase for the backend, and Tailwind CSS for styling.

Demo

Check out the live demo of the application https://e-commerce-website-six-phi.vercel.app/

Features

• Home Page

  • Display featured products, categories, deals, and best-selling items.
  • Search functionality to find products quickly.
  • Banner carousel for promotions and offers.

• Product Page

  • Detailed view of individual products with options to select size, color, and quantity.
  • Product images, descriptions, reviews, and ratings.
  • Related products recommendations.

• Cart

  • Add, remove, and update product quantities in the cart.
  • View cart summary and total price.
  • Apply discount codes.

• Checkout

  • Secure checkout process with form validation.
  • Multiple payment options (credit card, PayPal, etc.).
  • Order summary and confirmation.

• Authentication

  • User sign-up, login, and password reset functionality.
  • Profile management and order history.
  • Authentication using Firebase.

• Wishlist

  • Add products to a wishlist for future purchases.
  • Move products from wishlist to cart.

• Responsive Design

  • Optimized for mobile, tablet, and desktop views.
  • Smooth and intuitive user interface.

• Admin Panel

  • Manage products, categories, and orders.
  • View sales statistics and user data.
  • Secure access for admin users only.

Installation

To get a local copy of the project up and running, follow these steps:

1. Clone the repository

   git clone https://github.com/FadyFathey/E-Commerce-App.git
   cd E-Commerce-App
   
   

Install dependencies

npm install

Set up Firebase

Create a Firebase project and enable Firestore, Authentication, and Hosting. Add your Firebase configuration to a .env file:

REACT_APP_FIREBASE_API_KEY=your-api-key REACT_APP_FIREBASE_AUTH_DOMAIN=your-auth-domain REACT_APP_FIREBASE_PROJECT_ID=your-project-id REACT_APP_FIREBASE_STORAGE_BUCKET=your-storage-bucket REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id REACT_APP_FIREBASE_APP_ID=your-app-id

Run the development server

npm run dev

Open your browser

Navigate to http://localhost:3000 to see the application in action.

Usage Running the App Locally Start the development server:

npm run dev Open your browser and go to http://localhost:3000.

Building for Production Build the app for production:

npm run build

Running Tests Run unit tests:

npm test

File Structure Here is an overview of the main files and directories in the project:

public/

index.html: The HTML template. favicon.ico: Favicon for the app. src/

App.jsx:

The main application component.

index.jsx:

The entry point of the application.

index.css:

Global CSS styles.

assets/:

Static assets like images and icons.

components/:

Reusable UI components.

Header.jsx:

Navigation bar component.

Footer component.

Footer.jsx:

ProductCard.jsx:

Component to display product information.

CartItem.jsx:

Component for items in the cart.

context/:

Context providers for state management.

CartContext.jsx:

Provides cart state and actions.

AuthContext.jsx:

Provides authentication state and actions.

WishlistContext.jsx:

`Provides wishlist state and actions.

pages/:

Pages of the application.

HomePage.jsx:

The home page.

ProductPage.jsx:

Detailed product page.

CartPage.jsx:

Shopping cart page.

CheckoutPage.jsx:

Checkout page.

SignUpPage.jsx:

User sign-up page.

LoginPage.jsx:

User login page.

ProfilePage.jsx:

User profile and order history.

routes/:

Application routes.

AppRoutes.jsx:

Defines routes and their components.

services/:

Services for API calls and Firebase interactions.

firebase.js:

Firebase configuration and initialization.

productService.js:

Service for product-related API calls.

authService.js:

Service for authentication-related API calls.

styles/:

Tailwind CSS configuration and custom styles.

tailwind.config.js:

Tailwind CSS configuration file.

global.css:

Global custom CSS styles.

utils/:

Utility functions and helpers.

formatCurrency.js:

Utility to format currency.

validateForm.js:

Form validation helpers.

Technologies Used

React:

JavaScript library for building user interfaces.

React Router:

Declarative routing for React applications.

Tailwind CSS:

Utility-first CSS framework for rapid UI development.

Firebase:

Backend-as-a-Service for authentication, database, and hosting.

i18next:

Internationalization framework for React applications.

Vite:

Next-generation front-end tooling.

Jest:

JavaScript testing framework for unit tests.

Contributing

We welcome contributions from the community. To contribute:

Fork the repository.

Create a new branch (git checkout -b feature/your-feature).

Commit your changes (git commit -am 'Add some feature').

Push to the branch (git push origin feature/your-feature).

Create a new Pull Request.

Please make sure your code adheres to our coding standards and passes all tests before submitting a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any inquiries or feedback, feel free to reach out: