ผมลองเปลี่ยนเวลา 24 ชม. ให้เป็น “แต้ม” ที่ต้องจ่าย!
เคยสงสัยไหมครับว่า… ทำไมเวลาเราเล่นเกม เราถึงตั้งใจปั้นตัวละครให้เก่งที่สุด แต่ในชีวิตจริงเรากลับปล่อยให้เวลาผ่านไปเฉยๆ?
ผมดองไอเดียทำแอป Habit Tracking ไว้ใน To-do list มานานมาก จนกระทั่งปิ๊ง Concept หนึ่งขึ้นมา: “คนเรามีเวลา 24 ชั่วโมงเท่ากัน และมันคือ Status Point ที่เราต้องเลือกว่าจะจ่ายไปกับอะไร”
วันนี้ผมเลยทำมันออกมาเป็นรูปเป็นร่างแล้วในชื่อโปรเจกต์ “Status Leveling” ครับ
💡 Concept: เมื่อชีวิตจริงคือการบริหาร Status Point
ไอเดียหลักของแอปนี้คือการมองตัวเองเป็นตัวละครในเกม RPG:
- Time as Currency: ทุกนาทีที่เราใช้ไปคือการ “จ่าย” แต้มเพื่อแลกกับความเก่ง
- Game Logic: ใน The Sims เราไม่ปล่อยตัวละครนั่งเฉยจนค่าพลังลด หรือใน Harvest Moon เราขยันปลูกผักเพื่อให้ฟาร์มโต แล้วทำไมในชีวิตจริงเราถึงไม่ทำแบบนั้น?
- Visualizing Progress: ถ้าเราสามารถ Track Status ได้เหมือนในเกม เลือกได้ว่าจะเอา Status Point ไปลงกับค่าอะไรบ้าง (Physical, Reading, Technical) มันคงจะช่วยให้เรามีวินัยขึ้นเยอะ
Phase แรก: เน้นการบันทึกที่ง่ายและรวดเร็วก่อน เพื่อสร้าง Habit ในการใช้งานเอง
Phase ต่อไป: จะเริ่มใส่ระบบการอัปเลเวลและ Skill Tree ให้สนุกเหมือนเกมจริงๆ มากขึ้นครับ
🛠️ Tech Stack: Zero Cost Architecture
ในฐานะ Cloud Engineer ผมตั้งโจทย์ว่าระบบนี้ต้อง “High Performance แต่ Zero Cost” โดยผมเลือกใช้ Stack ที่รันบน Cloudflare แบบ 100% (No servers to manage) ดังนี้ครับ:
🎨 Frontend & UI
- Next.js 15 (App Router): Full-stack framework ที่จัดการทั้ง UI และ API ในที่เดียว
- Tailwind CSS + shadcn/ui: ปรับแต่ง Theme เป็นสไตล์ Dark RPG พร้อมใส่ Custom Animation (XP bar glow, Level-up flash)
- TanStack Query v5: หัวใจสำคัญที่ทำให้ XP Bar อัปเดตแบบทันที (Optimistic Updates) โดยไม่ต้องรอ Network response
- Recharts: แสดงกราฟสถิติรายสัปดาห์ (เลือกตัวนี้เพราะเบาและรันบน Edge ได้ดี)
⚙️ Backend & Infrastructure
- Cloudflare Workers: รัน API แบบ Serverless กระจายอยู่ 300+ Edge locations ทั่วโลก ทำให้แอปโหลดเร็วมาก
- Supabase (PostgreSQL): จัดการฐานข้อมูลและ User Session พร้อมระบบ Row Level Security (RLS) เพื่อความปลอดภัยของข้อมูล
- Supabase Magic Link: ระบบ Passwordless Auth ล็อกอินผ่านอีเมลได้ทันที สะดวกสำหรับการใช้งานบนมือถือทุกวัน
- Cloudflare Pages & DNS: จัดการ Deployment และผูกโดเมนไว้ที่ lvl.monstack.dev
💰 Cost Summary
| Service | Plan | Cost |
|---|---|---|
| Cloudflare Workers | Free | $0 |
| Supabase | Free | $0 |
| Cloudflare DNS | Free | $0 |
| Total | $0/month |
🚀 ลองเล่นหรือเอาไปโมต่อ
ใครที่อยากลองเปลี่ยนชีวิตให้เป็นเกม หรือเป็นสาย Dev ที่อยากดูแนวทางการวาง Stack บน Cloudflare เข้าไปดูได้ที่นี่เลยครับ:
- Website: lvl.monstack.dev
- GitHub Repo: https://github.com/monstack/status-leveling
มาดูกันครับว่าปีนี้ผมจะสามารถ “บังคับ” ตัวเองให้อัพเวลได้ขนาดไหน! 555+
MonStack 