University Study Room Booking

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

https://room-booking-university.vercel.app # University Study Room Booking ระบบจองห้องอ่านหนังสือสำหรับมหาวิทยาลัย สร้างด้วย Next.js App Router, TypeScript, Tailwind CSS และ Supabase ผู้ใช้สมัคร/เข้าสู่ระบบ ดูรอบที่ไม่ว่าง และจัดการเฉพาะการจองของตนเองได้ ## Stack - Next.js 16 App Router และ React 19 - TypeScript แบบ strict - Tailwind CSS 4 แบบ CSS-first - Supabase Auth, PostgreSQL และ Row Level Security - Server Components สำหรับอ่านข้อมูล และ Server Actions สำหรับเปลี่ยนข้อมูล ## เริ่มต้นในเครื่อง ต้องใช้ Node.js 24 และ npm จากนั้นติดตั้ง dependency จาก lockfile: ```bash npm ci cp .env.example .env.local ``` ใส่ค่าจาก Supabase Connect dialog ใน `.env.local`: ```dotenv NEXT_PUBLIC_SUPABASE_URL= NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY= ``` ใช้เฉพาะ publishable key ในแอป ห้ามใส่ secret หรือ privileged database key ใน repository และ browser ## ตั้งค่า Supabase นำ SQL จาก `supabase/schema.sql` ไปใช้กับ Supabase project หนึ่งครั้ง SQL นี้จะ: - สร้าง `rooms` และ `bookings` - seed ห้องขั้นต่ำ 4 ห้อง - จำกัดรอบเวลาและความยาววัตถุประสงค์ด้วย `CHECK` - ป้องกันห้อง/วันที่/รอบซ้ำด้วย `UNIQUE` - เปิด RLS และให้ผู้ใช้เห็น/แก้/ลบเฉพาะ booking ของตน - สร้าง RPC สำหรับเปิดเผยเพียงห้อง วันที่ และรอบที่ไม่ว่าง เปิด Email/Password provider ใน Supabase Authentication ก่อนทดสอบ signup/login หากใช้ email confirmation ให้เพิ่ม redirect URL ของ localhost และ Vercel ใน Auth URL Configuration ## คำสั่ง ```bash npm run dev npm run typecheck npm run lint npm run build npm run start ``` การพิสูจน์ RLS ด้วยผู้ใช้สองบัญชี: ```bash # ตร

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