Work

Mood Map

Technologies Used
NextJS
Tailwind
Firebase
SweetAlert2

Mood Map is a web application designed to help users track their daily moods, providing insightful visual references and statistics.

Website GitHub
A screenshot of the landing page of Mood Map

Mood Map - Track Your Daily Moods with Ease

“What gets measured, gets managed.” – Peter Drucker

Mood Map is a personal project I developed to track daily moods on a scale of 1 to 5, with 5 being “Excellent.” Users can log their mood and visualize their emotional journey using a color-coded system—mine is set to a range of pink hues, as seen below.

A screenshot of Mood Map's dashboard with different mood stats

Features of Mood Map

  • Mood Tracking Calendar:
    The app includes a fully custom calendar system that accurately displays past and future months with correct start and end dates. Users can seamlessly browse previous months to reflect on their emotional patterns.

  • User Authentication:
    Leveraging Firebase v11, users can sign in securely using their email and password. Authentication is seamlessly managed through Firebase Auth, providing a smooth onboarding experience.

  • Data Persistence:
    Mood data is stored securely in Firestore, ensuring that users can access their historical data anytime.

  • Quick Statistics:
    Users can quickly view their total days logged, average mood score, and remaining time to log today’s mood.

  • Responsive UI:
    The app is built with TailwindCSS, allowing for fluid responsiveness across all devices, from mobile to desktop. This project was a turning point in my experience with Tailwind, helping me appreciate its efficiency in building adaptive layouts.

  • Interactive Alerts:
    Using SweetAlert2, the app provides engaging pop-up messages to enhance the user experience.

A screenshot showing the login view of the app

Personal Journey with Mood Map

I came across the idea for Mood Map during a challenging time when my company underwent layoffs. Tracking my daily moods helped me gain perspective on how I was feeling and gave me insights into my mental well-being. The experience of building this app allowed me to channel my energy into something meaningful, and it became an essential tool for personal reflection.

Although the structure of the project is inspired by a content creator’s tutorial, I took the foundation and extensively customized the design, features, and functionality to suit my needs and vision.

Technical Highlights

  • Next.js 15: Leveraged for its robust routing and server-side rendering capabilities.
  • TailwindCSS: This experience solidified my confidence in styling responsive layouts.
  • Firebase/Firestore: My 10th project using Firebase/Firestore, this provides seamless data storage and authentication with scalable cloud features.
  • SweetAlert2: Enhanced the UI with user-friendly and visually appealing alert messages.

What I Learned

Working on Mood Map reinforced my skills in:

  • Building intuitive authentication systems with Firebase.
  • Structuring and storing data efficiently in Firestore.
  • Leveraging TailwindCSS to create responsive, scalable designs.
  • Creating engaging user experiences through modern UI components.

Mood Map has been an eye-opening project that not only enhanced my technical skills but also provided personal insights. I hope this project continues to evolve and help others track their moods effectively.