プロジェクト
Drive@KMITL
Product Summary
เว็บไซต์แชทสำหรับพูดคุยกับคนแปลกหน้าแบบสุ่ม โดยเปลี่ยนบรรยากาศตามสถานที่ต่าง ๆ ในมหาวิทยาลัย เสมือนกำลังเดินทางด้วยพาหนะ แบ่งผู้ใช้เป็น Driver และ Passenger มีระบบสร้างห้อง สุ่มเข้าห้อง จำกัดจำนวนคนตามประเภทรถ countdown ก่อนย้ายห้อง พื้นหลังวิดีโอแต่ละสถานที่ และบรรยากาศที่เปลี่ยนไปตาม room type
The Problem
ผู้ใช้หลายคนอยากมีพื้นที่ปลอดภัยสำหรับคุยกับคนไม่รู้จักโดยไม่ถูกตัดสิน แต่แพลตฟอร์มทั่วไปไม่ได้ออกแบบประสบการณ์ random chat แบบมีธีมและ room transition ชัดเจน
The Process
ออกแบบ flow หน้าหลัก, join room, create room และ chat room ใน Figma → พัฒนา backend API และ WebSocket communication ระหว่าง frontend กับ backend → สร้างระบบ create room, random join, role-based access และ room type restrictions → ปรับปรุง room status, user count, room transitions และหน้าเว็บให้สมบูรณ์ขึ้น
Phase 1: UI/UX Flow Design
ออกแบบ flow ใน Figma ครอบคลุมหน้าหลัก, การตั้ง username, เลือก role, join/create room และ chat room interface
Phase 2: FastAPI Backend & WebSocket
พัฒนา backend API ด้วย FastAPI และระบบ real-time communication ผ่าน WebSocket เชื่อมระหว่าง Next.js frontend กับ Python backend
Phase 3: Analysis & Conceptual Design
สร้างระบบ create room, random join, role-based access (Driver/Passenger) และ room type restrictions พร้อม capacity control ตามประเภทพาหนะ
Phase 4: Detailed Design & Prototype
เพิ่ม live room status, user count tracking, countdown timer, auto remove empty rooms และ location-based video backgrounds
The Challenge
ผู้ใช้หลายคนอยากมีพื้นที่ปลอดภัยสำหรับคุยกับคนไม่รู้จักโดยไม่ถูกตัดสิน แต่แพลตฟอร์มทั่วไปไม่ได้ออกแบบประสบการณ์ random chat แบบมีธีมและ room transition ชัดเจน
Core Features
Username Setup
ตั้งชื่อก่อนเข้าห้อง
Driver / Passenger
เลือก role ก่อน join
Random Join
สุ่มเข้าห้องที่มีอยู่
Create Room
สร้างห้องพร้อมเลือกประเภท
Room Capacity Control
จำกัดคนตาม room type
Countdown to Next Room
นับเวลาก่อนย้ายห้อง
Live Room Status
แสดงจำนวนคนแบบ real-time
Video Backgrounds
พื้นหลังตามสถานที่ใน KMITL
Room Types
Bicycle
Intimate2คนTaxi
Small Group4คนSongthaew
Medium10คนEV / Minibus
Large15คนArchitecture & Development
Phase 1: UI/UX Flow Design
ออกแบบ flow ใน Figma ครอบคลุมหน้าหลัก, การตั้ง username, เลือก role, join/create room และ chat room interface
Phase 2: FastAPI Backend & WebSocket
พัฒนา backend API ด้วย FastAPI และระบบ real-time communication ผ่าน WebSocket เชื่อมระหว่าง Next.js frontend กับ Python backend
Phase 3: Room System & Role Logic
สร้างระบบ create room, random join, role-based access (Driver/Passenger) และ room type restrictions พร้อม capacity control ตามประเภทพาหนะ
Phase 4: Room Status, Transitions & Polish
เพิ่ม live room status, user count tracking, countdown timer, auto remove empty rooms และ location-based video backgrounds
Challenges & Limitations
✓ What Worked
- →Real-time WebSocket room join/leave ทำงานได้เสถียร
- →Role-based access (Driver/Passenger) แยกชัดเจน
- →Auto remove empty rooms ทำงานถูกต้อง
- →Video backgrounds และ UI ธีมสมบูรณ์
- →Room type capacity control ทำงานได้จริง
✗ What Didn't / Limitations
- →Room transition อัตโนมัติโดยไม่หลุด connection ยังเป็นความท้าทาย
- →เกมย่อยในแต่ละห้องยังไม่สมบูรณ์
- →การย้อนกลับห้องเก่ายังมีข้อจำกัด
- →Room history ยังจำกัด ไม่บันทึกประวัติการสนทนา
- →CORS และ WebSocket reconnection ต้องแก้เพิ่มเติม
Final Outcome
The Solution: แพลตฟอร์ม random chat ที่ผสมแนวคิด journey experience เข้ากับ real-time web app ทำให้การคุยกับคนแปลกหน้ามีทั้งบริบทและความแปลกใหม่ Impact: ได้ฝึก full-stack collaboration, real-time system design, และการแก้ปัญหา WebSocket / CORS / room transition ในโปรเจกต์จริง Limitations: เกมย่อยในแต่ละห้องยังไม่สมบูรณ์ และจำนวนห้อง/การย้อนกลับห้องเก่ายังมีข้อจำกัดจากระบบย้ายห้อง Challenges: ทำระบบ real-time communication ให้เปลี่ยนห้องอัตโนมัติได้โดยไม่หลุด connection, เชื่อม Backend กับ Frontend ให้เสถียร, และจัดการ room lifecycle เมื่อมีผู้ใช้เข้าออกหลายบทบาท
Role
Backend 50% · Frontend 5% · Document 40%
Tech Stack
Timeline
1 ภาคเรียน (ปีการศึกษา 2567)
Team
5 members
Full Gallery
All 5 screens — Home, Join Room, Create Room, Chat Room & Transition
The Solution
The Solution: แพลตฟอร์ม random chat ที่ผสมแนวคิด journey experience เข้ากับ real-time web app ทำให้การคุยกับคนแปลกหน้ามีทั้งบริบทและความแปลกใหม่ Impact: ได้ฝึก full-stack collaboration, real-time system design, และการแก้ปัญหา WebSocket / CORS / room transition ในโปรเจกต์จริง Limitations: เกมย่อยในแต่ละห้องยังไม่สมบูรณ์ และจำนวนห้อง/การย้อนกลับห้องเก่ายังมีข้อจำกัดจากระบบย้ายห้อง Challenges: ทำระบบ real-time communication ให้เปลี่ยนห้องอัตโนมัติได้โดยไม่หลุด connection, เชื่อม Backend กับ Frontend ให้เสถียร, และจัดการ room lifecycle เมื่อมีผู้ใช้เข้าออกหลายบทบาท