https://github.com/abdelrahman-samy-dev/amazon-clone
A full-featured Amazon-style e-commerce app built with Next.js 13, TypeScript, Redux Toolkit, Tailwind, NextAuth, and Stripe — auth, cart, checkout, and responsive UI.
https://github.com/abdelrahman-samy-dev/amazon-clone
amazon-clone ecommerce jwt nextauth nextjs nextjs-13 oauth react redux-persist redux-toolkit stripe tailwindcss typescript vercel
Last synced: 3 months ago
JSON representation
A full-featured Amazon-style e-commerce app built with Next.js 13, TypeScript, Redux Toolkit, Tailwind, NextAuth, and Stripe — auth, cart, checkout, and responsive UI.
- Host: GitHub
- URL: https://github.com/abdelrahman-samy-dev/amazon-clone
- Owner: abdelrahman-samy-dev
- Created: 2025-08-27T15:28:58.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2025-08-27T16:08:55.000Z (10 months ago)
- Last Synced: 2025-08-28T00:46:21.068Z (10 months ago)
- Topics: amazon-clone, ecommerce, jwt, nextauth, nextjs, nextjs-13, oauth, react, redux-persist, redux-toolkit, stripe, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://amazon-ecommerce-clone-one.vercel.app/
- Size: 492 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Amazon Clone E-Commerce Application
🛒 Modern E-Commerce Platform
A full-featured Amazon clone built with Next.js, TypeScript, Redux, Tailwind CSS, and NextAuth.js
## 📋 Overview
This application demonstrates modern web development practices and implements core e-commerce functionality. It's designed to provide a seamless shopping experience with features like user authentication, product management, shopping cart, and secure checkout process.
## ✨ Key Features
🔐 User Authentication
- Email/Password login and registration
- OAuth integration with Google and GitHub
- JWT-based session management
- Secure password handling with bcrypt
🏪 Product Management
- Product listing with search functionality
- Product details page with dynamic routing
- Category filtering
- Responsive product grid
🛒 Shopping Experience
- Add to cart functionality
- Favorites/wishlist management
- Quantity adjustment in cart
- Persistent cart with Redux and localStorage
💳 Checkout Process
- Stripe payment integration
- Order summary
- Success confirmation
- Secure payment handling
📱 Responsive Design
- Mobile-first approach
- Tailwind CSS for styling
- Custom breakpoints for various screen sizes
- Optimized for all devices
## 🛠️ Technology Stack
Category
Technologies
Frontend
State Management
Authentication
Payment
## 📋 Prerequisites
- Node.js (v14 or later)
- npm or yarn
- Stripe account for payment processing
- OAuth credentials (optional for social login)
## 🚀 Getting Started
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
- Git
### Installation
Click to expand installation steps
1. **Clone the repository**
```bash
git clone https://github.com/username/amazon_next_yt.git
cd amazon_next_yt
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **Set up environment variables**
Create a `.env.local` file in the root directory with the following variables:
```env
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret
# OAuth Providers (optional)
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key
```
4. **Run the development server**
```bash
npm run dev
# or
yarn dev
```
5. **Open [http://localhost:3000](http://localhost:3000) in your browser**
## 🏗️ Project Structure
```
/src
/components # Reusable UI components
/auth # Authentication related components
/header # Header components
/images # Static images
/slider # Slider images
/lib # Utility functions and authentication
/auth # Authentication utilities
/pages # Next.js pages and API routes
/api # API routes
/store # Redux store configuration
/styles # Global styles
/public
/assets # Public assets
```
## 🧩 Design Patterns & Best Practices
- **Component-Based Architecture**: Modular components for better reusability and maintainability
- **Container/Presentational Pattern**: Separation of logic and UI
- **Redux Ducks Pattern**: Grouping related actions, reducers, and selectors
- **Responsive Design**: Mobile-first approach with Tailwind breakpoints
- **API Route Pattern**: Serverless functions for backend operations
- **Authentication Strategies**: JWT with secure HTTP-only cookies
## 🔒 Security Features
- Password hashing with bcrypt
- JWT-based authentication
- Protected API routes
- Form validation
- Secure payment processing with Stripe
## 🚀 Deployment
This application can be easily deployed on Vercel:
[](https://amazon-ecommerce-clone-one.vercel.app/)
## 📤 How to Push to GitHub
Click to expand GitHub instructions
### 1. Create a GitHub Repository
1. Go to [GitHub](https://github.com/) and sign in to your account
2. Click on the '+' icon in the top right corner and select 'New repository'
3. Name your repository (e.g., 'amazon-clone')
4. Choose whether to make it public or private
5. Do not initialize with README, .gitignore, or license as we already have these files
6. Click 'Create repository'
### 2. Initialize Git in Your Project (if not already done)
```bash
git init
```
### 3. Add Your Files to Git
```bash
git add .
```
### 4. Commit Your Changes
```bash
git commit -m "Initial commit"
```
### 5. Add GitHub Repository as Remote
```bash
git remote add origin https://github.com/yourusername/your-repo-name.git
```
### 6. Push Your Code to GitHub
```bash
git push -u origin main
# or if you're using master branch
git push -u origin master
```
### 7. Verify Your Repository
Go to your GitHub repository URL to verify that your code has been pushed successfully.
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 🙏 Acknowledgements
## 👤 Author
**Abdelrahman Samy**
Made with ❤️ by Abdelrahman Samy