E-Commerce Platform - Amazon Clone

Overview

Welcome to the E-Commerce Platform, a fully functional Amazon Clone project developed during the Geekathon event held by Geekster from 3rd August to 9th August. This platform allows users to browse through various product categories, filter products based on brands, ratings, and prices, search for specific items, and add them to the cart. The project integrates Firebase for authentication and Razorpay for payment processing, ensuring a secure and seamless shopping experience.

Features

• Authentication: Secure user authentication using Firebase. Cart data is also stored with the user profile.
• Responsive Landing Page: A visually appealing, responsive landing page inspired by Amazon's design.
• Product Listings & Search: Products are listed using the Amazon Product Data API, with a robust search feature to find items quickly.
• Filters: Users can filter products by category, brand, price range, and rating.
• Carousels: Product images and offers are displayed using carousels for better user engagement.
• Add to Cart & Bill Summary: Users can add products to their cart, view a detailed bill summary, and proceed to checkout.
• Payment Integration: Integrated Razorpay for payment processing. Payments can only be made after successful authentication.
• Toast Notifications: Real-time notifications using Toaster for better user experience.

Demo

Demo Video

Watch the Demo Video

Live Demo

Live Demo

Images

Landing Page

Product Listings

Cart Summary

Order Summary

API Integration

• Amazon Product Data API: Used for fetching real-time product data.

  • API Documentation: Real-Time Amazon Data
  • API Example: Amazon Product Data

• Payment Integration: Razorpay is used for handling payments.

  • API Documentation: Razorpay API

Note: API calls are limited, so the project primarily works with JSON data for development. API calls are implemented during the final stage.

Technologies Used

• Frontend: React,React Router, Redux, Context API, useState, useRef, useEffect,Tailwind Css ,CSS Modules etc.
• Backend & Authentication: Firebase
• Payment Gateway: Razorpay
• State Management: Redux
• UI Components: Carousels, Toast Notifications, Responsive Design
• Others: React Router, Axios for API calls

Installation & Setup

Prerequisites

• Node.js installed
• Firebase account
• Razorpay account
• API keys for Amazon Product Data API

Installation

1. Clone the repository:

   git clone https://github.com/your-username/AmazonClone.git

2. Navigate to the project directory:

   cd AmazonClone

3. Install dependencies:

   npm install

4. Run the development server:

   npm start

5. Setup Firebase

   • Create a Firebase project and add the Firebase SDK to your React app.
   • Configure Firebase authentication (email/password).
   • Store your Firebase credentials in a .env file.

6. Setup Razorpay

   • Register for a Razorpay account and obtain the API keys.
   • Integrate Razorpay into your checkout component.

7. Configure API Keys

   • Create a .env file in the root directory and add your API keys.

   REACT_APP_AMAZON_API_KEY=your_amazon_api_key
   REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
   REACT_APP_RAZORPAY_KEY=your_razorpay_key

Deployment

The application is deployed on [Vercel] (Replace with the appropriate hosting link).

Extra Features Implemented

• Search Functionality: Enhanced search functionality to find products based on keywords.
• Advanced Filters: Users can filter products not only by price and rating but also by categories and brands.
• Responsive Design: Ensured the platform is fully responsive and mobile-friendly.
• Toast Notifications: Added real-time notifications for user interactions, like adding items to the cart or completing payments.

Contribution

Contributions are welcome! If you'd like to contribute, please fork the repository and create a pull request.

Acknowledgments

• Geekster for organizing the Geekathon event.
• RapidAPI for providing the Amazon Product Data API.
• Firebase for authentication services.
• Razorpay for payment gateway integration.
• Special thanks to the developers whose tutorials and resources helped in building this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Authors

• Ganesh Patel - Initial work - Ganesh-Patel