MoodLoom

Inspiration

I’ve always believed that self-awareness is the foundation of personal growth—but most mood tracking apps feel bloated, clinical, or intrusive. I wanted something radically simple. A mood tracker that felt like a quiet companion, not a therapist or taskmaster. That’s how MoodLoom was born: a minimalist space to gently reflect on how you feel and start noticing patterns, without judgment or friction.

The name "MoodLoom" reflects the idea that our emotional states aren’t isolated—they weave together over time, forming patterns we can learn from.

What it does

MoodLoom is a minimalist mood tracking Progressive Web App that helps users log how they feel throughout the day, add optional notes or activity tags, and view their emotional history over time. With a dark-mode-only design and mobile-first interface, MoodLoom is built to be effortless, calming, and reflective—helping users build emotional self-awareness without friction. No sign-up, no distractions—just you and your moods.

How we built it

Frontend: HTML, CSS, and JavaScript with a focus on a clean, dark-themed UI State Management: LocalStorage for persistent client-side mood logs (no backend needed) Data Model: Each mood log includes a timestamp, mood icon, optional note, and tags Visualization: A simple timeline view helps users look back and reflect on previous entries PWA Support: Enabled installation on mobile devices and offline support Design: A focus on intuitive one-tap logging, slideable views, and minimal distraction

Challenges we ran into

Data Persistence Without a Backend: Storing structured data locally meant building a lightweight, custom solution that could still support sorting, filtering, and future export. Visualizing Emotions Without Clutter: Mood tracking apps often overwhelm users with charts. I had to experiment with ways to convey history meaningfully while keeping it calm and clean. Balancing Features with Minimalism: I had to resist the urge to add “just one more thing.” Every extra option risked making the app feel like work instead of reflection. Mobile Optimization: Making sure the app was tappable, scrollable, and intuitive on all screen sizes required fine-tuning every layout and gesture.

Accomplishments that we're proud of

Built an entire mood tracker from a single prompt using AI-powered code generation. Seamless user experience with one-tap logging and intuitive navigation. Offline support and installability through PWA implementation—works like a native app. Dark, soothing aesthetic that fits the emotional tone of the app. No backend needed: All mood data is stored locally, preserving privacy and simplifying deployment.

What we learned

How to design mobile-first interfaces that feel intuitive and fast. The importance of restraint in feature design—simplicity is often more valuable than a long feature list. How to structure and store data efficiently in the browser’s LocalStorage for long-term mood tracking. That visual rhythm and spacing (even in a simple log) dramatically affect emotional tone and user comfort.

What's next for MoodLoom

Mood trends and charts: Visual analytics to identify patterns and streaks over time. Reminder notifications: Gentle nudges to log your mood and stay consistent. Mood-based quotes or affirmations to encourage reflection or upliftment. Tag and filter system for better mood categorization and retrospection. Optional account/login system (e.g. Firebase) to sync data across devices while keeping things private and minimal.

Built With

• framer
• javascript
• localstorage
• react
• tailwind
• vite