🎄 Secret Santa Project — Study Project Summary
Duration (3 days)
Problem:
ผมกับเพื่อนจับฉลาก Secret Santa ผ่านเว็บเมืองนอก แต่ใช้งานค่อนข้างยาก ต้องใช้ email ซับซ้อน และไม่เหมาะกับกลุ่มเล็กๆ ที่ต้องการความสะดวกสบาย
จึงตัดสินใจลองสร้างเองเป็น study project ประกอบกับสนใจ vibe coding ด้วย
📸 Secret Santa Gallery
🎁 Version 1: Private Group (Fixed 8 People)
Goal: แก้ปัญหาเฉพาะหน้าให้กลุ่มเพื่อน 8 คน
What I Built
- 3-step UX flow: Select person → Drawing process → Reveal result
- Setup Supabase backend (ครั้งแรกที่ใช้ BaaS)
- Deploy ผ่าน Vercel
- Constraint rules เช่น ห้ามพี่น้องจับได้กันเอง
What I Learned
- Requirements gathering
- Supabase: SQLtables, testing
- Vercel deployment: GitHub integration, auto-deployment
- Database design basics: constraints, migrations (เรียนจาก SQL Foundation มาบ้าง)
🌍 Version 2: Public Access (Dynamic Groups)
Goal: ให้ระบบนี้ใช้ได้กับทีมขนาดเล็กและขนาดกลาง กลุ่มเพื่อนที่มีหลายคน ไม่ใช่แค่กลุ่มของผม โดยเพิ่มการป้องกันการจับฉลากซ้ำ
Scope Expansion
| V1 (Private) | V2 (Public) |
| Fixed 8 participants | Dynamic group creation with Bundle Adding |
| Only have 8 participants | Anyone can join via Group Code or Name + They have their own pin code |
| No wishlist | Wishlist + Hobby + Short Message |
| Basic UI | Informed UX when user drawed + participants know who already drawed |
Key Features
- Group Creation Flow — ใส่ชื่อสมาชิกแบบกลุ่มด้วย comma "," ,ตั้งชื่อ, Budget (+/-), โค้ดกลุ่มที่แชร์ได้ 6 หลัก
- Participant Experience — Join ด้วยโค้ด, ใส่ wishlist, ดู preference ของ match
- Real-time Sync — เห็นการอัปเดตพร้อมกันแบบสด ๆ (Supabase Realtime)
- UX Improvement — Santa loading, draw animation, Santa icons สำหรับสถานะการจับฉลาก
- Minimum Secret — participants สามารถตั้ง pin code ของตัวเองเพื่อป้องกันไม่ให้คนอื่นเห็นคนที่ตนจับฉลากได้
- Edge Case Handling — ป้องกันชื่อซ้ำ, กู้ Group ID ด้วยการกรอกชื่อ 2 ชื่อ
Limitation
- Mutual trust is still required at the first drawing.
- Limited 40 participants per group
- No notification and outreach, connectivity via Email, or Instagram
🧠 Technical Decisions
I discussed the basic system design and stack with Claude, and refined the decisions based on my own experience and knowledge.
| Decision | Why |
|---|---|
Next.js + Tailwind | Ideal for rapid prototyping and commonly used in vibe-coding tools like v0 and Lovable. I also used this stack when building the first MVP of Jobcadu. |
Supabase | Discovered through Twitter’s. It provides Realtime, Postgres, and reducing backend complexity. |
Vercel | Free tier, zero-config deployments and GitHub integration. |
Client-side draw logic | We do the draw on the client side to keep the system simple and private, so the server never sees or stores anyone’s match. |
🐞 Challenges & Solutions
1. Frontend-Backend Disconnect
Problem: UI ทำงานดี แต่ database ไม่เก็บข้อมูล → คนจับได้หลายรอบ
Root Cause: Supabase config + RLS policies ไม่ถูก
Solution: เช็ค Supabase logs, fixed policies, เพิ่ม error handling
Learning: ต้องเช็คสิ่งที่เกิดขึ้นบน Database ในกรณีนี้คือบน Supabase, ทำระบบ Test Development
2. Too Many Deployments
Problem: Deploy มากกว่า 10 ครั้งในวันเดียว
Root Cause: ใช้ production เป็น testing environment
Solution: เรียนรู้การ test บน local และ setup environment ตั้ง local dev (npm run dev)
Learning: ในโปรเจคถัดมา ผมจึงเรียนรู้การทำบน Local ไม่ใช่แค่ Claude Code Artifact แล้วดาวน์โหลด
3. Database Migration Chaos
Problem: SQL error เช่น relation already exists, ตารางเก่ากับใหม่ปนกัน
Root Cause: ไม่มี migration versioning
Solution: ล้าง schema แล้วเริ่มใหม่ พร้อมบันทึกการเปลี่ยนแปลง
Learning: Migration ต้องมีเวอร์ชันและระเบียบ
4. Scope & Requirement Creeps
Problem: Scope เปลี่ยนบ่อย เพิ่ม feature เรื่อย ๆ ทำให้ต้องแก้ schema, deploy บ่อย, และปรับ frontend ตาม Root Cause: ไม่มีการเขียน requirement หรือ project structure อย่างละเอียด เนื่องจากความเร็วคือ priority Solution: หยุดแล้วจัดระบบใหม่ เขียน flow คร่าว ๆ, วาง schema ใหม่ให้ scale ได้, และทำ development บน local ก่อน deploy Learning: ถ้าวางแผนดีตั้งแต่ต้น จะลดงานแก้ซ้ำเยอะมาก และช่วยให้โปรเจ็กต์โตขึ้นได้อย่างเป็นระบบ ทำให้ตอนทำเว็บไซต์พอร์ตโฟลิโอนี้ ผมวางแผนมากขึ้น
🧩 Skills Demonstrated
Product
- Requirements gathering
- Scope definition
- User flow & edge case
Development (AI-generated code)
- Next.js, React Hooks, Tailwind
- Supabase: database + realtime
- Vercel deployment
UX
- Information architecture
- Interaction design
- Delight moments & animations
Debugging
- Frontend-backend integration
- Database troubleshooting
- Deployment pipeline fixes
✅ Results
- Working app
- First end-to-end full-stack project (idea → design → build → deploy)
- Learned Supabase + Vercel + modern full-stack workflow
- เข้าใจการทำแอปแบบ end-to-end มากขึ้นกว่าตอนทำที่ Jobcadu