Amazon Clone

This project is a clone of the Amazon website, developed using ReactJS. It includes features such as user authentication, dynamic cart management, and Stripe payment integration.

📦Technologies

• ReactJS
• Firebase (Hosting, Authentication, Database)
• Material UI
• React Router DOM
• React Currency Format
• React Context API
• Axios (API Requests)
• @stripe/stripe-js and @stripe/react-stripe-js
• React Flip Move
• Moment.js

Features

• User Authentication: Implemented using Firebase authentication.
• Dynamic Cart Management: Utilizes React Context API for efficient state management.
• Stripe Payment Integration: Allows users to make secure payments using Stripe.
• Responsive Design: Works well on a variety of devices and window or screen sizes.

🔨The Process

I initiated the project by setting up the basic structure using Create React App. Firebase was chosen for hosting, authentication, and database functionalities due to its seamless integration with React and ease of use. The core functionality of the project revolves around the cart management system. Using React Context API, I created a data layer where cart items are stored, allowing for easy access and manipulation across different components. Integration with Stripe for payment processing was achieved through Firebase Cloud Functions. This ensured a secure and reliable payment flow, enhancing the user experience. Throughout the development process, I focused on optimizing performance and ensuring a smooth user experience. React Flip Move was employed for animated transitions, adding a touch of interactivity to the checkout process.

📚What I Learned

ReactJS Proficiency:

• Enhanced understanding of ReactJS and its ecosystem.
• Proficiency in utilizing Firebase for authentication and database management.

🛠 Integration of Third-Party Services:

• Integration of third-party services like Stripe for payment processing.

State Management:

• Improved skills in state management using React Context API.

⏳Asynchronous Programming:

• Experience with asynchronous programming and handling API requests.

How Can It Be Improved

To further enhance the project, the following improvements could be considered:

• Implement additional authentication methods such as Google or Facebook login.
• Enhance the user interface with more interactive elements and animations.
• Optimize performance by implementing lazy loading and optimizing data fetching.
• Introduce search functionality for products to improve user experience.
• Add menu bars below the header to mimic other features of Amazon.

Running the Project

To run the project locally:

1. Clone the repository to your local machine.
2. Run npm install or yarn in the project directory to install the required dependencies.
3. Navigate to the folder cd netflix-clone.
4. Set up Firebase configuration for hosting, authentication, and database.
5. Replace the Firebase configuration in the project with your own credentials.
6. Run the project using npm start.

For an overview of the app and its functionalities, please visit App Overview.

Caution

Please note that the backend is not deployed on Firebase due to paid limitations. You can deploy the backend on Firebase or use alternative hosting solutions.

Video

https://github.com/HuzaifaIlyas02/Amazon-Clone/assets/86406012/5cdae17b-b8a1-4c5a-ac8c-1761c4c97c43