รวมผลงานการออกแบบและพัฒนาโปรเจกต์

เกี่ยวกับโปรเจกต์ (Project Overview)

Quiz Realm คือแพลตฟอร์มการเรียนรู้รูปแบบเกม (Gamified E-Learning) ที่นำระบบเกมมาเพิ่มความสนุกและแรงจูงใจในการศึกษา โดยผมได้รับหน้าที่ออกแบบและพัฒนาส่วนหน้าบ้านสำหรับระบบควบคุมส่วนกลาง (Admin Dashboard Interface) เพื่อให้ผู้ดูแลระบบสามารถจัดการข้อมูลแบบทดสอบ สถิติผู้เรียน ดันเจี้ยน และระบบไอเทมได้อย่างมีประสิทธิภาพ

สิ่งที่ผมทำในโปรเจกต์นี้ (Key Contributions)

• พัฒนาหน้า Admin Dashboard สำหรับจัดการเนื้อหา แบบทดสอบ (Quiz Data), ข้อมูลผู้ใช้งาน, รางวัล และระบบอัปเกรดสกิลตัวละครทั้งหมด
• ประยุกต์และพัฒนากลไก Gamification ด้วยระบบต่อสู้ดันเจี้ยน (Dungeon Battles) ระบบสะสมแต้ม และการปลดล็อกสกิลเพื่อกระตุ้นความต่อเนื่องในการเรียนรู้
• สร้างระบบ AI Quiz Generator ร่วมกับ Google Gemini API เพื่อช่วยสร้างแบบทดสอบอัตโนมัติตามหัวข้อและระดับความยาก
• ออกแบบและวางโครงสร้างการทำงานแบบ Back-office Workflows ที่รวมศูนย์ เชื่อมต่อฐานข้อมูล Supabase แบบ Real-time

เกี่ยวกับโปรเจกต์ (Project Overview)

Habit Battle เป็นแอปพลิเคชันบนมือถือที่ออกแบบมาเพื่อช่วยสร้างวินัยและนิสัยที่ดีในชีวิตประจำวัน โดยเปลี่ยนการบันทึกภารกิจให้เป็นเหมือนการเก็บเลเวลในเกม RPG มีระบบจัดอันดับแข่งขันและเก็บบันทึกสถิติความต่อเนื่อง (Streak) ของผู้ใช้แบบเรียลไทม์

สิ่งที่ผมทำในโปรเจกต์นี้ (Key Contributions)

• ออกแบบ UI/UX สไตล์ดาร์กโหมดใน Figma และพัฒนาส่วนหน้าบ้านของ Mobile Application ด้วย React Native (Expo Router)
• สร้างหน้า Leaderboard แบบ Dynamic Ranking 2 แถบ (แท็บคะแนนรวม Score และแท็บความต่อเนื่อง Streak) เชื่อมต่อฐานข้อมูล Supabase แบบ Real-time
• สร้างระบบการ์ดสถิติส่วนบุคคล (Personal StatCards) แสดงค่าเฉลี่ยรายวัน อัตราความสำเร็จ และประวัติการใช้งาน
• พัฒนา Reusable UI Components เช่น การ์ดสถิติ (StatCard), อวตารผู้ใช้ (User Avatars) และไดอะล็อกแก้ไขบัญชีผู้ใช้ (Account Modal Dialog)

เกี่ยวกับโปรเจกต์ (Project Overview)

โปรเจกต์จำลองและผสานการออกแบบ (UI/UX) ระหว่าง Epic Games Store ที่มีความเรียบหรู ดาร์กโทนมินิมอล เข้ากับระบบสืบค้นและโครงสร้างข้อมูลเกมของ Steam เพื่อสร้างหน้าร้านค้าเกมออนไลน์ที่มีความทันสมัยและรองรับการใช้งานบนทุกอุปกรณ์

สิ่งที่ผมทำในโปรเจกต์นี้ (Key Contributions)

• จำลองและผสานคอมโพเนนต์ UI ของทั้ง Epic Games Store และ Steam เข้าด้วยกันเป็นสถาปัตยกรรมหน้าบ้านอันเป็นเอกลักษณ์
• ออกแบบและพัฒนา Responsive Web Design ด้วย CSS Flexbox, Grid และ Media Queries ปรับการแสดงผลอัตโนมัติทั้งจอมือถือและเดสก์ท็อป
• พัฒนาระบบ Touch Gestures (Touch-Swipe) บนมือถือ ด้วย Vanilla JavaScript ทำให้ผู้ใช้สามารถปัดเลื่อนการ์ดเกมและแบนเนอร์ได้อย่างลื่นไหล
• เน้นการเขียนโครงสร้าง Front-End ที่สะอาด แม่นยำเรื่อง Layout Alignment และไม่พึ่งพาไลบรารีภายนอกขนาดใหญ่ (Zero-dependency)