Task List App

เจ้าของผลงานเล่าไว้แบบนี้

https://task-list-five-murex.vercel.app # Task List App แอปจัดการรายการงาน สร้างด้วย Next.js 16, Tailwind CSS v4, Clerk (ระบบ auth) และ Drizzle ORM (Neon PostgreSQL) ## วิธีรันโปรเจกต์ 1. Clone repo 2. สร้างไฟล์ `.env.local` แล้วใส่ค่าตาม `example.env` 3. รัน `npm install && npm run dev` --- ## Assignment 3 — Auth & Database ### ระบบ Auth ที่เลือกใช้ - **Clerk** — ติดตั้งง่าย มี UI สำเร็จรูป (ไม่ต้องทำหน้า Login เอง) รองรับ Next.js App Router เหมาะสำหรับผู้เริ่มต้น ### ส่วนที่ Protected vs. Public - **Protected:** GET/POST/PATCH/PUT/DELETE `/api/tasks` — ต้อง Login ถึงจะใช้ได้ - **Public:** หน้า Home เปิดดูได้โดยไม่ต้อง Login (แต่ไม่แสดง task) ### ข้อมูลแยกตาม User แต่ละ user เห็นแค่ task ของตัวเอง โดยเก็บ `userId` จาก Clerk ไว้ในทุก task · Admin เห็นทุก task ### Migration & Seed ใช้ **Drizzle Kit** สำหรับ migration และ **tsx** สำหรับรัน seed/rollback script ```bash # สร้างและรัน migration npx drizzle-kit generate npx drizzle-kit migrate # ถ้า migrate ไม่ apply ให้ใช้: npx drizzle-kit push # Seed ข้อมูลตัวอย่าง npx tsx src/lib/seed.ts # Rollback (ลบ column user_id และ role) npx tsx src/lib/rollback.ts ``` --- ## Assignment 4 — UX/UI Polish ### Design Tokens สี, มุมโค้ง และเงา ทั้งหมดถูกนิยามเป็น CSS variable ไว้ใน `src/app/globals.css` แล้ว map เข้า Tailwind utility ผ่าน `@theme inline` — แก้ที่เดียวเปลี่ยนทั้งแอป #### ชุดสี (Color Palette) | Token | Light | Dark | ใช้กับ | |-------|-------|------|--------| | `--background` | `#ffffff` | `#0b0d12` | พื้นหลังหน้า | | `--surface` | `#ffffff` | `#141

โดย KeeratikhachonSuanchan · ดูโพสต์ต้นทาง