This example shows how to use Tailwind CSS (v3.2) with Next.js. It follows the steps outlined in the official Tailwind docs.
Tech:
-
Webhook - CONNECT with Firestore Database and shift all the contents over
- stripe listen --forward-to localhost:3000/api/webhook
-
Stripe Checkout
-
React
-
NextJS
-
TailwindCSS
-
NextAuth
-
Firebase Firestore
-
Redux
-
Firebase
-
Fake Store API - support shopping items
-
react-responsive-carousel - Banner Image auto play
-
react-currency-format
-
Micro
-
firebase-admin
Features:
- User login with GoogleAccount
- Select Product and broswer the products in Shopping Basket
- User checkout the basket by Stripe
- After Accept payment, User can check their order in Order Page
Deploy the example using Vercel or preview live with StackBlitz
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
Deploy it to the cloud with Vercel (Documentation).