Apple Music Clone

This project is a modern, web-based music streaming application inspired by Apple Music. It is built with React 19 and utilizes the iTunes Search API to provide a rich catalog of songs and music videos. The application features a sleek, responsive user interface styled with Tailwind CSS and smooth animations powered by Framer Motion.

Key Features

1. Comprehensive Search Search for tracks, artists, and music videos, or browse by genres.

2. Advanced Music Player A fully functional playback system with controls for play/pause, seek, volume, shuffle, and repeat, including keyboard shortcut support.

3. User Authentication Integrated with Firebase Auth for Google Sign-In to secure personalized features.

4. Personalization Manage "Favorites", "Playlists", and "Recently Played" history (stored locally).

5. Immersive Design Dynamic Ambient Glow effects that adapt to the current track's artwork, along with customizable theme colors and dark/light modes.

6. Responsive Layout Optimized for both desktop and mobile devices with a flexible sidebar and intuitive navigation.

HOME PAGE

1. Hero Section Displays a featured artist and album with a high-impact visual banner that adapts its background to the artwork.

2. Dynamic Content Switches between "Trending Songs" and "Search Results" based on user input.

3. Dual View Layout Combines a visual Grid View (Top 10 tracks) for discovery and a List View (All results) with pagination for detailed browsing.

4. Quick Actions Allows users to play, follow artists, or view tracks directly on the iTunes store.

MUSIC MODE

1. Music Mode The default experience focusing on audio tracks. It features Ambient Glow effects that sync with the music's artwork and provides a compact grid (5 columns).

VIDEO MODE

1. Video Mode A dedicated UI for music videos. It uses larger Video Cards (3-4 columns) to emphasize visual content and provides an integrated video player in the Right Panel or full-screen drawer.

2. Unified Controller Both modes share the same Player Bar logic, but the UI adapts to show either an audio waveform or a video playback element.

SETTINGS

1. Theme Engine Offers 7 distinct color themes (Purple, Pink, Blue, Green, Orange, Red, and Default).

2. Appearance Toggle Seamless switching between Dark Mode and Light Mode, affecting the entire UI including glassmorphism effects.

3. Data Control Allows users to set the Track Limit per search (e.g., 20, 50, 100) to optimize loading speed and data usage.

4. Persistence All settings are saved to LocalStorage, ensuring the app looks exactly how you left it on every visit.

HISTORY

1. Automatic Tracking: Every song played is automatically added to the history list without requiring manual input.

2. Smart Storage: Keeps track of the last 50 songs played, automatically removing older entries to keep the list relevant.

3. Instant Access: Provides a dedicated page to quickly jump back to recently discovered music.

4. Local Management: Data is stored locally on the device for privacy and instant loading without server delays.

FAVORITES & PLAYLISTS

1. Favorites A one-click "Heart" system to save preferred tracks for easy access.

2. Custom Playlists Users can create, name, and manage their own collections of songs.

3. Secure Access Requires Google Sign-In (Firebase) to access these personalized features, ensuring your library is unique to you.

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