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:

1. Authentication Flow A beautiful login/signup screen with options to sign in via email or Spotify.

Clean forms, brand-themed buttons, and subtle animations.

2. Home Dashboard After login, show a dashboard with:

User’s profile card (avatar, name, current song).

Navigation to the 5 main music-sharing features (tabs or sidebar).

A floating “Add Friend” button.

3. Add/Search Users Screen A search bar to search for users by username or email.

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.

4. Connected Friends Screen A list of accepted friends with their avatars, music status, and a button to view shared features.

5. 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).

6. Shared Playlist Screen (Feature 2) A playlist interface with:

A form to submit a Spotify track + short caption.

A list of all submitted tracks.

Weekly stats like "Top Song", "New Additions", etc.

7. Mood Graph Screen (Feature 3) Side-by-side mood analytics graph for both users.

Show Spotify audio features (valence, energy, tempo) using line/bar charts.

Include profile avatars and a friendly label like “Mood Match: 87%”.

8. Music Postcard Drop (Feature 4) A scrollable grid of music postcards.

Each card shows album art and flips on click to reveal a message.

Include embedded Spotify preview and sender name.

9. Live Listening Map (Feature 5) A world/city-level map showing each user’s location with a pulsing pin.

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.