Demo Application

Now that we’ve practiced with different YouTube Data API endpoints, we can use them to build a React application.

Application workflow

When we run the application, the first page we see is the homepage of the application. The homepage has two main components:

Navbar: This component contains three buttons and a search bar:

• Search bar: In the search bar, a user can search for a YouTube video by passing a query.

• Home button: The Home button can be used to route the user to the Home page of the application.

• Playlist button: The Playlist button can be used to route the user to the Playlist page of the application.

• Channel button: The Channel button can be used to route the user to the Channel page of the application.

Video Cards: This component is used to display videos with their titles and channel names. A user can play any video by simply clicking on the video's card.

Run the demo application by clicking the “Run” button in the widget below. When the server starts, click the URL next to “Your app can be found at:” to view the application.