Inspiration
We were inspired to build this project by some of the issues we faced. We noticed that when making choices together, we often did not agree on the same things. Specifically, we often could not decide on the right movie to watch. And as many people today have to try to agree on a movie remotely, we wanted to build a solution that would make it easy for groups to choose a movie in real time. Consensus aims to reduce these issues by choosing for you, while taking everyone's opinions into account.
What it does
Consensus allows users to choose a movie to watch from a variety of options. Consensus allows each individual user to provide their input on which movies they would like or would not like to watch, based on the genres they like, and takes the input of the users until each person in a room has found at least one movie they would like to watch. Consensus then allows users to rank the movies, and weighs the rankings to provide users with the final movie choice.
How we built it
Consensus was built with HTML, CSS, and JavaScript, as well as Flask for the backend
- We used Tailwind for the CSS and styling, and used the TMDB API to get information for the movies.
- We used Flask to host the webpage as well as to manage users and user inputs from the webpage.
- We used socket.io to allow for users to join rooms, as well as communication between each user and the server to make sure that everything was synchronized within a room. Socket.io was used on both the HTML-CSS-JS frontend to send and receive information to be displayed and the Flask backend to manage and process client requests.
Challenges we ran into
As this was our first time working with socket.io, there were quite a few challenges with that. Specifically, in making sure that info was sent to the right user(s) at the right time. One such challenge was when trying to keep track of how many users had joined a room. Though we had thought that it would be something that could be detected by the Flask server, we soon realized that would not work. Instead, we came up with a different solution: to keep track of the people in a room in a .csv file and update it whenever a new user joined. Another challenge with socket.io was with making sure that all users in a room had voted before moving onto the next movie. This proved tricky as knowing how many users had submitted was not something easy to check, but we fixed this issue by having small boxes on the voting page that allowed for the user to synchronize how many users had finished voting.
This was also our first time working with Tailwind, so we did have one main challenge with that: margins and padding. We had never before used margins and padding to style a webpage but realized that it was a better tool than using line breaks, so we learned these. With enough trial and error, we found the ideal values for each for each element.
Accomplishments that we're proud of
We are proud of the fact that we were able to code a webpage with tools we learned this weekend, which were socket.io and Tailwind. With socket.io, we were able to have the webpage send and receive information without reloading the page, which we never thought possible before. This opened our eyes to so many more possibilities within coding. With Tailwind, we realized that styling a webpage did not have to be too difficult, as tools existed that could allow for easy styling through class names that also looked great.
What we learned
Through this project, we learned about two main ideas:
- First, we learned about websocket technology and the ways in which dynamic web apps could be made. All web apps we had previously made were mostly static, with page info only changing when the url changed. But with websocket technology, we learned that there was even more we could do by leveraging websockets, including user rooms and synchronizing user pages.
- Second, we learned about the importance of communication within collaboration. With this project, we were constantly communicating and checking in with each other, to make sure we were on the same page for everything. This meant that if one person did not understand how to do something, the other could help out in a timely manner, which was how we kept Consensus on track and how we finished it on time.
What's next for Consensus
The next steps for Consensus will be to use Consensus for more things other than movies. With different APIs, Consensus could be used as a selection tool for books, games, etc.
Log in or sign up for Devpost to join the conversation.