Inspiration
Our project for UCF's 2021 Hackathon is a movie and TV show recommendation site, called the Movie Roulette. We chose this idea because we personally had problems with choosing a movie to watch in a limited amount of time and thought that this would be a quick solution for narrowing down our options.
What it does
The main function of the Movie Roulette is to recommend a show to the user based solely on a genre of their choosing. After they choose their genre, a show is randomly chosen from a list of shows that share a similar theme and is then displayed to the user. More information about the selected show is available, and options for rerolling the randomized show are available.
How we built it
The project is built upon an HTML frontend with CSS styling and JavaScript elements for the user interface, with a JavaScript backend to query the names, descriptions and the genres of different movies using the IMDB API. When you open the website, you are prompted to select what genre of movie you’d like a recommendation from. You click your response and the API generates a list of movies and TV shows that share a similar keyword to the genre. A single show is selected randomly from that list and is presented to the user. Clicking on the show reveals more information about the show, including a small summary and major actors. If you are unhappy with your show selection, you can choose to reroll the roulette, where you are presented with the choice of keeping your previously chosen genre, or to pick a new one.
Challenges we ran into
The problems we faced were learning how to create, use and implement APIs, communicating as a team to manage our time effectively and finding resources that would help us build this project. Many of our members were also new to Figma, and had to learn how to use and design layouts during the hackathon. There was also a problem of not being able to generate a list of shows based solely on the genre of a show; when we used a genre name (such as Action, Fantasy, Horror), we were given a small amount of results compared to using another keyword that is used to describe different parts of the show (such as Fight, Monster, Sword).
Even though we were unable to finish the project before the deadline, we were able to get the frontend working with a functional website and the ability to generate API calls from the backend. However, we were unable to fetch the JSON information from the APIs and utilize them in the frontend.
What we learned and accomplishments that we're proud of
Jay: From this Hackathon, I learned how to use Figma and made the basic design for how the website looked like and functioned. Even though I started without knowing any web development skills, I ended this weekend knowing how to push and pull commits from Github, how to host a live web domain and how to make a user interface.
Vishal: From this project, I've learned how to design and create a multi-page website using HTML, CSS, and JavaScript. I also improved my abilities in communicating and discussing with others to reach a consensus, in this particular case being the visual elements of the website. Furthermore, I have improved in my abilities to find helpful information and code under time constraints. I feel accomplished in building a multi-page website largely on my own, while needing to keep the hackathon's time restrictions in mind.
William: I built the backend API utilizing Express.js and Node.js to obtain values. It was my first time using Express so I learned more about how to use Express and get data from the IMDB API.
What's next for Movie Roulette
If we wanted to expand this website, we could have it give you a recommendation based on the cover art of another movie, a set of movies that you wish-listed, movies that were released in the same decade, and other factors that can relate movies together.
Log in or sign up for Devpost to join the conversation.