CUGrader

เว็บแอปพลิเคชันบน Next.js App Router จัดโครงสร้างแบบ container folder structure — ทุกหน้าจอประกอบขึ้นจาก container ที่อยู่รวมกันเป็นโฟลเดอร์เดียวจบ

Tech stack

ส่วน	ตัวที่ใช้
Framework	Next.js 16 (App Router, Turbopack)
UI	React 19
Styling	Tailwind CSS v4 (@theme inline + CSS variables)
Component library	shadcn/ui (style base-luma) บน @base-ui/react
Icon	lucide-react
Theme	next-themes (light / dark / system)
Package manager	bun

เริ่มใช้งาน

bun install
bun run dev

เปิด http://localhost:3000

คำสั่งที่มี

คำสั่ง	ทำอะไร
bun run dev	รัน dev server
bun run build	build production
bun run start	รัน production build
bun run typecheck	ตรวจ type ด้วย tsc --noEmit
bun run lint	ตรวจด้วย ESLint
bun run format	จัดรูปแบบโค้ดด้วย Prettier

หมายเหตุ: bun run lint ยังพังจากปัญหาความเข้ากันของ eslint-plugin-react กับ ESLint 10 (เป็นมาก่อนการจัดโครงสร้างนี้) — typecheck และ build ใช้ตรวจงานได้ตามปกติ

โครงสร้างโดยย่อ

src/
├── app/                routing layer — ไม่มี UI logic อยู่ในนี้
│   ├── layout.tsx      root layout: html, ฟอนต์, metadata, providers
│   └── (main)/         route group: layout ที่มี navbar + หน้าในกลุ่ม
├── containers/         หน้าจอและส่วนประกอบใหญ่ แยกเป็นโฟลเดอร์ต่อหนึ่ง container
├── components/
│   ├── providers/      context provider ที่ครอบทั้งเว็บ
│   └── ui/             shadcn primitive
├── config/             ค่าคงที่ระดับเว็บ
├── hooks/              hook ที่ใช้ร่วมกันทั้งโปรเจกต์
├── lib/                utility function
└── types/              type ที่ใช้ร่วมกันทั้งโปรเจกต์

app/ อยู่ใต้ src/ ด้วย เพราะ alias @/* ชี้ไปที่ ./src/* — โค้ดโปรเจกต์ทั้งหมดจึงอยู่รากเดียว

เอกสาร

ไฟล์	เนื้อหา
docs/architecture.md	โครงสร้างโฟลเดอร์ หน้าที่ของแต่ละชั้น และกฎการ import
docs/conventions.md	กติกาการตั้งชื่อ วิธีเพิ่ม container / หน้าใหม่ และมาตรฐานการเขียน UI

เพิ่ม component จาก shadcn

bunx shadcn@latest add <ชื่อ component>

ไฟล์จะถูกวางที่ src/components/ui/ ตาม alias ใน components.json แล้วเรียกใช้ด้วย

import { Button } from "@/components/ui/button"