Turntable Television

This image is currently processing. Please be patient...

Inspiration

We originally wanted to create a program for groups watching "Bandersnatch", but upon both finding out that it would be too difficult to design and that we weren't passionate about the project, we switched to a problem everyone had faced: not knowing what movie to watch. We originally planned for a spinner and animation using a server but switched to "Turntable Television", a webapp that picked a random movie from a list of movies.

What it does

Turntable Television takes in a list of as many movies as a group needs - whether it be 3 people with 2 movies to watch or a group of 20 with 30 movies - and picks a random one. By picking a random movie, we solve the issue of not knowing which movie to go with when in a group.

How we built it

We built Turntable Television using CSS and JavaScript, specifically node.js, react, next.js, and zeit for deployment and hosting. On the front end, mockups were created using HTML and CSS and then transferred to the backend which used node and react to add functionality.

Challenges we ran into

A major challenge that we ran into was implementing the front end into the backend. Because of the ways that react handles CSS, it was not as simple as copying and pasting a CSS file. We had to implement each element's CSS individually using in line CSS. Using APIs was also a challenge, as the JSON file it returned had many imperfections that required adjustment using the substring method as shown:

var JSONString = xmlHttp.responseText.substring(2, xmlHttp.responseText.length - 1);
var movieJSON = JSON.parse(JSONString);

Accomplishments that we're proud of

We are proud of, despite being complete beginners, building a basic web app that accomplishes its goal. We were able to work as a team to build Turntable Television into a functional product.

What we learned

We learned the basics of full stack development and how front end and back end developers work together to build 1 website. We also learned the basics of HTML, CSS, and JavaScript along with JS libraries like node and react.

What's next for Turntable Television

We want to better integrate the front end to allow for animations and other visual features using CSS. We also want to add functionality for TV shows and other forms of media.