🎬 MoodFlix
Inspiration
Whenever a good film ends, we’re always left wondering: “What should we watch next?” Most streaming platforms show generic recommendations that feel only loosely connected to our interests — or worse, overwhelm us with endless scrolling.
We wanted to fix that.
MoodFlix was born out of a desire to help people rediscover their love for movies through a more thoughtful, emotion-driven search experience. Instead of relying on popularity metrics, our app lets users explore films by mood, genre, keyword, or title, turning indecision into discovery.
What began as a DubHacks project has grown into something we plan to continue refining and expanding beyond the hackathon.
What It Does
MoodFlix allows users to search for films by genre, title, or even by entering loose keywords that describe how they feel — whether that’s cozy, thrilling, or heartwarming.
- Users can combine multiple genres to get precise results that fit their mood.
- Each movie card flips to reveal an overview, rating, and details for a more interactive browsing experience.
- The interface feels calm, intuitive, and personal — like browsing a shelf of your favorite DVDs, not a cold database.
How We Built It
We developed a responsive frontend interface using React (Vite) for fast rendering and seamless state management. Our data layer was built from a real-world movie dataset, cleaned and parsed using PapaParse to handle thousands of entries efficiently.
We dynamically fetched movie posters through the TMDB API, implemented local caching to reduce redundant calls, and created a flipping card system for smooth transitions between movie information and visuals.
Key technologies:
⚛️ React + Vite
🧮 PapaParse for CSV parsing
💅 Custom CSS theme with Nanum Pen Script & Inter fonts
💾 LocalStorage caching for performance optimization
Challenges We Ran Into
Cleaning and structuring real-world data — Many movie entries lacked consistent formatting, requiring manual normalization for genres, ratings, and descriptions.
Poster retrieval by title — Without IMDb or TMDB IDs, we had to build a custom search and caching system to fetch posters via title-based API lookups.
Design balance — Finding a color palette and font pairing that felt cozy yet cinematic took several iterations (our final “Lantern” theme struck the perfect tone).
Time constraints — Integrating APIs, styling, and dataset preprocessing in under 24 hours was an exercise in efficiency and teamwork.
Accomplishments
Building a complete, functioning web app that delivers a real cinematic browsing experience.
Creating a flipping movie card UI that makes exploration tactile and satisfying.
Designing a calm, hand-drawn-inspired interface that invites people to linger and discover.
Learning how to manage data pipelines, API integrations, and responsive design — all within the fast pace of a hackathon.
Takeaways
Beyond just coding, we learned how important it is to design for emotion. A technically sound product isn’t enough — users connect when the experience feels personal and human.
We also strengthened our collaboration and version control workflow, balancing design, development, and data cleaning under tight deadlines. The project gave us valuable exposure to working with messy real-world datasets and scalable frontend architecture.
What’s Next?
We plan to:
Integrate an AI chatbot that helps users describe what they’re in the mood for — refining search results through natural conversation.
Build an AI-powered recommendation system inspired by Netflix, using user behavior and sentiment to generate personalized film suggestions.
Expand our dataset to include shows, documentaries, and other media forms, creating a universal “what to watch” assistant.
Our long-term vision is to make MoodFlix the go-to platform for anyone who doesn’t know what to watch next — a comforting guide for every movie night.
Made with ❤️, ☕, and a touch of indecision at DubHacks 2025.
Log in or sign up for Devpost to join the conversation.