If My Feelings Were A City

Inspiration

We built If My Feelings Were a City because emotions are often hard to explain in plain language. People usually know they feel overwhelmed, disconnected, or tense, but struggle to describe what that actually looks like internally. We wanted to turn emotional complexity into something visual and intuitive, so users can quickly understand their inner state and feel less confused.

What it does

The app guides users through 8 short prompts, then generates a symbolic 2D city that represents their emotional landscape. Districts, roads, weather, and lighting reflect emotional patterns like Anxiety, Calm, Focus, Growth, Social, and Overload. Users can click each district to see plain-English meaning, read a structured emotional summary, and get grounded “what to do right now” suggestions.

How we built it

We built the app with Next.js, TypeScript, Tailwind CSS, Framer Motion, and shadcn/ui. The city map is rendered with a custom interactive SVG system. We created a deterministic generation engine that maps prompt responses into emotional scores, then maps those scores to city structure and guidance. We also added local draft-saving/saved cities and a mood soundtrack layer using Jamendo API with a fallback music source.

Challenges we ran into

Our biggest challenge was balancing artistic style with readability. Early versions looked interesting but were too abstract, so we simplified the layout and labels to make the map understandable at first glance. Another challenge was writing supportive guidance that felt useful without sounding clinical or making therapy claims. We also had to keep the whole experience lightweight and hackathon-realistic.

Accomplishments that we're proud of

We are proud that we shipped a complete end-to-end experience: from prompts, to visual city generation, to actionable reflection guidance. We improved the city UI to be cleaner and more intentional, replaced confusing district names with clear emotional labels, and added practical activities (meditation techniques, immediate next steps, and mood-based audio support). The result is a polished demo flow that feels both expressive and usable.

What we learned

We learned that emotional products need clarity as much as creativity. Visual metaphors help users process feelings faster, but only when the interface is simple and the language is grounded. We also learned that small, concrete suggestions are more helpful than generic advice. Most importantly, we learned that thoughtful UX and copy can make users feel genuinely understood.

What's next for If My Feelings Were A City

Next, we want to add emotional trend tracking across time, so users can compare cities day-to-day and notice patterns. We also want to expand guided reflection modes, improve soundtrack personalization, and add exportable city snapshots for journaling. Long term, we want this to become a trusted self-reflection tool that helps people move from emotional confusion to emotional clarity.

Built With

• api
• browser
• css
• framer
• itunes
• jamendo
• localstorage
• motion
• next.js
• search
• shadcn/ui
• svg
• tailwind
• typescript
• vercel