English Version | 中文版本

A modern full-stack demo showcase built with Next.js 16, featuring an admin dashboard, AI chat, task management, and analytics.

Live Demo: https://demo.daolanx.com/

• Next.js 16.1.1 (App Router) - Server components, React Compiler
• React 19.2.3 - Latest React with hooks
• TypeScript - Strict mode, bundler module resolution

• Tailwind CSS v4 - CSS-based config (no tailwind.config.ts)
• shadcn/ui - 40+ accessible UI components
• Radix UI - Headless primitives
• Lucide React / Tabler Icons - Icon libraries

• PostgreSQL (Neon Serverless) - Relational database
• Drizzle ORM - Type-safe SQL ORM
• Drizzle Kit - Migrations & tooling

• Better Auth - Modern auth with admin plugin
• OAuth - GitHub & Google providers
• Creem.io - Subscription billing (Hobby/Pro/Studio)

• Vercel AI SDK - AI model integration
• OpenRouter - Multi-model provider
• Streaming Responses - Real-time AI chat

• SWR - Client-side data fetching & caching
• Zustand - Global client state
• Zod - Schema validation (前后端统一)

• next-intl - i18n for Next.js
• Multi-language - English & Chinese support

• Vitest - Unit & component testing
• Playwright - E2E testing
• Biome - Linting & formatting
• Husky - Git hooks with lint-staged

git clone https://github.com/daolanx/work.git
cd work
pnpm install

Create .env.local:

DATABASE_URL=postgresql://user:password@localhost:5432/dbname
BETTER_AUTH_SECRET=your-secret-key
BETTER_AUTH_URL=http://localhost:3000
OPENROUTER_API_KEY=your-openrouter-key

pnpm db:gen    # Generate migrations
pnpm db:mi     # Run migrations

pnpm dev       # Start dev server (http://localhost:3000)

app/                          # Routes (page-level)
├── api/                      # API endpoints
├── auth/                     # Login, register, reset-password
├── console/                  # Dashboard, tasks, admin, billing, profile
├── ai-chat/                  # AI chat interface
├── landing/                  # Marketing page
└── flower-shop/              # E-commerce demo

features/                     # Business logic modules
├── console/                  #   auth, dashboard, payments, task, user
├── ai-chat/                  #   chat service, hooks, components
├── landing/                  #   page sections
└── flower-shop/              #   page sections

components/                   # Shared UI (shadcn/ui + custom)
db/                           # Schema definitions (Drizzle)
lib/                          # Shared utilities

• Summary Cards - MRR, Retention, Conversion, MAU (Server Component)
• Visitor Analytics - Interactive charts with Recharts
• User Management - Ban/Unban, role switching (admin only)
• Task Management - Full CRUD with pagination, filtering, sorting

• Streaming Responses - Real-time conversation via OpenRouter
• Message History - Persistent sessions
• Multiple Models - Switch between AI models

• Login/Register - Email/password auth
• OAuth - GitHub & Google providers
• Password Reset - Email-based flow via Resend
• Session Tracking - IP and device info

• Subscription Tiers - Hobby / Pro / Studio
• Checkout Flow - Creem.io integration
• Billing Management - Customer portal

Each feature module (features/console/task/, etc.) contains:

• service.ts - Server Actions for mutations
• hooks/ - SWR hooks for client data fetching
• components/ - Feature-specific UI components
• schemas.ts - Zod validation schemas
• constants.ts - Enum mappings and config

• Reads: Client Component → SWR Hook → API Route → Service → DB
• Writes: Client Component → SWR Mutation → Server Action → DB → revalidatePath

• api-handler.ts wraps all API routes with withErrorHandler
• authApi injects session validation for protected routes
• Custom ValidationError for business logic errors

pnpm dev          # Start dev server
pnpm build        # Production build
pnpm start        # Start production server
pnpm type-check   # TypeScript check

pnpm lint         # Run Biome check
pnpm format       # Format with Biome
pnpm lint:fix     # Fix lint issues

pnpm test         # All tests (vitest + playwright)
pnpm test:unit    # Unit tests only
pnpm test:e2e     # E2E tests only
pnpm test:api     # API tests
pnpm test:ui      # Component tests

pnpm db:gen       # Generate migrations
pnpm db:mi        # Run migrations
pnpm db:push      # Push schema to DB
pnpm db:studio    # Open Drizzle Studio

# Database (required)
DATABASE_URL=postgresql://...

# Auth (required)
BETTER_AUTH_SECRET=your-secret
BETTER_AUTH_URL=https://your-app.com

# AI (required for chat)
OPENROUTER_API_KEY=your-key
OPENROUTER_MODEL=anthropic/claude-3-5-sonnet

# Email (optional)
RESEND_API_KEY=your-key
RESEND_FROM_EMAIL=noreply@yourdomain.com

# Storage (optional, for avatar upload)
R2_ACCOUNT_ID=your-cloudflare-account-id
R2_ACCESS_KEY_ID=your-r2-access-key
R2_SECRET_ACCESS_KEY=your-r2-secret-key
R2_BUCKET_NAME=your-bucket-name
R2_PUBLIC_URL=https://your-bucket.r2.dev

• shadcn/ui - UI components
• Vercel AI SDK - AI integration
• Better Auth - Authentication
• Drizzle ORM - Database ORM
• Next.js - Framework
• Tailwind CSS - Styling
• Shreyas-29/linkify - Used for Landing Page

Built with Next.js 16, React 19, and modern web technologies