InwZa'KaraO'ke (OkeApp)

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

https://oke-app.vercel.app # InwZa'KaraO'ke (OkeApp) 🎤 แอปพลิเคชันคาราโอเกะออนไลน์แบบเรียลไทม์ พัฒนาด้วย Next.js (App Router), Supabase และ YouTube Player API --- ## 🌟 ฟีเจอร์เด่น (Key Features) - **🖥️ หน้าจอหลักสำหรับเครื่องโฮสต์ (Host Screen):** แสดงเครื่องเล่นวิดีโอ YouTube และคิวเพลงคาราโอเกะหลักแบบเต็มหน้าจอ (Fullscreen) - **📱 ระบบรีโมตคอนโทรลบนมือถือ (Mobile Remote Control):** ผู้ร่วมห้อง (Guest) สามารถสแกนหรือใส่รหัสห้องเพื่อเข้าควบคุมการเล่นเพลง เพิ่ม ลบ หรือจัดลำดับคิวเพลงแบบเรียลไทม์ได้จากมือถือของตนเอง - **🔄 ระบบคิวเพลงและปุ่มควบคุมแบบเรียลไทม์ (Real-time Sync):** - คิวเพลงจะซิงก์กันระหว่างมือถือของทุกคนในห้องและหน้าจอหลักทันที - ปุ่มควบคุมเพลง: เล่น (PLAY), หยุด (PAUSE), เริ่มเล่นใหม่ (REPLAY) และข้ามเพลง (NEXT) ทำงานร่วมกันอย่างไร้รอยต่อผ่าน Supabase Realtime - **🔍 ระบบค้นหาเพลงและแคชอัจฉริยะ (Smart Search & Cache):** - ค้นหาเพลงผ่าน YouTube Data API v3 - บันทึกข้อมูลประวัติการค้นหาเพลงลงใน Supabase (`saved_songs`) เพื่อช่วยประหยัด Quota ของ YouTube API - **🎨 สไตล์ระดับพรีเมียม (Premium UX/UI):** ธีมดีไซน์สไตล์ Dark Mode เรียบหรูพร้อม Glassmorphism, สีสันสดใส และลูกเล่น Micro-animations (เช่น ตัวจำลอง Equalizer ขณะเพลงกำลังเล่น) --- ## 🛠️ เทคโนโลยีที่ใช้ (Tech Stack) - **Framework:** [Next.js 15+ (App Router)](https://nextjs.org/) ด้วย TypeScript - **Database & Realtime:** [Supabase](https://supabase.com/) (Postgres & Realtime Subscriptions) - **Styling:** CSS Variables + Vanilla CSS (และ Tailwind CSS สำหรับ Component เสริม) - **Video Player:** [YouTube IFrame Player

โดย pantamit-dev · ดูโพสต์ต้นทาง