Music Player UI

🌐 Website: musicspace-ui

🎁 Project Overview

The Music Player UI is a web application that allows users to browse, search, and play music tracks. It features a responsive design, real-time background color changes, and seamless playback across different browser tabs.

😍 UI Components

Initial loading & error fallback UI

Main component with different tabs

Responsive screen(mobile view) UI with a sidebar to list all songs

⚡ Project Specifications

🕹️ Technical Requirements

1. Framework: React JS
2. API Integration: Use REST API to load list data
3. Responsive Design: Adapt layout for smaller screens
4. Cross-tab Functionality: Music continues playing when user switches tabs
5. Dynamic Styling: Background gradient color changes based on the current song's cover image
6. Animations: Implement fluid transitions and animations (e.g., list loading, background color change)

✅ Functionality

The Music Player UI includes the following features:

1. [✔️] Search: Allow users to search for songs and artists
2. [✔️] Music Control:
   • Play/Pause
   • Next Track
   • Previous Track
   • Mute/Unmute
3. [✔️] Tab Navigation: Allow switching between For You and Top Tracks sections
4. [✔️] Playback Control: Implement a seeker to control music playback position

🥤 Responsive Design

• For smaller screens, the player component should be the main interface
• Implement a menu button to show the list of songs on mobile devices in a sidebar.

🪄 User Interface

1. Song List: Display a scrollable list of songs with cover art, title, artist, and duration
2. Now Playing: Show currently playing song details and cover art
3. Playback Controls: Include play/pause, next, previous, seeker and volume controls
4. Search Bar: Implement a search input for filtering songs
5. Tab Navigation: Create tabs for For You and Top Tracks sections

🫱🏻‍🫲🏽 Development Guidelines

1. Code Organization: Use a modular approach with separate components for different UI elements
2. State Management: Implement global state management for handling playback, current song, and UI states
3. Typing: Use TypeScript for type safety and better code documentation
4. Styling: Utilize CSS-in-JS or a CSS framework like Tailwind CSS for styling components
5. Error Handling: Implement proper error handling for API requests and audio playback
6. Performance: Optimize for performance, especially when handling large lists of songs
7. Accessibility: Ensure the UI is accessible, with proper ARIA labels and keyboard navigation.