https://github.com/debrajhyper/music-player-ui
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.
https://github.com/debrajhyper/music-player-ui
axios reactjs spotify-api tailwindcss typescript zustand
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/debrajhyper/music-player-ui
- Owner: debrajhyper
- Created: 2024-08-30T12:42:33.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-05T01:22:03.000Z (9 months ago)
- Last Synced: 2024-10-15T17:21:09.416Z (7 months ago)
- Topics: axios, reactjs, spotify-api, tailwindcss, typescript, zustand
- Language: TypeScript
- Homepage: https://musicspace-ui.vercel.app
- Size: 3.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Music Player UI - Project Documentation
đ Website: [musicspace-ui](https://musicspace-ui.vercel.app/)
## đ 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 sidebar to list all songs
## ⥠Project Specifications
### Design
- Figma Design Link: [Music Player UI Design](https://www.figma.com/file/RtKhzEeeuD2FtRsg2dxSep/Front-end-Assessment?type=design&node-id=1-2&mode=design&t=zEkwOdYyaeNx0z7m-4)
### API Integration
- API Endpoint: https://cms.samespace.com/items/songs
- Image URL Format: https://cms.samespace.com/assets/{COVER_IMAGE_ID}
**Note**: The API will return different titles, artists, cover images, and durations, but the URL for every song will be the same.
## đšī¸ 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
## đĻ Deployment
1. **Version Control**: Use Git for version control and submit the project as a GitHub repository
2. **Hosting**: Deploy a working demo on Vercel.
## đī¸ Getting Started
To set up the project locally:
1. Clone the repository
```bash
https://github.com/debrajhyper/Music-Player-UI.git
```
2. navigate to the code directory
```bash
cd Music-Player-UI
```
3. Install dependencies: `npm install`
4. Create a `.env` file in the root where package.json located and paste the api endpoints accordingly.
```bash
VITE_API_SONGS_URL=https://cms.samespace.com/items/songs
VITE_API_SONG_COVER_IMG_URL=https://cms.samespace.com/assets/
```
6. Start the development server: `npm run dev`
## đĻ Build and Deployment
To build the project for production:
1. Run the build command: `npm run build`
2. 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.