Divyam2600 / Amazon-clone-2.0

Amazon 2.0 Clone built using Next JS, Tailwind CSS, FakeStore Api, Stripe, Redux, Firebase. Additionally React Toast, React Confetti, Heroicons, React Carousels, etc have been used.

Amazon Clone 2.0

About The Build

Amazon 2.0 is one which fetches products data from FakeStore Api and has Slick Animations, Eye-Catching UI, Toast notifications, Stripe Payment Integration and many more. However, the Stripe webhook passes 500 Err code(Internal Server Error) which prevented the implementation of the Order Page Logic and integration of Firebase Database.

Click Template Video above to view the demo of the build.

Next.js + Tailwind CSS

Next.js is a React Production Framework which gives the best developer experience with all the features for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

How To Start

Start with a pre-made Starter Template

Execute create-next-app with npm or Yarn to bootstrap the example with a pre-configured starter template of NextJs App with TailwindCSS:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Now finally run your Project

Run your build process with npm run dev or whatever command is configured in your package.json file.

npm run dev

Environment variables

Open or create a .env file then edit add this setting

SKIP_PREFLIGHT_CHECK=true

# Authentication
GOOGLE_ID=key_goes_here
GOOGLE_SECRET=key_goes_here
NEXTAUTH_URL=http://localhost:3000

# Stripe
STRIPE_PUBLIC_KEY=key_goes_here
STRIPE_SECRET_KEY=key_goes_here

# Stripe Terminal/CLI
STRIPE_SIGNING_SECRET=key_goes_here

HOST=http://localhost:3000

# Need to add this to... google cloud
# http://localhost:3000/api/auth/callback/google

Author

👤 Divyam Agarwal

• Website: https://divyamag.vercel.app/
• Github: @Divyam2600

Show your support

Give a ⭐️ if this project helped you!