-
-
Homepage
-
After Clicking Suggest Song
-
Safe Space Section
-
After typing anxious in chat bot
Inspiration
As a student myself, I noticed how common mental health challenges like stress, anxiety, sadness, and loneliness affect many of us. Often, we struggle to find accessible and personalized support tools that can help uplift our mood quickly and naturally. Music therapy is known to be effective for emotional healing, so I wanted to create a simple, AI-powered web app that recommends mood-based music tailored to how users feel, making mental wellness more approachable and interactive for students everywhere.
What it does
MoodLift is an AI-powered web app that helps users manage their mental wellness through personalized music therapy. By analyzing user input for mood-related keywords, it detects emotional states like sadness, anxiety, or hopefulness and suggests curated songs that match their current feelings. Users can select their favorite artists and receive tailored music recommendations to uplift or calm their mood. The app also plays soothing background music after user interaction and lets users mark songs as helpful to track mood improvement over time. A dedicated “Safe Space” section provides additional mental health support. An AI chat system is also included.
How we built it
I built MoodLift using HTML, CSS, and JavaScript for a lightweight, accessible web experience. The app integrates with the Last.fm API to fetch real-time top tracks filtered by mood tags (such as “sad,” “chill,” and “happy”) and artist selection. Mood detection is implemented through simple keyword matching in user chat input, driving dynamic song recommendations. The background music feature is carefully implemented to comply with browser autoplay restrictions by initiating playback only after user interaction. LocalStorage is used to keep track of songs already suggested and mood scores, ensuring a personalized and evolving user journey.
Challenges we ran into
One major challenge was dealing with browser restrictions on autoplaying audio, which initially prevented background music from playing automatically. To solve this, I delayed music playback until after the user’s first interaction with the page, providing a seamless and compliant experience. Another challenge was designing an effective mood detection system without using complex AI models; I opted for keyword-based detection that feels empathetic yet straightforward. Ensuring that song recommendations did not repeat frequently and maintaining smooth user experience with API data also required careful handling.
Accomplishments that we're proud of
I successfully created an intuitive and empathetic tool that combines AI-driven mood detection with real-time music therapy recommendations. all in a lightweight web app without any paid APIs. The app encourages positive mental health habits by allowing users to mark songs as helpful, reinforcing healing progress. I also implemented a safe space for further support and designed a modern, accessible UI with a soothing red-themed gradient to evoke warmth and care. Overall, MoodLift demonstrates how technology can meaningfully support student wellness in an approachable way.
What we learned
I gained valuable experience integrating external APIs into a client-side app and managing user data persistently with LocalStorage. I learned about browser audio playback policies and how to adapt UX accordingly. The project deepened my understanding of mood-based recommendation systems and the importance of balancing AI complexity with usability. Most importantly, I learned how to craft technology solutions that are sensitive to mental health needs while maintaining simplicity and accessibility for a wide audience.
What's next for MoodLift
Next, I plan to enhance MoodLift by incorporating voice tone detection to better understand user emotions and recommend music more accurately. I also want to add a journaling feature to help users track their moods over time and reflect on their healing journey. Introducing AI-driven mental health tips and resources within the app will provide more holistic support. Finally, I aim to optimize the app for mobile devices and explore deploying it as a progressive web app (PWA) to enable offline access and notifications for regular wellness check-ins.
Log in or sign up for Devpost to join the conversation.