พัฒนา Full-Stack E-Commerce ด้วย Claude Code (GLM), ORM

curl -fsSL https://claude.ai/install.sh | bash

irm https://claude.ai/install.ps1 | iex

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

# Run Coding Tool Helper directly in your terminal
npx @z_ai/coding-helper

mkdir ecommerce-prisma-app
cd ecommerce-prisma-app
npx create-next-app@15 . --tailwind --app --typescript

npm install typescript tsx @types/node --save-dev

npm install prisma @types/node --save-dev
npm install @prisma/client @prisma/adapter-mariadb dotenv
npm install bcryptjs jose

{
  "env": {
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5-air",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-5-turbo",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-5.1"
  }
}

cd ecommerce-prisma-app
claude

/init

Create an e-commerce application using Next.js 15 with App Router, TypeScript, and Prisma ORM with MySQL.

Before writing any code, read https://www.prisma.io/docs/prisma-orm/quickstart/mysql and follow the Prisma setup instructions exactly as documented (prisma.config.ts, schema.prisma, lib/prisma.ts, generator config, etc.).

We are building the app incrementally. Start with user management first — products and orders will be added later.

Use the /admin path for admin pages and /api/ for API routes.

The frontend and API must be in the same Next.js project using App Router route handlers.

Use this exact project structure:

ecommerce-prisma-app/
├── prisma/
│   └── schema.prisma
├── prisma.config.ts
├── middleware.ts
├── .env.local
├── lib/
│   ├── prisma.ts
│   └── auth.ts
├── seed.ts
└── app/
    ├── layout.tsx
    ├── page.tsx
    ├── api/
    │   ├── auth/
    │   │   └── route.ts
    │   └── customers/
    │       ├── route.ts
    │       └── [id]/
    │           └── route.ts
    └── admin/
        ├── login/
        │   └── page.tsx
        ├── layout.tsx
        ├── page.tsx
        └── customers/
            └── page.tsx

=== DATABASE REQUIREMENTS ===

Database: MySQL (via Prisma ORM)
Database name: ecommerce_prisma

Prisma schema — a single User model with role-based access control (RBAC):

- id — auto-incrementing integer, primary key
- username — unique string, used for login
- password — hashed password string (using bcryptjs)
- name — display name
- email — email address
- role — either `"admin"` or `"customer"`, defaults to `"customer"`
- createdAt — timestamp, auto-generated on creation

=== API REQUIREMENTS ===

Use Next.js App Router route handlers with TypeScript and Prisma Client.

Auth:
- POST /api/auth → login with username and password, return JWT token in a cookie (httpOnly). Only allow users with role "admin" to login.

Customers (full CRUD):
- GET /api/customers → return all customers
- GET /api/customers/[id] → return one customer or 404
- POST /api/customers → create customer
- PUT /api/customers/[id] → update customer
- DELETE /api/customers/[id] → delete customer

