Next.js EC Clothes Store

---

Project Summary

This is a practice e-commerce (EC) clothes store built with Next.js 15, React 19, TypeScript, Prisma ORM, PostgreSQL, Stripe, NextAuth, and more. It demonstrates a modern full-stack web application with authentication, payment integration, admin/user dashboards, and a clean UI using ShadCN and TailwindCSS.

---

Main Technologies Used

• Frontend: Next.js, React, TypeScript, TailwindCSS, ShadCN UI, SASS
• Backend: Next.js API routes, Prisma ORM, PostgreSQL (Neon), NextAuth
• Payment: Stripe, PayPal
• Testing: Jest, React Testing Library
• Other: Zod, ESLint, React Hook Form, UploadThing, Resend (email)

---

Required Environment Variables

Variable Name	Description	Example/Default Value
NEXT_PUBLIC_APP_NAME	App name (metadata)	EC Clothes Store
NEXT_PUBLIC_APP_DESCRIPTION	App description (metadata)	EC with NextAuth, Stripe and Prisma
NEXT_PUBLIC_SERVER_URL	Server URL	http://localhost:3000/
DATABASE_URL	PostgreSQL connection string	postgres://...
AUTH_SECRET	NextAuth secret	...
PAYMENT_METHODS	Supported payment methods	PayPal, Stripe, CashOnDelivery
DEFAULT_PAYMENT_METHOD	Default payment method	PayPal
PAYPAL_API_URL	PayPal API URL	https://api.sandbox.paypal.com
PAYPAL_CLIENT_ID	PayPal client ID	...
PAYPAL_APP_SECRET	PayPal app secret	...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY	Stripe publishable key	...
STRIPE_SECRET_KEY	Stripe secret key	...
STRIPE_WEBHOOK_SECRET	Stripe webhook secret	...
UPLOADTHING_TOKEN	UploadThing API token	...
UPLOADTHING_SECRET	UploadThing secret	...
UPLOADTHING_APPID	UploadThing app ID	...
RESEND_API_KEY	Resend email API key	...
SENDER_EMAIL	Sender email for Resend	onboarding@resend.dev
PAGE_SIZE	User order page size	10
USER_ROLES	User roles	admin,user

Note: See .env for all variables. Do not commit secrets to version control.

---

Command List

Script/Command	Description
npm install	Install dependencies
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run test	Run tests with Jest
npx prisma migrate	Run database migrations
npx prisma generate	Generate Prisma client
npx prisma studio	Open Prisma Studio (DB GUI)

---

Directory Structure

├── app/
│   ├── api/
│   ├── admin/
│   ├── user/
│   ├── unauthorized/
│   ├── (auth)/
│   ├── (root)/
│   └── ...
├── components/
│   ├── admin/
│   ├── shared/
│   │   ├── product/
│   │   └── header/
│   └── ui/
├── db/
├── email/
├── generated/
│   └── prisma/
├── lib/
│   ├── actions/
│   └── constants/
├── prisma/
│   └── migrations/
├── public/
│   └── images/
│       └── sample-products/
├── tests/
├── types/
├── .env
├── package.json
├── tsconfig.json
└── ...

---

Development Environment Setup

1. Clone the repository

   git clone <REPO_URL>
   cd next_ec_atuh_stripe_prisma

2. Install dependencies

   npm install
   # or: pnpm install / yarn install

3. Set up environment variables
   • Copy .env or .env.example and fill in required values.
4. Run database migrations

   npx prisma migrate dev
   npx prisma generate

5. Start the development server

   npm run dev

6. (Optional) Run tests

   npm run test

---

Troubleshooting

Issue	Solution
.env: no such file or directory	Create a .env file using the table above as reference.
docker daemon is not running	Start Docker Desktop if using Docker-based workflows.
Ports are not available	Check for port conflicts; stop other services using the port.
Module not found	Run npm install and npm run build to update dependencies.
Database connection errors	Check your DATABASE_URL and network/firewall settings.
Stripe/PayPal API errors	Verify your API keys and webhook secrets.

---

References

• Qiita: イケてるREADMEを作成しよう
• Next.js Documentation
• Prisma Documentation
• Stripe Docs
• ShadCN UI

---

Author

Masaknd @Masaknd_dsgn