Todo Dashboard

เว็บแอปจัดการงานแบบ full-stack ประกอบด้วย frontend ที่เขียนด้วย Nuxt และ backend API ที่เขียนด้วย NestJS พร้อม Prisma สำหรับเชื่อมต่อ MongoDB

Tech Stack

• Frontend: Nuxt 4, Vue 3, Nuxt UI, Tailwind CSS
• Backend: NestJS, Prisma, MongoDB
• Auth: JWT
• Package manager: pnpm

Project Structure

todo-dashboard/
├── frontend/   # Nuxt application
└── backend/    # NestJS API + Prisma schema

Requirements

• Node.js
• pnpm
• MongoDB connection string

Environment Variables

สร้างไฟล์ .env ในแต่ละโฟลเดอร์ก่อนรันโปรเจกต์ โดย copy จากไฟล์ตัวอย่าง:

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env

Backend

ไฟล์ backend/.env

DATABASE_URL="mongodb+srv://..."
JWT_SECRET="your-secret"
FRONTEND_URL="http://localhost:3000"
PORT=3001

• DATABASE_URL: เอามาจาก MongoDB Atlas ในเมนู Database > Connect > Drivers
• JWT_SECRET: สร้างเองเป็นข้อความสุ่มยาว ๆ สำหรับเซ็น token
• FRONTEND_URL: URL ของ Nuxt frontend สำหรับ CORS
• PORT: port ที่ backend จะรัน ค่า default คือ 3001

Frontend

ไฟล์ frontend/.env

NUXT_PUBLIC_API_BASE="http://localhost:3001"

• NUXT_PUBLIC_API_BASE: URL ของ backend API ที่ frontend จะเรียกใช้

Installation

ติดตั้ง dependencies แยกตามแต่ละส่วน

cd backend
pnpm install

cd frontend
pnpm install

Development

เปิด backend API

cd backend
pnpm run start:dev

ค่าเริ่มต้น backend จะรันที่ http://localhost:3001

เปิด frontend

cd frontend
pnpm dev

ค่าเริ่มต้น frontend จะรันที่ http://localhost:3000

Prisma

โปรเจกต์ใช้ Prisma กับ MongoDB โดย schema อยู่ที่ backend/prisma/schema.prisma

หลังแก้ schema หรือเมื่อต้องการสร้าง Prisma Client ใหม่ ให้รัน:

cd backend
pnpm prisma generate

Scripts

Backend

pnpm run start:dev   # run API in watch mode
pnpm run build       # build NestJS app
pnpm run test        # run unit tests
pnpm run test:e2e    # run e2e tests
pnpm run lint        # run ESLint

Frontend

pnpm dev       # run Nuxt dev server
pnpm build     # build production app
pnpm preview   # preview production build
pnpm generate  # generate static output

Main Features

• Register and login
• JWT protected API routes
• User profile
• Create, update, delete, and change status of tasks
• Task priority and due date/time fields

Build

Build backend:

cd backend
pnpm run build

Build frontend:

cd frontend
pnpm build