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

git clone https://github.com/username/amazon_next_yt.git
cd amazon_next_yt

2. Install dependencies

npm install
# or
yarn install

3. Set up environment variables

Create a .env.local file in the root directory with the following variables:

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

npm run dev
# or
yarn dev

5. Open 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:

📤 How to Push to GitHub

Click to expand GitHub instructions

1. Create a GitHub Repository

1. Go to GitHub 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)

git init

3. Add Your Files to Git

git add .

4. Commit Your Changes

git commit -m "Initial commit"

5. Add GitHub Repository as Remote

git remote add origin https://github.com/yourusername/your-repo-name.git

6. Push Your Code to GitHub

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