Project : Amazon Clone App

Fully responsive Amazon Clone Application made using Next.js. It is a web application where a real payment system is created using Stripe checkout, the relevant orders are registered to the firestore database using webhooks, and Redux is used as global state management.

Table of contents

• Project : Amazon Clone App
  • Table of contents
  • The challenge
  • Project Skeleton
  • Screenshot
  • Links
    • Built with
    • Useful resources
  • Installation
  • Author
  • Contact
  • How to use

The challenge

To create an clone site with ReactJS, NextJS, Redux, Webhooks, Stripe Checkout, NextAuth, Firestore and TailwindCSS

Project Skeleton

|----README.md
├── lib
│       └── index.js
├── public
│       ├── favicon.ico
│       └── vercel.svg
├── src
│       ├── app
│       │       └── store.js
│       ├── components
│       │       ├── Banner.jsx
│       │       ├── CheckoutProduct.jsx
│       │       ├── Header.tsx
│       │       ├── Order.jsx
│       │       ├── Product.jsx
│       │       └── ProductFeed.jsx
│       ├── pages
│       │       ├── api
│       |       |     ├── auth
│       |       |     |      └── [...nextauth].js
│       |       |     ├── create-checkout-session.js
│       |       |     └── webhooks.js
│       │       ├── _app.js
│       │       ├── checkout.jsx
│       │       ├── index.js
│       │       ├── orders.jsx
│       │       └── success.jsx
│       ├── slices
│       │       └──  basketSlice.ts
│       └── styles
│               └── global.css
├── next.config.js
├── .env
├── jsconfig.json
├── package-lock.json
├── package.json
├── permission.json
├── postcss.config.js
└── tailwind.config.js

Screenshot

Links

---

Check The Live Website ➡️ Live Website

---

Built with

• Next.js
• React Components, Props, States and Hooks
• Redux
• Webhooks
• Stripe Checkout
• API GET requests
• JSX Elements
• TailwindCSS
• NextAuth
• Firestore Database

Useful resources

• W3 Schools
• MDN
• Firebase
• Stripe
• TailwindCSS

Installation

Use the Npm package manager install command.

npm install

---

Author

• Author - [Murat Hüdavendigâr]

Contact

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app

yarn create next-app --example with-tailwindcss with-tailwindcss-app

pnpm create next-app --example with-tailwindcss with-tailwindcss-app