Project information

  • Category: clone
  • Project date: 01 july, 2023

Amazon Clone with React and Firebase

Overview: This project is a web application that replicates the functionality and design of Amazon, a leading online shopping platform. The project uses React, a JavaScript library for building user interfaces, React Bootstrap, a framework for responsive web design, CSS, a style sheet language for web pages, JSX, a syntax extension for JavaScript, RESTful API, an architectural style for web services, and Fake Products API, a mock API for generating fake product data. The project also uses Firebase, a platform for developing web and mobile applications, to store and manage data in Firestore database and to authenticate users. The project also integrates Stripe, a payment processing service, to enable checkout payment. The project is deployed online using Netlify, a hosting and deployment service.
Project Justification: The project is motivated by the desire to learn and practice modern web development technologies and tools. The project also demonstrates the ability to create a full-stack web application that mimics a real-world product. Objectives: The main objectives of the project are:

  • To create a responsive and user-friendly web interface that resembles Amazon using React, React Bootstrap, and CSS.
  • To fetch and display fake product data from Fake Products API using RESTful API and JSX
  • To implement features such as product categories, search function, product details, add to cart, checkout, and payment using React components and hooks.
  • To store and manage data such as user profiles, orders, and products using Firebase Firestore database.
  • I used Node to integrate the back end
  • To authenticate users using Firebase authentication services.
  • To enable checkout payment using Stripe integration.
  • To deploy the web application online using Netlify hosting and deployment services.

Phases of Work: The project consists of four phases:
  • Phase 1: Setting up the development environment and installing the required dependencies.
  • Phase 2: Designing and developing the web interface using React, React Bootstrap, and CSS.
  • Phase 3: Integrating the movie data from TMDB using RESTful API and JSX.
  • Phase 4: Deploying the web application online using Firebase.