Music Streaming Dashboard
Build a modern and visually rich music streaming dashboard based on the provided design. The interface should include a sidebar navigation, search field, featured playlist card, user profile area, now playing widget, recently played songs list, and additional music collection cards. Use HTML for structure, CSS for styling, and JavaScript for interactivity and dynamic rendering. Integrate an API or mock JSON data source to load songs, playlists, artists, album covers, durations, or user profile details dynamically. The final result should focus on polished UI design, reusable music cards, responsive layout, dark theme styling, and interactive media dashboard behavior.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Build the full music dashboard based on the provided design
- Use semantic HTML5 structure
- Style the full interface using CSS
- Use JavaScript for dynamic rendering and UI interactions
- Create a sidebar with navigation links and grouped menu sections
- Add a search input in the sidebar or top area
- Create a featured playlist or mix banner card
- Build a user profile section with avatar and account details
- Create a now playing music widget with cover image and playback controls
- Build a recently played songs list with title, artist, and duration
- Add action buttons such as play, favorite, or more options
- Display at least one additional music collection card such as liked songs or saved playlist
- Integrate at least one API or mock API for music or playlist data
- Render songs, playlists, or album data dynamically using JavaScript
- Add hover and active states for navigation, buttons, and music items
- Use a consistent dark theme with proper spacing and visual hierarchy
- Make the layout responsive for tablet and mobile devices
- Keep code clean and organized across HTML, CSS, and JavaScript files
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.