A Next.js 14 E-Commerce App and Admin Dashboard/CMS

📔 Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

‼️ Folder Structure

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

🧰 Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env.local file in both ecommerce-admin/ and ecommerce-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 and CLERK_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, and NEXT_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 running npm run prisma:studio
Install required packages using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
Run both admin and store separately on ports 3000 and 3001 respectively.

📚 Additional Resources

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.

📷 Screenshots:

E-Commerce Store

E-Commerce Admin

⚙️ Tech Stack

🔧 Stats

E-Commerce Store

E-Commerce Admin

🙌 Contribute

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.