Welcome to the Amazon Clone built with Next.js. This project is a fully functional e-commerce website that replicates the core functionality of Amazon. It includes various modern web development concepts and technologies such as Redux Toolkit, Tailwind CSS, Next.js Server-Side Rendering (SSR), NextAuth.js authentication, webhooks, Stripe integration, Firebase Firestore database, and the Fake Store API for product fetching. This README provides an overview of the project and instructions for setup.
You can access the live demo of this Amazon Clone at https://amazon-clone-nextjs-nine.vercel.app/.
- Product Listings: Display a variety of products fetched from the Fake Store API.
- User Authentication: Users can create accounts, log in, and log out using NextAuth.js.
- Shopping Cart: Users can add and remove items from their shopping cart.
- Checkout: Seamless checkout process with Stripe integration.
- Order History: Users can view their order history.
- Real-time Updates: Utilize webhooks to receive real-time updates on order status changes.
- Search Functionality: Search for products by name or category.
- Responsive Design: The application is designed to work seamlessly on various screen sizes.
- Next.js: A React framework for building server-rendered React applications.
- Redux Toolkit: Simplify state management in React applications.
- Tailwind CSS: A utility-first CSS framework for designing modern web applications.
- NextAuth.js: Easy authentication for Next.js applications.
- Stripe: Payment processing integration for handling online payments.
- Firebase Firestore: Cloud-hosted NoSQL database for storing user data and orders.
- Fake Store API: Provides mock e-commerce data for product listings.
To run the project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/joshihemal/amazon_clone_nextjs.git
-
Change the directory to the project folder:
cd amazon-clone-nextjs
-
Install the dependencies:
npm install
Before running the application, you need to set up the required configuration variables:
-
Firebase Configuration:
- Create a Firebase project on the Firebase Console.
- Set up Firestore in your Firebase project.
- Obtain your Firebase project configuration, including API keys.
- Update the configuration in
firebase.js
.
-
Stripe Configuration:
- Create a Stripe account on Stripe.
- Obtain your Stripe API keys.
-
NextAuth.js Configuration:
- Create an OAuth App on the GitHub Developer Settings.
- Obtain your GitHub OAuth credentials (Client ID and Client Secret).
- Update the configuration in
[...nextauth].ts
.
-
ENV configuration
- download env file from private repo
Once the configuration is set up, you can start the development server with the following command:
npm run dev
This will start the application on http://localhost:3000
.
Thank you for checking out the Amazon Clone built with Next.js! If you have any questions or feedback, please feel free to open an issue or contact the project's maintainer.