August 11, 2023

Amazon Clone with Authentication using Firebase, developed using React

Amazon Clone with Authentication using Firebase, Data Storage with Firestore, and Payments with Stripe

This is a full-stack web application that replicates the core functionalities of the popular e-commerce platform Amazon. The application uses Firebase for authentication, Firestore for data storage, and Stripe for processing actual payments. The backend is built using Node.js and Express, while the frontend is developed using React.

Features

  • User authentication using Firebase Auth.
  • Browse through various products.
  • Add products to the cart.
  • Update and remove items from the cart.
  • Checkout process with real payment functionality using Stripe.
  • Real-time product updates.
  • Responsive design for mobile and desktop.

Deployment

-Under progress-

Screenshots

image

image

image image

image

Installation

  1. Clone the repository:
git clone https://github.com/your-username/amazon-clone.git
cd amazon-clone
  1. Install backend dependencies:
npm install
  1. Install frontend dependencies:
npm install
  1. Set up Firebase:
  • Create a new project on Firebase and enable Authentication and Firestore.
  • Go to the project settings and find the web app configuration.
  • Copy the configuration object and replace it in src/firebase.js.
  1. Set up Stripe:
  • Create an account on Stripe (if you haven't already).
  • Get your Stripe API key.
  • Replace the placeholder in payment.js with your Stripe API key.
  1. Run the application:
# From the backend directory
firebase init
firebase emulators:start

# From the frontend directory
npm start
  1. Open your browser and navigate to http://localhost:3000 to view the application.

Folder Structure

amazon-clone/
|-- functions/
|   |-- index.js
|-- 
|   |-- public/
|   |-- src/
|   |   |-- components
|   |   |-- App.js
|   |   |-- index.js
|
|-- README.md

Acknowledgements

  • This project is inspired by the Amazon website.
  • Special thanks to Firebase, Firestore, and Stripe for providing the authentication, data storage, and payment processing capabilities.