Vibetunes: Mood → Music
My bachelor thesis, designed and built end to end. You answer eight quick questions about your mood, what you're doing, your energy and your taste; an AI curator writes a playlist, every track is verified on Spotify, and the result arrives with album art, previews and links. The whole interface is a mood ring: pick a mood and the app changes colour around you.
- Role
- Design & full-stack development
- Scope
- UX, UI, API, AI pipeline, evaluation
- Stack
- React, Vite, Node, Express, OpenAI, Spotify API
- Context
- Bachelor thesis, Computer Science
Live The real app, running here in demo mode. Take the quiz: pick a mood and watch everything re-tint. In this demo a sample playlist stands in for the live AI and Spotify calls.
The problem
Your mood changes faster than your playlists.
Streaming apps recommend from your history, which is great for what you usually like and bad at what you need right now. Searching “chill” or “focus” gives everyone the same generic lists.
Vibetunes starts from the moment instead: how you feel, what you're doing and how much energy you want, then builds a playlist for exactly that. The goal was an experience that feels personal in under a minute, with results you can actually play.
Goals
- Personal playlists in under a minute
- A quiz that feels like play, not a form
- Only real, playable tracks
- Fresh results on every regenerate
The mood ring
Pick a mood, the whole app follows.
- 01
Romantic
Each pick fires an emoji burst in the mood's own particles.
- 02
Happy
Sunshine yellow into orange.
- 03
Relaxed
Deep green, slow and soft.
- 04
Sad
Rain blue and grey.
- 05
Focused
Calm violet for deep work.
- 06
Angry
Red into burnt orange.
Eight moods, eight palettes. One data attribute on the body swaps every colour token, and the background, aura, buttons and progress bar all ease into the new mood.
The questions
Eight steps, zero friction.
- 02
The scene
What you'll be doing, so the soundtrack fits.
- 03
Energy
A 1–10 slider, from soft hum to full blast.
- 04
Genres
Pick as many as you like.
- 05
Artists you love
Type a name, press Enter, it becomes a tag.
- 07
Familiar or new
Favourites, a mix, or hidden gems.
- 08
Last touches
Decades, plus anything else in your own words.
One question per screen, a progress bar that fills in the mood colour, and only the essentials required. The optional steps skip in a tap.
The loading screen
Make the wait feel like music.
Vibetunes mood → music
Reading your vibe…
The real loading screen, live. While the AI and Spotify work, an equalizer pulses and the status line says what's happening. Pick another mood to re-tint it.
Under the hood
An AI curator with a fact-checker.
The Express server turns the answers into a structured prompt and asks OpenAI for a playlist in strict JSON mode: a name, a description and fifteen title–artist pairs. JSON mode makes the reply reliable to parse, every time.
Language models sometimes invent songs, so every suggestion is searched on Spotify before it reaches you. Tracks that don't exist fail to match and are dropped, which turns Spotify into a validation layer. Regenerate sends everything suggested so far as an exclusion list, so each new playlist is genuinely new.
Pipeline
- 8-step quiz → structured prompt
- OpenAI Chat Completions, JSON mode
- Spotify search validates every track
- Album art, previews, Spotify links
- Regenerate with an exclusion list
- Evaluated against Spotify's own mixes
The playlist: a name and description written for your moment, album art, durations, previews and an Open on Spotify link on every track.
The same screen in Romantic: the playlist inherits the mood's palette, down to the pill and the buttons.
Color
One ink, eight moods
Typography
Loud headlines, friendly body, a mono beat
How are you feeling?
Aa Bb Cc Dd Ee Ff Gg 0123456789
Find my vibe →
Aa Bb Cc Dd Ee Ff Gg 0123456789
STEP 1 / 8 · 12 TRACKS
Aa Bb Cc Dd Ee Ff Gg 0123456789
Built mobile-first: the quiz, the burst and the playlist all work one-handed.
