MoodBubble

MoodBubble Logo

Inspiration

MoodBubble was inspired by the idea of creating a safe and expressive digital space where users can share how they feel about the places they visit. Locations often carry emotional experiences—both positive and negative—and we wanted to capture those moments in a way that encourages reflection and social connection. Our goal was to design an application that empowers users to freely express their moods anytime and anywhere while fostering a community built around shared experiences.

What it does

MoodBubble allows users to capture and share their emotional experiences tied to specific locations.

Key features include:

Mood Bubble Posts: Users can upload mood entries associated with the places they visit.
Social Connections: A friends system allows users to view, share, and react to each other's Mood Bubbles.
Live GPS Location Tagging: Entries can be posted with precise geographic coordinates using real-time GPS tracking.

Together, these features create a location-based social experience centered around emotional expression and storytelling.

How we built it

Frontend

TypeScript
Tailwind CSS
Figma Maker (design + prototyping)

Backend

Supabase

Hosting

Vercel

Challenges we ran into

Crafting clear and effective AI prompts to help generate and refine project ideas.
Debugging integration issues between frontend and backend components.
Selecting appropriate tools and workflows for creating the project demo video.

Accomplishments that we're proud of

Successfully leveraging AI-assisted design to develop the MoodBubble concept.
Integrating AI capabilities within Figma using the MCP feature to accelerate UI development.
Maintaining consistent debugging cycles and iterative UI optimizations throughout development.

What we learned

How to integrate AI workflows into the design process using Figma MCP.
The importance of clear prompt engineering when using AI tools during development.
Strategies for rapidly iterating on UI/UX within a hackathon timeframe.