ผลงานทั้งหมด

Apple Music clone

Apple Music cloneโปรเจกต์นี้คือเว็บแอปพลิเคชันสำหรับฟังเพลงที่ได้รับแรงบันดาลใจจาก Apple Music พัฒนาด้วย React 19 และเชื่อมต่อกับ iTunes Search API เพื่อดึงข้อมูลเพลงและมิวสิกวิดีโอมาแสดงผล แอปพลิเคชันมีดีไซน์ที่ทันสมัย รองรับการใช้งานทุกหน้าจอ (Responsive) โดยใช้ Tailwind CSS ในการตกแต่ง และมีแอนิเมชันที่ลื่นไหลจาก Framer Motion.Key Featuresระบบค้นหาที่ครบถ้วน สามารถค้นหาเพลง ศิลปิน และวิดีโอ หรือเลือกดูตามหมวดหมู่แนวเพลงต่าง ๆ ได้เครื่องเล่นเพลงขั้นสูง ระบบควบคุมการเล่นเพลงที่สมบูรณ์ (เล่น/หยุด, เลื่อนเวลา, ปรับระดับเสียง, สุ่มเพลง, เล่นซ้ำ) และรองรับปุ่มลัด (Keyboard Shortcuts).ระบบสมาชิก เชื่อมต่อกับ Firebase Auth เพื่อให้ผู้ใช้เข้าสู่ระบบผ่าน Google เพื่อเข้าถึงฟีเจอร์ส่วนตัวการจัดการข้อมูลส่วนตัว มีระบบบันทึก "เพลงที่ชอบ" (Favorites), "เพลย์ลิสต์" (Playlists) และ "ประวัติการฟัง" (History) โดยบันทึกข้อมูลไว้ในเครื่องผู้ใช้ (LocalStorage)ดีไซน์ที่สวยงาม มีเอฟเฟกต์ Ambient Glow (แสงฟุ้ง) ที่เปลี่ยนสีตามหน้าปกเพลงโดยอัตโนมัติ พร้อมระบบปรับแต่งธีมสีและโหมดมืด/สว่าง.รองรับทุกอุปกรณ์ ออกแบบมาให้ใช้งานได้ดีทั้งบนคอมพิวเตอร์และมือถือ พร้อมแถบเมนูด้านข้างที่ปรับเปลี่ยนได้ตามขนาดหน้าจอHOME PAGEส่วนไฮไลท์ (Hero Section) แสดงศิลปินและอัลบั้มแนะนำด้วยแบนเนอร์ขนาดใหญ่ที่สวยงาม พร้อมพื้นหลังที่เปลี่ยนตามหน้าปกเพลงเนื้อหาแบบไดนามิก สลับการแสดงผลระหว่าง "เพลงฮิตติดเทรนด์" และ "ผลการค้นหา" ตามที่ผู้ใช้พิมพ์การจัดวางสองรูปแบบ ผสมผสานการแสดงผลแบบ ตาราง (Grid) สำหรับ 10 อันดับแรก และแบบ รายการ (List) พร้อมระบบแบ่งหน้าสำหรับดูเพลงทั้งหมดทางลัดอัจฉริยะ ผู้ใช้สามารถกดเล่นเพลง, ติดตามศิลปิน หรือกดดูรายละเอียดบน iTunes Store ได้ทันทีMUSIC MODEโหมดเพลง (Music Mode) เป็นโหมดเริ่มต้นที่เน้นการฟังเพลง มีเอฟเฟกต์ Ambient Glow (แสงฟุ้ง) ที่เปลี่ยนสีตามหน้าปกและจัดวางการ์ดขนาดพอดี (5 คอลัมน์)VIDEO MODEโหมดวิดีโอ (Video Mode) หน้าจอที่ออกแบบมาเพื่อมิวสิกวิดีโอโดยเฉพาะ ใช้การ์ดขนาดใหญ่ขึ้น (3-4 คอลัมน์) เพื่อให้เห็นภาพชัดเจน และสามารถเล่นวิดีโอได้ในแผงด้านขวาหรือหน้าต่างขยายระบบควบคุมร่วมกัน ทั้งสองโหมดใช้แถบควบคุม (Player Bar) เดียวกัน แต่หน้าจอจะปรับเปลี่ยนเพื่อแสดงผลเป็นตัวเล่นเสียงหรือตัวเล่นวิดีโอโดยอัตโนมัติSETTINGSระบบปรับแต่งธีม มีโทนสีให้เลือกถึง 7 สีหลัก (ม่วง, ชมพู, ฟ้า, เขียว, ส้ม, แดง และสีเริ่มต้น)สลับโหมดการแสดงผล สามารถเลือกใช้ โหมดมืด (Dark) หรือ โหมดสว่าง (Light) ซึ่งจะเปลี่ยนดีไซน์แบบกระจก (Glassmorphism) ให้เหมาะสมตามโหมดการควบคุมข้อมูล ผู้ใช้สามารถกำหนด จำนวนผลลัพธ์ (Track Limit) ต่อการค้นหาได้ เพื่อช่วยเรื่องความเร็วในการโหลดระบบจดจำค่า ทุกการตั้งค่าจะถูกบันทึกไว้ใน LocalStorage ทำให้แอปจดจำสไตล์ที่คุณชอบได้ทุกครั้งที่กลับมาใช้งานHISTORYระบบบันทึกอัตโนมัติ ทุกเพลงที่ถูกกดเล่นจะถูกเพิ่มเข้าไปในรายการประวัติการฟังโดยอัตโนมัติการจัดการข้อมูลอัจฉริยะ บันทึกเพลงล่าสุดได้สูงสุด 50 เพลง โดยเพลงเก่าจะถูกลบออกอัตโนมัติเมื่อเกินจำนวน เพื่อให้รายการทันสมัยอยู่เสมอเข้าถึงง่าย มีหน้า History แยกเฉพาะเพื่อให้ผู้ใช้กลับไปฟังเพลงที่เพิ่งค้นพบได้อย่างรวดเร็วความเป็นส่วนตัว ข้อมูลถูกเก็บไว้ในเครื่องของผู้ใช้ (Local) ทำให้โหลดข้อมูลได้ทันทีและมีความเป็นส่วนตัวสูงFAVORITES & PLAYLISTSเพลงที่ชอบ (Favorites) ระบบกดหัวใจเพื่อบันทึกเพลงที่ชอบไว้ในรายการโปรดได้ในคลิกเดียวเพลย์ลิสต์ส่วนตัว สามารถสร้างเพลย์ลิสต์ ตั้งชื่อ และจัดการรายการเพลงในแบบของตัวเองได้ระบบรักษาความปลอดภัย ฟีเจอร์เหล่านี้ต้อง เข้าสู่ระบบผ่าน Google (Firebase) เพื่อเข้าถึงข้อมูลส่วนบุคคลของคุณโดยเฉพาะของคุณเท่านั้นTechnical StackFrontend React 19, React Router 7, HeroUI (UI Components)Styling Tailwind CSS, Framer Motion (Animations)Backend/API iTunes Search API (Data), Firebase Authentication (Login)Icons Lucide React