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.