Inspiration

Believe it or not, over 500 hours of video are uploaded to YouTube every minute. As you could probably imagine, a lot of this content is complete garbage and nonsense, but can be entertaining to view nonetheless. Often times with our friends, we spend our time searching random queries on YouTube and sorting by new in order to view the worst of the worst the platform has to offer.

What it does

The application makes a query to the YouTube API to generate a list of videos based on a search term. This isn't just a normal search, though. Plenty of filters are applied to ensure that we get the worst quality videos that haven't been seen by anyone before.

How we built it

Our application is built on a React frontend, using jQuery and Foundation for Sites 6 as a CSS framework, with a node.js/express backend. Our group has significant experience with web development with Angular, but we wanted to get more familiar with React, due to its notably higher popularity in the modern day.

Challenges we ran into

Ryan: Naturally, after not having used React for almost a year, going back and relearning the differences between React and Angular was a big challenge. The organization of components in a React project is notably different in React, and remembering how to use JSX properly also was a big of a challenge. Beyond that, learning how to work from scratch on a React project, and not just a project given for an assignment, was also a big of a struggle at the beginning, as a lot of the things that I had previously taken for granted became problems this time around.

James: I ran into a lot of issues with YouTubes API. In fact, our original project idea was unable to come to fruition due to the limits of what the API could provide to us. A lot of time was spent on research and testing with the Google Youtube API, which proved to be frustrating at times.

Accomplishments that we're proud of

Ryan: Personally, my biggest accomplishment for this project was just being able to put everything together successfully. I made a lot of realizations along the way, both big and small, that allowed me to actually utilize all of the aspects of React in order to make a working project. I had a decent semantic understanding of how everything worked at the beginning, but I'm quite glad with the understanding I've gained with being able to design a working React project.

James: This was my first time working with APIs and authorization tokens, and even though I know I violated multiple best practices when using those, I still felt like I learned something and was able to create a functional project using a rather hacky approach, which really put my problem solving skills to the test. Also, this was my first hackathon! I'm impressed that we even got a functional project submitted to Devpost!

What we learned

Ryan: Among other things, this project gave me a fantastic opportunity to learn all of the work that goes into building and planning out a React project from scratch. Understanding how React components work, both individually and in terms of the whole project, and figuring out how to best structure the project to make everything work is quite difficult, and this experience definitely taught me a lot about doing that. Furthermore, this was my first time using Foundation for Sites, which I had to learn how to use completely from scratch.

James: Similar to Ryan, I really don't have much experience with creating a web application from scratch. Being able to create a fully functioning node/express app with HTTP requests really opened my eyes to how everything on the backend of a web server works, and taught me some new methods on how to approach common tasks.

What's next for YouTube S***player

Bug fixes! As you could probably tell from our video demo, not everything is 100% perfect. Ironing out some of these bugs that we didn't have time for during the hackathon would be our number 1 priority if we were to continue working on this project. Once that's done, we can focus on publicly deploying our full application.

Share this project:

Updates