Youtube App

Working with the YouTube API I created a simple app that has a main video and a clickable playlist underneath. All information is pulled from a playlist I specified using YouTube’s API. The project was originally created using jQuery however, I updated the project and converted everything to React.

Here is a video I made that was picked up by freeCodeCamp on their YouTube channel for the original project.

When I converted to React I used Create React App to create my app then moved on to spliting out my components.

Along with the JSON I receive back, I also get a page token, allowing me to create a load more button at the bottom to keep the weight of the data down when clicked the fetch function is called again and the DOM re-rendered. The next page token was stored in the state along with the current video, so then when a playlist Item is clicked the video updates.

It was an interesting project to take it from HTML, CSS and Javascript/jQuery to a React App, some bits became easier with react, others became a bit more tricky.