Build Music Sync Dashboard Prototype #1
Description
Create a comprehensive dashboard prototype for the cross-platform music playlist syncing service using Astro, TypeScript, TailwindCSS, and shadcn/ui.
Requirements
Tech Stack
- Astro with full TypeScript support
- TailwindCSS for styling
- shadcn/ui components
- pnpm as package manager
Core Features to Implement
1. Dashboard Layout
- Sidebar navigation with the following sections:
- Dashboard Home/Overview
- Playlist Management (Transfer, Sync, Global)
- Connections/Services Management
- Settings/Profile
2. Dashboard Home/Overview Page
- Dynamic welcome banner with personalized greeting
- Recently synced playlists grid with cards showing:
- Playlist artwork/cover
- Playlist name
- Source service icons
- Last sync timestamp
- Connected music services grid with:
- Service logos (Spotify, Apple Music, YouTube Music, SoundCloud, Deezer, Tidal)
- Status indicators
- Playlist count per service
- Quick actions section with buttons for:
- Initiate Transfer
- Manage Syncs
- Create New Global Playlist
3. Playlist Management Pages
- Transfer Page: One-time playlist transfers with step-by-step workflow
- Sync Page: Bi-directional playlist synchronization management
- Global Page: Unified playlist management across services
4. Services Management
- Connected services overview
- Add new service connections
- Service-specific settings
5. Settings/Profile
- Account management
- Notification preferences
- Default sync settings
Design Requirements
- Responsive design using TailwindCSS
- Modern, clean interface using shadcn/ui components
- Sidebar navigation layout
- Service status indicators (green dots for connected)
- Card-based layouts for playlists and services
- Professional color scheme suitable for a music service
Mock Data
Include realistic mock data for:
- User playlists across different services
- Service connection statuses
- Recent sync activities
- Sample music service integrations
The prototype should demonstrate the full user experience from authentication through playlist management, with particular attention to the visual hierarchy and user flow outlined in the specification.