Here is the folder structure of this app.
ecommerce-nextjs/
|- ecommerce-admin/
|-- actions/
|-- app/
|--- (auth)/routes/
|---- sign-in/
|---- sign-up/
|--- (dashboard)/[storeId]/(routes)/
|---- billboards/
|---- categories/
|---- colors/
|---- orders/
|---- products/
|---- settings/
|---- sizes/
|--- api/
|---- [storeId]/
|----- billboards/
|----- categories/
|----- checkout/
|----- colors/
|----- products/
|----- sizes/
|---- stores/[storeId]/
|---- webhook/
|--- favicon.ico
|--- globals.css
|-- components/
|--- modals/
|--- ui/
|-- constants/
|-- hooks/
|-- lib/
|-- prisma/
|-- providers/
|-- public/
|--- icons/
|--- site.webmanifest/
|-- .env.local
|-- .env.example
|-- components.json
|-- middleware.ts
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- tailwind.config.ts
|-- tsconfig.json
|- ecommerce-store/
|-- actions/
|-- app/
|--- (routes)/
|---- cart/
|---- category/[categoryId]/
|---- product/[productId]/
|--- favicon.ico
|--- globals.css
|-- components/
|--- gallery/
|--- ui/
|-- constants/
|-- hooks/
|-- lib/
|-- providers/
|-- public/
|--- icons/
|--- site.webmanifest/
|-- .env.local
|-- .env.example
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- tailwind.config.ts
|-- tsconfig.json
|-- types.ts
- Make sure Git and NodeJS is installed.
- Clone this repository to your local computer.
- Create
.env.local
file in bothecommerce-admin/
andecommerce-store/
folder. - Contents of
ecommerce-admin/.env.local
:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_API_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
NEXT_PUBLIC_FRONTEND_STORE_URL=http://localhost:3001
DATABASE_URL=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="xxxxxxxxxx"
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET="xxxxxxxxxxx"
- Contents of
ecommerce-store/.env.local
:
NEXT_PUBLIC_API_URL=http://localhost:3000/api/<your-api-key>
NEXT_PUBLIC_BILLBOARD_ID=<your-billboard-id>
- Clerk Keys:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
andCLERK_SECRET_KEY
are provided by Clerk. You need to sign up for an account on Clerk (https://www.clerk.dev/), log in, and access these keys in your account settings.
- Stripe Secret Key:
STRIPE_API_KEY
is provided by Stripe in order to setup online payments. You need to sign up for an account on Stripe (https://stripe.com/), log in, and access these keys in your account dashboard.
-
Stripe Webhook Secret:
STRIPE_WEBHOOK_SECRET
is required for handling Stripe webhooks securely. Follow these steps to obtain the webhook secret:- Sign in to your Stripe account (https://dashboard.stripe.com/).
- In the Dashboard, go to "Developers" > "Webhooks".
- Click the "Add endpoint" button.
- Set up the endpoint details and select
checkout.session.completed
event. - After saving, you'll see the webhook signing secret. Copy this value to use as
STRIPE_WEBHOOK_SECRET
.
-
URLs for Clerk:
NEXT_PUBLIC_CLERK_SIGN_IN_URL
,NEXT_PUBLIC_CLERK_SIGN_UP_URL
,NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL
, andNEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL
are endpoints or URLs related to your Clerk setup. You can configure these in your Clerk dashboard.
-
Prisma Database URL:
DATABASE_URL
is the connection URL for your Aiven MySQL database. You will need to create a Aiven account (https://aiven.io/) or use an existing one. Obtain the connection URL from your Aiven dashboard.
-
Cloudinary Keys:
-
Cloud Name: The
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
is associated with your Cloudinary account. To find your Cloud Name: - Log in to your Cloudinary account. - Navigate to the Dashboard. - You will find your Cloud Name displayed on the Dashboard. -
Upload Preset: The
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET
is used for unsigned uploads. To create an unsigned upload preset: - In your Cloudinary Dashboard, go to the Settings. - Scroll down to the "Upload presets" section. - Click the "Add upload preset" button. - Configure the preset settings as needed (e.g., folder, tags). - Click the "Save" button. - Your new upload preset will be listed on the Upload Presets page. Copy the name of the preset.
-
-
Public API URL:
NEXT_PUBLIC_API_URL
are endpoints or URLs related to your Admin APIs. You can configure/copy this from your Admin Dashboard Settings Panel.
-
Active Billboard Id:
NEXT_PUBLIC_BILLBOARD_ID
is the id of billboard which you want to display on home page. You can copy this either from dashboard/billboards page or directly from database by runningnpm run prisma:studio
-
Install required packages using
npm install --legacy-peer-deps
oryarn install --legacy-peer-deps
. -
Run both admin and store separately on ports 3000 and 3001 respectively.
- Clerk Documentation: https://www.clerk.dev/docs/
- Stripe Documentation: https://stripe.com/docs/
- Aiven Documentation: https://docs.aiven.io/
- Cloudinary Documentation: https://cloudinary.com/documentation
- Prisma Documentation: https://www.prisma.io/docs
NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
Useful resources and libraries that are used in My Portfolio
- Thanks to CodeWithAntonio: https://codewithantonio.com/
- Clerk
- ShadCN UI
- CLSX
- Cloudinary
- Date FNS
- Stripe
- Recharts
- ZOD
- React Hot Toast
- Lucide Icons
- Prettier
- ESLint
- Next PWA
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out Next.js deployment documentation for more details.
You can also give this repository a star to show more people and they can use this repository.