Apple Music clone

โปรเจกต์นี้คือเว็บแอปพลิเคชันสำหรับฟังเพลงที่ได้รับแรงบันดาลใจจาก Apple Music พัฒนาด้วย React 19 และเชื่อมต่อกับ iTunes Search API เพื่อดึงข้อมูลเพลงและมิวสิกวิดีโอมาแสดงผล แอปพลิเคชันมีดีไซน์ที่ทันสมัย รองรับการใช้งานทุกหน้าจอ (Responsive) โดยใช้ Tailwind CSS ในการตกแต่ง และมีแอนิเมชันที่ลื่นไหลจาก Framer Motion.

Key Features

1. ระบบค้นหาที่ครบถ้วน สามารถค้นหาเพลง ศิลปิน และวิดีโอ หรือเลือกดูตามหมวดหมู่แนวเพลงต่าง ๆ ได้

2. เครื่องเล่นเพลงขั้นสูง ระบบควบคุมการเล่นเพลงที่สมบูรณ์ (เล่น/หยุด, เลื่อนเวลา, ปรับระดับเสียง, สุ่มเพลง, เล่นซ้ำ) และรองรับปุ่มลัด (Keyboard Shortcuts).

3. ระบบสมาชิก เชื่อมต่อกับ Firebase Auth เพื่อให้ผู้ใช้เข้าสู่ระบบผ่าน Google เพื่อเข้าถึงฟีเจอร์ส่วนตัว

4. การจัดการข้อมูลส่วนตัว มีระบบบันทึก "เพลงที่ชอบ" (Favorites), "เพลย์ลิสต์" (Playlists) และ "ประวัติการฟัง" (History) โดยบันทึกข้อมูลไว้ในเครื่องผู้ใช้ (LocalStorage)

5. ดีไซน์ที่สวยงาม มีเอฟเฟกต์ Ambient Glow (แสงฟุ้ง) ที่เปลี่ยนสีตามหน้าปกเพลงโดยอัตโนมัติ พร้อมระบบปรับแต่งธีมสีและโหมดมืด/สว่าง.

6. รองรับทุกอุปกรณ์ ออกแบบมาให้ใช้งานได้ดีทั้งบนคอมพิวเตอร์และมือถือ พร้อมแถบเมนูด้านข้างที่ปรับเปลี่ยนได้ตามขนาดหน้าจอ

HOME PAGE

1. ส่วนไฮไลท์ (Hero Section) แสดงศิลปินและอัลบั้มแนะนำด้วยแบนเนอร์ขนาดใหญ่ที่สวยงาม พร้อมพื้นหลังที่เปลี่ยนตามหน้าปกเพลง

2. เนื้อหาแบบไดนามิก สลับการแสดงผลระหว่าง "เพลงฮิตติดเทรนด์" และ "ผลการค้นหา" ตามที่ผู้ใช้พิมพ์

3. การจัดวางสองรูปแบบ ผสมผสานการแสดงผลแบบ ตาราง (Grid) สำหรับ 10 อันดับแรก และแบบ รายการ (List) พร้อมระบบแบ่งหน้าสำหรับดูเพลงทั้งหมด

4. ทางลัดอัจฉริยะ ผู้ใช้สามารถกดเล่นเพลง, ติดตามศิลปิน หรือกดดูรายละเอียดบน iTunes Store ได้ทันที

MUSIC MODE

1. โหมดเพลง (Music Mode) เป็นโหมดเริ่มต้นที่เน้นการฟังเพลง มีเอฟเฟกต์ Ambient Glow (แสงฟุ้ง) ที่เปลี่ยนสีตามหน้าปกและจัดวางการ์ดขนาดพอดี (5 คอลัมน์)

VIDEO MODE

1. โหมดวิดีโอ (Video Mode) หน้าจอที่ออกแบบมาเพื่อมิวสิกวิดีโอโดยเฉพาะ ใช้การ์ดขนาดใหญ่ขึ้น (3-4 คอลัมน์) เพื่อให้เห็นภาพชัดเจน และสามารถเล่นวิดีโอได้ในแผงด้านขวาหรือหน้าต่างขยาย

2. ระบบควบคุมร่วมกัน ทั้งสองโหมดใช้แถบควบคุม (Player Bar) เดียวกัน แต่หน้าจอจะปรับเปลี่ยนเพื่อแสดงผลเป็นตัวเล่นเสียงหรือตัวเล่นวิดีโอโดยอัตโนมัติ

SETTINGS

1. ระบบปรับแต่งธีม มีโทนสีให้เลือกถึง 7 สีหลัก (ม่วง, ชมพู, ฟ้า, เขียว, ส้ม, แดง และสีเริ่มต้น)

2. สลับโหมดการแสดงผล สามารถเลือกใช้ โหมดมืด (Dark) หรือ โหมดสว่าง (Light) ซึ่งจะเปลี่ยนดีไซน์แบบกระจก (Glassmorphism) ให้เหมาะสมตามโหมด

3. การควบคุมข้อมูล ผู้ใช้สามารถกำหนด จำนวนผลลัพธ์ (Track Limit) ต่อการค้นหาได้ เพื่อช่วยเรื่องความเร็วในการโหลด

4. ระบบจดจำค่า ทุกการตั้งค่าจะถูกบันทึกไว้ใน LocalStorage ทำให้แอปจดจำสไตล์ที่คุณชอบได้ทุกครั้งที่กลับมาใช้งาน

HISTORY

1. ระบบบันทึกอัตโนมัติ ทุกเพลงที่ถูกกดเล่นจะถูกเพิ่มเข้าไปในรายการประวัติการฟังโดยอัตโนมัติ

2. การจัดการข้อมูลอัจฉริยะ บันทึกเพลงล่าสุดได้สูงสุด 50 เพลง โดยเพลงเก่าจะถูกลบออกอัตโนมัติเมื่อเกินจำนวน เพื่อให้รายการทันสมัยอยู่เสมอ

3. เข้าถึงง่าย มีหน้า History แยกเฉพาะเพื่อให้ผู้ใช้กลับไปฟังเพลงที่เพิ่งค้นพบได้อย่างรวดเร็ว

4. ความเป็นส่วนตัว ข้อมูลถูกเก็บไว้ในเครื่องของผู้ใช้ (Local) ทำให้โหลดข้อมูลได้ทันทีและมีความเป็นส่วนตัวสูง

FAVORITES & PLAYLISTS

1. เพลงที่ชอบ (Favorites) ระบบกดหัวใจเพื่อบันทึกเพลงที่ชอบไว้ในรายการโปรดได้ในคลิกเดียว

2. เพลย์ลิสต์ส่วนตัว สามารถสร้างเพลย์ลิสต์ ตั้งชื่อ และจัดการรายการเพลงในแบบของตัวเองได้

3. ระบบรักษาความปลอดภัย ฟีเจอร์เหล่านี้ต้อง เข้าสู่ระบบผ่าน Google (Firebase) เพื่อเข้าถึงข้อมูลส่วนบุคคลของคุณโดยเฉพาะของคุณเท่านั้น

Technical Stack

1. Frontend React 19, React Router 7, HeroUI (UI Components)

2. Styling Tailwind CSS, Framer Motion (Animations)

3. Backend/API iTunes Search API (Data), Firebase Authentication (Login)

4. Icons Lucide React