-
-
landing page
-
ask permission
-
sad
-
relaxed
-
angry
-
happy
Inspiration We wanted to create something that helps people connect with their emotions in a fun, interactive way. In our fast-paced world, we often forget to slow down and check in with ourselves. VibeCheck was inspired by the idea that entertainment can also be a tool for reflection and self-care. Whether you're feeling happy, sad, angry, or relaxed—this app guides you toward using that emotion meaningfully.
What it does VibeCheck is a mood-based entertainment companion. It lets users either type how they feel or use their webcam to detect their mood (happy, sad, angry, or relaxed). Based on that mood, the app:
Plays a YouTube video or playlist that matches the emotion
Changes the background color or animation to reflect the vibe
Suggests simple actions users can take to embrace or shift their mood
For example, if someone feels sad, it might play chill lo-fi music, show a soft blue background, and suggest journaling or deep breathing.
How we built it We used the following tools and technologies:
React for the frontend and component structure
Tailwind CSS for styling and responsive UI
getUserMedia API for webcam input (when enabled)
YouTube embeds to match and play mood-based music
JavaScript logic to map moods to content and actions
All stored and handled client-side — no server or database needed
Challenges we ran into Tailwind CSS didn’t apply properly at first due to config issues with PostCSS
Handling camera permissions and fallback logic for browsers that block it
Embedding YouTube videos dynamically without breaking layout
Keeping the UI clean and responsive while switching states (mood, video, suggestions)
Accomplishments that we're proud of Fully functional and polished web app with no external dependencies
Clean, mobile-responsive design that works across devices
Achieved a smooth user flow from mood detection to suggestions
Built the entire project quickly and efficiently using only free tools
What we learned How to integrate media APIs like getUserMedia for real-time interactivity
How to debug Tailwind setup and dynamically apply mood-based styles
The value of keeping things simple when working under time constraints
How to design mood-based user flows that are both emotional and useful
What's next for VibeCheck Add real AI-based emotion detection using face-api.js
Integrate OpenAI to allow natural language mood input and smarter suggestions
Add journaling, history tracking, and streaks for emotional reflection
Launch VibeCheck as a free Chrome extension or mobile-friendly web tool for students
Log in or sign up for Devpost to join the conversation.