CineSwipe

Inspiration

Choosing a movie to watch, especially in a group, can be frustrating and time-consuming. Everyone has different preferences, so finding a film that satisfies everyone often leads to endless scrolling and debates. Inspired by the simplicity of Tinder’s swipe mechanism, we wanted to create a fun and efficient way for individuals and groups to quickly agree on a movie.

What it does

CineSwipe is a movie-matching web app that helps users decide what to watch with ease. Users can create or join a group swipe session through a code, where multiple users swipe through movies, and the app finds the best match for the group. Users can also filter the movies by genre to refine recommendations.

How we built it

We developed CineSwipe as a web application using React.js for the frontend, ensuring a smooth and dynamic UI. Firebase Authentication was used for user login and signup, whereas The Movie Database (TMDb) API was used to fetch movie details and recommendations.

Challenges we ran into

Our app has a waiting room, in which users can wait for the host to start the swiping session. At first it was tricky to display the number of people in the waiting room before a swiping session started. Since users join and leave in real-time, we needed a way to dynamically update the participant count without inconsistencies. Furthermore, the group matching logic was difficult to implement. Designing an algorithm that finds the best movie match for a group based on multiple users’ swipes was a complex problem to solve as we had to figure out where and how to store swipe data effectively. Since CineSwipe is a real-time app, we needed a storage solution that could track each user’s "yes" and "no" votes and update the group’s collective results in real time.

Accomplishments that we're proud of

Learning Firebase on the go and successfully integrating it for user authentication purposes.
Creating an intuitive and engaging user interface with React.
Genre Filters: We added filters that allow users to select the genres that they want to swipe through, making their swiping session more personalized. The genres were pulled through the ones available on TMDb.
Hackathon success and resiliency! We built CineSwipe with the tools and the knowledge that we had in 24 hours despite the tight deadline, unexpected technical roadblocks, and the need to rapidly learn and implement new technologies on the fly.

What we learned

The importance of UI/UX design in making an app feel intuitive and engaging.
Teamwork and time management, especially in a high-pressure 24-hour hackathon environment.
How to integrate Firebase Authentication and manage user sessions securely.
How to make an API call.

What's next for CineSwipe

Enhancing the recommendation algorithm to consider user watch history and preferences for better suggestions.
Adding chat functionality so users in a group can discuss choices before finalizing.
Expanding filters to include actor, director, and IMDb ratings.
Building a mobile app version to improve accessibility.
Using Gemini AI for more personalized recommendations in the deck of movie cards.