Mood City

Therapy bot that creates a digital cityscape and tracking calendar based on your day-to-day moods, conversations, and journal entries.

Comment

Inspiration

Mental health isn’t one-size-fits-all, and sometimes words alone don’t cut it. We wanted to create a way for people to visualize how they’re doing—emotionally and socially—without pressure. Inspired by journaling apps and cozy games like Animal Crossing and Stardew Valley, we built Mood City, a digital world that grows based on your daily moods and activities.

What it does

Mood City is a virtual mental wellness companion. Each time a user logs an activity and how they’re feeling, a building is added to their personal city—like a cottage for a restful day, a café for socializing, or an office building for work. Each building changes in appearance depending on the mood (e.g. happy, sad, tired). Over time, the user’s city becomes a visual reflection of their emotional journey.

How we built it

We used HTML, CSS, and JavaScript to create a dynamic single-page web app. We coded a calendar, journal prompts, breathing exercises, and a mood tracker that automatically places pixel-art buildings on a scrolling map. Assets were managed through a folder structure (/assets/buildings/{type}/{mood}.png) and dynamically rendered using DOM manipulation. Mood detection is manual for now, but we designed the structure with future integration (like AI chat or sentiment analysis) in mind.

Challenges we ran into

As beginners, a lot of our code didn't work at times and we had difficulties troubleshooting. However, this was a great learning experience for us. We also initially wanted to build a chatbot, but integrating a full AI model with real-time processing would’ve taken longer than expected

Accomplishments that we're proud of

Designed multiple emotional variations of buildings that reflect the user's mood.

Implemented a clean, simple UI that still feels cozy and comforting.

Added extra features like a breathing exercise modal and journal prompts.

What we learned

  • How to manage complex state and dynamic DOM updates in vanilla JavaScript.

  • How to structure and reference image assets properly in a web app.

  • The importance of balancing ambition and feasibility during a hackathon.

  • That even simple visual metaphors (like buildings) can make mental health tracking feel meaningful and approachable.

What's next for Mood City

  • Integrating sentiment analysis or GPT-based conversation for more personalized mood tracking.

    • Adding more building types (e.g. park, bedroom, train station) and animation effects.

  • Making each building more unique to the day

  • Making it mobile-first and accessible to all!

Built With

Share this project:

Updates