Here’s the updated and Firebase Studio–friendly prompt that:
Emphasizes UI only (no backend logic),
Includes user authentication UI,
Allows adding/searching friends,
Then enables all your music-sharing features once users are connected.
🧩 Prompt for Firebase Studio (UI Only):
Design a web-based UI (no backend or logic required) for a social music-sharing app. The app is for users who love music and want to share their listening experience with close friends. The app includes a user authentication system and interactive music features. Only design the UI components and user flow — no backend implementation.
📱 The UI should include the following screens/components:
Clean forms, brand-themed buttons, and subtle animations.
User’s profile card (avatar, name, current song).
Navigation to the 5 main music-sharing features (tabs or sidebar).
A floating “Add Friend” button.
List results with an “Add Friend” or “Request Sent” button beside each name.
A “Friend Requests” section where you can accept or decline incoming requests.
Connected Friends Screen A list of accepted friends with their avatars, music status, and a button to view shared features.
Now Playing View (Feature 1) For each friend, show their currently playing Spotify track.
Include album art, artist, song name, timestamp, and real-time updates.
Add emoji reactions and simple animations (like bouncing music bars).
A form to submit a Spotify track + short caption.
A list of all submitted tracks.
Weekly stats like "Top Song", "New Additions", etc.
Show Spotify audio features (valence, energy, tempo) using line/bar charts.
Include profile avatars and a friendly label like “Mood Match: 87%”.
Each card shows album art and flips on click to reveal a message.
Include embedded Spotify preview and sender name.
Clicking the pin shows the currently playing song in a popup.
Smooth, subtle animations and real-time updates.
🎨 Design Guidelines:
UI only — no backend logic.
Use soft gradients, rounded corners, glassmorphism (frosted glass), and smooth transitions.
Responsive layout for both desktop and mobile.
Soft, cozy, expressive vibe with musical elements and avatars.
I'll create a comprehensive UI for your social music-sharing app with all the screens and features you've outlined. This will be a beautiful, modern interface with glassmorphism effects and smooth animations.
I've created a comprehensive social music-sharing app UI with all the features you requested! Here's what I've built:
🔐 Authentication Flow
🏠 Home Dashboard
👥 Add/Search Friends
🎧 Now Playing View
🎵 Shared Playlists
📊 Mood Analytics
💌 Music Postcards
🗺️ Live Listening Map
The app is fully UI-focused with no backend logic, perfect for Firebase Studio integration. Each screen flows naturally into the others, creating a cohesive user experience for music lovers to connect and share their listening journey! 🎶