API rules:
- use Prisma Client for all database operations
- return JSON only
- use proper status codes: 200, 201, 400, 401, 404, 500
- include error handling
- use NextResponse
- use proper TypeScript types/interfaces
- all /api/* routes (except /api/auth) must verify JWT from httpOnly cookie, return 401 if not authenticated

=== FRONTEND REQUIREMENTS ===

Use Next.js 15 + App Router + TypeScript + Tailwind CSS.

Pages:
- Login (/admin/login — username/password form, redirect to /admin on success)
- Dashboard (/admin — home page with a welcome message)
- Users (/admin/customers — table with user list + form to add)

All /admin/* pages (except /admin/login) must be protected — redirect to /admin/login if not authenticated.

UI requirements:
- responsive table
- simple form to add customer
- loading states
- error messages
- fetch using relative URLs like /api/customers
- clean modern UI
- navigation using Next.js Link
- proper TypeScript interfaces
- **NO dark mode toggle - use light theme only**

=== PRISMA SETUP ===

Create prisma/schema.prisma with:
- generator client using "prisma-client" provider with output "../generated/prisma"
- datasource db with mysql provider
- User model with role-based access control

Create prisma.config.ts:
- import dotenv/config
- use defineConfig from "prisma/config"
- configure datasource url from env("DATABASE_URL")

Create lib/prisma.ts:
- import PrismaMariaDb from @prisma/adapter-mariadb
- import PrismaClient from the generated client path
- pass adapter to PrismaClient constructor
- export singleton prisma instance

Create lib/auth.ts:
- helper functions to verify JWT from cookies using jose
- export function to get the authenticated admin user from the request

Create middleware.ts:
- protect all /admin/* routes except /admin/login
- check for JWT in cookies, redirect to /admin/login if not found

Environment variables:
JWT_SECRET=your-secret-key
DATABASE_URL="mysql://root:@localhost:3307/ecommerce_prisma"
DATABASE_HOST=localhost
DATABASE_PORT=3307
DATABASE_USER=root
DATABASE_PASSWORD=
DATABASE_NAME=ecommerce_prisma

Create seed.ts using Prisma Client to seed:
- 1 admin user (username: admin, password: admin123, role: "admin" — hash with bcryptjs)
- 5 sample users (role: "customer")

Add to package.json: "prisma": { "seed": "npx tsx seed.ts" }

Also configure the seed command in prisma.config.ts under migrations:
migrations: {
  path: "prisma/migrations",
  seed: "npx tsx seed.ts",
}

=== OUTPUT REQUIREMENTS ===

Provide:
1. Complete code for every file in the structure above
2. .env.local template
3. prisma/schema.prisma
4. seed.ts
5. prisma.config.ts
6. lib/prisma.ts
7. Commands to initialize Prisma, run migration, seed data, and run the project
8. Ensure the code is build-ready and TypeScript-safe

npx prisma generate

npx prisma migrate dev --name create_user

npx prisma db seed

npm run dev

claude

Add Products and Orders to the existing e-commerce application. The User model and customer API already exist and work.

Before writing any code, look at the existing API implementation in app/api/customers/[id]/route.ts to follow the same patterns and coding style.

=== UPDATE PRISMA SCHEMA ===

Add these models to prisma/schema.prisma:

- Product (id, name, price Decimal, stock Int, createdAt)
- Order (id, total Decimal, status String, createdAt, relation to User as customer, relation to OrderItem[])
- OrderItem (id, quantity Int, price Decimal, relation to Order, relation to Product)

Keep the existing User model unchanged.

=== NEW API ROUTES ===

Add to app/api/:

Products (full CRUD):
- GET /api/products → return all products
- GET /api/products/[id] → return one product or 404
- POST /api/products → create product
- PUT /api/products/[id] → update product
- DELETE /api/products/[id] → delete product

Orders (full CRUD):
- GET /api/orders → return all orders with customer and items
- GET /api/orders/[id] → return one order with items and customer or 404
- POST /api/orders → create order
- PUT /api/orders/[id] → update order
- DELETE /api/orders/[id] → delete order

POST /api/orders must:
- use Prisma transactions (prisma.$transaction)
- validate product stock before creating the order
- decrease stock after order creation
- rollback on any error

=== NEW FRONTEND PAGES ===

Add to app/admin/:

- products/page.tsx — table with product list, form to add, edit and delete buttons
- orders/page.tsx — table with order list, form to create new order
  - allow selecting customer from dropdown
  - allow selecting products and quantity
  - calculate order total
  - submit order to /api/orders

Update app/admin/layout.tsx navigation to include Products and Orders links.

=== UPDATE SEED ===

Update seed.ts to also seed 5 products and 3 orders with items (using existing customers).

=== API RULES ===

Same as existing: Prisma Client, JSON only, proper status codes, error handling, NextResponse, TypeScript types.

=== OUTPUT REQUIREMENTS ===

1. Complete code for all new and modified files
2. Updated prisma/schema.prisma
3. Updated seed.ts
4. Commands to run migration and re-seed
5. Ensure the code is build-ready and TypeScript-safe

npx prisma generate

npx prisma migrate dev --name add_products_orders

npx prisma db seed

npm run dev

claude

Add a customer storefront with shopping cart to the existing e-commerce application. The admin panel with Users, Products, and Orders already exists and works.

=== NEW PRISMA MODEL ===

Add a CartItem model to prisma/schema.prisma:

- CartItem (id, quantity Int, relation to User as customer, relation to Product, createdAt)

A CartItem represents a product added to a customer's cart. When the customer checks out, the cart items become order items and the cart is cleared.

=== NEW PAGES ===

Add to app/ (public pages, no auth required for browsing):

- page.tsx — homepage/landing page with a welcome message and link to /products
- products/page.tsx — browse all products with name, price, stock, and "Add to Cart" button
- products/[id]/page.tsx — product detail page with "Add to Cart" button
- cart/page.tsx — shopping cart page showing all cart items, quantity controls, total price, and "Checkout" button
- orders/page.tsx — customer's order history (requires login)

=== NEW API ROUTES ===

Add to app/api/:

Auth:
- POST /api/auth/register → register a new customer user (role: "customer"), return JWT token in a cookie (httpOnly)
- POST /api/auth/login → login for customer users (role: "customer"), return JWT token in a cookie (httpOnly)

Store:
- GET /api/store/products → return all products (public, no auth required)

Cart (requires auth):
- GET /api/cart → return all cart items for the logged-in customer
- POST /api/cart → add a product to the cart (body: { productId, quantity })
- PUT /api/cart/[id] → update cart item quantity
- DELETE /api/cart/[id] → remove item from cart
- DELETE /api/cart → clear the entire cart

Checkout:
- POST /api/store/checkout → create an order from cart items
  - verify JWT from httpOnly cookie to get the customer user id
  - read all cart items for the customer
  - validate product stock for each item
  - use Prisma transactions (prisma.$transaction) to:
    - create the Order record
    - create OrderItem records from cart items
    - decrease product stock
    - delete all cart items for the customer
  - rollback on any error

=== MIGRATION ===

After adding the CartItem model, run: npx prisma migrate dev --name add_cart

=== CUSTOMER AUTH ===

Create middleware to protect /cart and /orders pages:
- if not authenticated, redirect to /products

The existing middleware for /admin/* routes should remain unchanged.

=== FRONTEND REQUIREMENTS ===

- Add navigation to app/layout.tsx with links: Home, Products, Cart (with item count badge), Orders, Login/Register
- Products page shows a grid/list of products with name, price, stock status, and "Add to Cart" button
- Product detail page shows full info and "Add to Cart" button
- Cart page shows:
  - list of items with product name, price, quantity, subtotal
  - +/- buttons to adjust quantity
  - remove button for each item
  - total price at the bottom
  - "Checkout" button to place the order
- After checkout, redirect to /orders with a success message
- Orders page shows the logged-in customer's order history
- Login and Register forms for customer users
- After login, redirect to /products
- clean modern UI, responsive, **NO dark mode toggle - use light theme only**

=== API RULES ===

Same as existing: Prisma Client, JSON only, proper status codes, error handling, NextResponse, TypeScript types.

=== OUTPUT REQUIREMENTS ===

1. Complete code for all new and modified files
2. Updated prisma/schema.prisma with CartItem model
3. Commands to run migration
4. Ensure the code is build-ready and TypeScript-safe

npx prisma generate

npx prisma migrate dev --name add_cart

npm run dev