Music Player UI - Project Documentation
🌐 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
⚡ Project Specifications
Design
API Integration
Note: The API will return different titles, artists, cover images, and durations, but the URL for every song will be the same.
🕹️ Technical Requirements
-
Framework: React JS
-
API Integration: Use REST API to load list data
-
Responsive Design: Adapt layout for smaller screens
-
Cross-tab Functionality: Music continues playing when user switches tabs
-
Dynamic Styling: Background gradient color changes based on the current song's cover image
-
Animations: Implement fluid transitions and animations (e.g., list loading, background color change)
✅ Functionality
The Music Player UI includes the following features:
- [✔️] Search: Allow users to search for songs and artists
- [✔️] Music Control:
- Play/Pause
- Next Track
- Previous Track
- Mute/Unmute
- [✔️] Tab Navigation: Allow switching between
For You
and Top Tracks
sections
- [✔️] 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
-
Song List: Display a scrollable list of songs with cover art, title, artist, and duration
-
Now Playing: Show currently playing song details and cover art
-
Playback Controls: Include play/pause, next, previous, seeker and volume controls
-
Search Bar: Implement a search input for filtering songs
-
Tab Navigation: Create tabs for
For You
and Top Tracks
sections
🫱🏻🫲🏽 Development Guidelines
-
Code Organization: Use a modular approach with separate components for different UI elements
-
State Management: Implement global state management for handling playback, current song, and UI states
-
Typing: Use TypeScript for type safety and better code documentation
-
Styling: Utilize CSS-in-JS or a CSS framework like Tailwind CSS for styling components
-
Error Handling: Implement proper error handling for API requests and audio playback
-
Performance: Optimize for performance, especially when handling large lists of songs
-
Accessibility: Ensure the UI is accessible, with proper ARIA labels and keyboard navigation
📦 Deployment
-
Version Control: Use Git for version control and submit the project as a GitHub repository
-
Hosting: Deploy a working demo on Vercel.
🗃️ Getting Started
To set up the project locally:
- Clone the repository
https://github.com/debrajhyper/Music-Player-UI.git
- navigate to the code directory
cd Music-Player-UI
- Install dependencies:
npm install
- Create a
.env
file in the root where package.json located and paste the api endpoints accordingly.
VITE_API_SONGS_URL=https://cms.samespace.com/items/songs
VITE_API_SONG_COVER_IMG_URL=https://cms.samespace.com/assets/
- Start the development server:
npm run dev
📦 Build and Deployment
To build the project for production:
- Run the build command:
npm run build
- Deploy the built files to your chosen hosting platform
For detailed instructions on deploying to Vercel, refer to their respective documentation.
📃 Available Scripts
In the project directory, you can run the following scripts:
-
npm run dev
: Starts the development server using Vite.
-
npm run build
: Builds the project for production. It runs TypeScript compiler and then builds the project with Vite.
-
npm run lint
: Runs ESLint to check for code quality and style issues.
-
npm run preview
: Serves the production build locally for preview.
🛠️ Development Tools
The project utilizes these development tools:
-
vite
(v5.4.1): A modern frontend build tool that provides a faster and leaner development experience.
-
typescript
(v5.5.3): A typed superset of JavaScript that compiles to plain JavaScript.
-
eslint
(v9.9.0): A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
-
tailwindcss
(v3.4.10): A utility-first CSS framework for rapidly building custom user interfaces.
-
@vitejs/plugin-react-swc
(v3.5.0): Vite plugin that uses SWC to transform React code.
-
autoprefixer
(v10.4.20): A PostCSS plugin to parse CSS and add vendor prefixes to CSS rules.
-
postcss
(v8.4.41): A tool for transforming CSS with JavaScript.
🧩 Additional Notes
- The project uses SWC (Speedy Web Compiler) for faster compilation of React code.
- ESLint is configured with plugins for React hooks and React refresh to ensure best practices and optimal performance.
- The project is set up with TypeScript for type safety and better developer experience.
- Tailwind CSS is used for styling, providing a utility-first approach to CSS.