Vibe is a social music web app designed to bridge the gap between listening and connecting. Unlike traditional streaming apps that focus only on music, Vibe emphasizes community, real-time interaction, and shared experiences. Users can discover trending playlists, see who’s vibing live, join listening sessions, connect with friends, and attend music events—all in one platform.

The goal was to design a demo-ready, friendly prototype with enough screens to show a complete flow: from onboarding to discovery, interaction, friendship, and real-world events.

The live chat option added an extra layer of complexity and uniqueness to the project. Unlike traditional music streaming platforms, this feature allows users to interact in real-time while listening to the same playlist or track. It transforms passive listening into an active, shared experience where users can drop reactions, send quick messages, or even recommend songs instantly. Designing this meant balancing smooth performance with a clean, distraction-free UI so that the chat enhanced the vibe rather than overwhelming the music. It also required careful thought about scalability—ensuring that whether there are 10 or 1,000 listeners in a session, the chat feels fast, engaging, and effortless. This functionality became the social heartbeat of the app, pushing it beyond music discovery into community-driven connection.

Music is deeply social, but most music platforms isolate users. People often share links but lack a space to:

See what friends are listening to in real time.

Join a live “vibe” session around a playlist.

Discover music communities nearby.

Chat and build friendships around shared tastes.

Vibe solves this by making music discovery inherently social.

Onboarding (Spotify Connect) – Users connect their Spotify to pull real playlists and preferences.

Discover Screen – Trending playlists, live listeners, and local events.

Playlist Detail Screen – Unique feature: live comments + active listeners, with a “Join this Vibe” button.

Events Screen + Event Detail – Grid of concerts and listening rooms, RSVP, and see attendees.

Friends Screen – Grid of friends + what they’re listening to right now.

Messages Screen – Drop tracks directly in chat with an embedded mini-player.

Profile Screen – Bio, liked music, playlists, currently listening, top artists.

👉 Navigation Loop: Onboard → Discover → Playlist → Profile → Add Friend → Message → Event.

Minimal, futuristic UI with bold typography, neon gradients, and immersive covers.

Engagement-driven layouts: sidebar comments, avatars of active listeners, interactive RSVP.

Web-first Design: Grid-based layouts, responsive design, hover interactions.

This project wasn’t just a simple “playlist app.” Complexity came from:

Multi-user Interactions – live comments, avatars, active listener states.

Integration with Spotify – pulling real playlists, top artists, and live listening data.

Event Layer – designing an additional module for real-life music meetups.

Messaging + Mini Player – embedding track-sharing into chat flows.

Flow Mapping – ensuring judges could follow a simple yet powerful story from music → connection → friendship → event.

Despite hackathon time constraints, the project balances UI polish + functional depth, making it demo-ready while hinting at scalability.