Skip to content

codeOfTheFuture/amazon-clone

Repository files navigation

Amazon Clone App Documentation

📦 This is an Amazon clone app built with Next.js 13, TypeScript, Redux Toolkit, Next-Auth, TailwindCSS, Stripe, and Firebase.

Getting Started

To run the app locally, follow these steps:

  1. Clone the repository from GitHub:

    git clone https://github.com/codeOfTheFuture/amazon-clone.git

  2. Install the dependencies:

    npm install

  3. Create a .env.local file in the root directory of the project and add your Authentication, Firebase and Stripe credentials:

    Authentication

    • GOOGLE_CLIENT_ID=<your_google_client_id> Google OAuth client ID.

    • GOOGLE_CLIENT_SECRET=<your_google_client_secret> Google OAuth client secret.

    • NEXTAUTH_URL=<your_nextauth_url> The URL of the Next.js app.

    • NEXTAUTH_SECRET= <your_nextauth_secret> A secret string used for signing and encrypting cookies.

    Firebase - Client

    • FIREBASE_API_KEY=<your_firebase_api_key> Firebase API key.
    • FIREBASE_AUTH_DOMAIN=<your_firebase_auth_domain> Firebase authentication domain.
    • FIREBASE_PROJECT_ID=<your_firebase_project_id> Firebase project ID.
    • FIREBASE_STORAGE_BUCKET=<your_firebase_storage_bucket> Firebase storage bucket.
    • FIREBASE_MESSAGING_SENDER_ID=<your_firebase_messaging_sender_id> Firebase messaging sender ID.
    • FIREBASE_APP_ID=<your_firebase_app_id> Firebase app ID.

    Stripe

    • STRIPE_PUBLIC_KEY=<your_stripe_public_key> Stripe public key.
    • STRIPE_SECRET_KEY=<your_stripe_secret_key> Stripe secret key.

    Stripe Terminal/CLI

    • STRIPE_SIGNING_SECRET=<your_stripe_signing_secret> Stripe signing secret used to verify webhook events.
  4. Run the app locally:

    npm run dev

The app should now be running on http://localhost:3000.

Features

The app includes the following features:

- User authentication with Next-Auth
- Product browsing
- Product details and ratings
- Add to cart and checkout with Stripe integration
- Order history

Code Structure

The app uses the new Next.js app directory structure introduced in version 13. The directory structure is organized as follows:

- `app`: Next.js 13 app directory, which supports nested routes, layouts,
   and server components by default.
- `components`: reusable UI components
- `utils`: utility functions
- `pages/api/`: Next.js API routes.
- `assets`: static assets like images
- `styles`: global CSS styles and TailwindCSS configuration
- `types`: TypeScript type definitions
- `redux`: Redux store configuration and slice definitions
- `firebase`: Firebase configuration

Technologies Used

The app is built with the following technologies:

  • Next.js 13 - A React framework for building server-side rendered and static websites
  • TypeScript - A typed superset of JavaScript
  • Redux Toolkit - A toolset for efficient Redux development
  • Next-Auth - An authentication library for Next.js
  • TailwindCSS - A utility-first CSS framework
  • Stripe - A payment processing platform
  • Firebase - A backend service for building web and mobile apps

API Routes Documentation

This is a documentation of the API routes in the Amazon Clone project.

pages/api/checkout_session.ts

POST /api/checkout_session

Creates a Stripe checkout session for a list of products.

Request Body:

Parameter Type Description
basketItems Product[] List of products in the basket.
email string Email address of the customer.

Example Request:

POST /api/checkoutSession HTTP/2 Content-Type: application/json Authorization: <Element: JWT Token>

```json
    {
        "basketItems": [
            {
                "id": 1,
                "uuid": "a1b2c3",
                "title": "Product 1",
                "price": 10.99,
                "description": "This is the first product",
                "category": "electronics",
                "image": "https://example.com/product1.jpg",
                "rating": {
                    "rate": 4.5,
                    "count": 100
                },
                "hasPrime": true
            },
            {
                "id": 2,
                "uuid": "d4e5f6",
                "title": "Product 2",
                "price": 14.99,
                "description": "This is the second product",
                "category": "home",
                "image": "https://example.com/product2.jpg",
                "rating": {
                    "rate": 3.9,
                    "count": 50
                },
                "hasPrime": false
            }
        ],
        "email": "[email protected]"
    }
```

Response:

If the checkout session is successfully created, the API returns a JSON object with the id property set to the ID of the created checkout session.

If the request is unsuccessful, the API returns a JSON object with an error message.

Example Successful Response:

```json
    {
        "id": "cs_test_1234567890"
    }
```

Example Unsuccessful Responses:

- Response (401 Unauthorized)

```json
    {
        "message": "Unauthorized"
    }
```

- Response (500 Internal Server Error)

```json
    {
        "message": "An error occurred while creating the Stripe checkout session."
    }
```

pages/api/webhook.ts

POST /api/webhook

This route handles Stripe webhook events

Request Body:

- This endpoint expects a Stripe webhook event payload.

Response:

- If the webhook event is successfully processed, the endpoint will respond with a status code of 200.
- If the webhook event fails to process, the endpoint will respond with a status code of 500.

For more information on Stripe webhooks, refer to the Stripe documentation.

Contributor

This project was developed by Jeffrey Oliver.

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors