Demo Application

This lesson walks us through a React application that integrates Vimeo APIs. We used the following endpoints in the application workflow:

1. Get categories

2. Get all channels in a category

3. Get all groups in a category

4. Follow/unfollow a category

5. Search videos

Workflow and APIs

Let’s dive into the code and see how we’ve integrated different Vimeo APIs into our React application.

• For our React application, index.js renders the App component, as implemented in App.js, as a root component. We have a folder named components that contains all the components we use in this demo application.

• The App component file contains all the workflow and routes of the application.

  • Line 2: We import important libraries and components.

  • Lines 7–10: We define headerParameters object that is passed to every component to use for API calls.

  • Lines 15–35: We define BrowserRouter component that defines all the routes for the application and components to render.

• The Navbar component is defined in the Navbar.js file, and it renders the navigation bar, which is accessible throughout the application. In this file, we show a Vimeo logo and a search bar.

• The Home component is defined in the Home.js file that shows all the categories from Vimeo using the endpoint defined in line 5.

• The Category component is defined in the Category.js file that shows the details of a single category like videos, follow/unfollow status for the authentic user, and links to its groups and channels. We make four API calls in this component, three endpoints are defined in lines 9–11, and one is defined in lines 30 and 37.

• The CategoryChannels component is defined in the CategoryChannels.js file that utilizes one endpoint, which is defined in line 8 to show channels of the category that we clicked from the Category component view.

• The CategoryGroups component is defined in the CategoryGroups.js file that utilizes one endpoint, which is defined in line 8 to show groups of the category that we clicked from the Category component view.

• The SearchQuery component is defined in the SearchQuery.js file that gets rendered when we click the "Search" button in the navbar. This takes the query entered in the search field and fetches all the related videos. If the search field is empty, it fetches random videos from Vimeo.

Note: We use a custom hook, useFetch, defined in useFetch.js to fetch the data from any API endpoint.

Demo

Click the “Run” button in the widget below to start the application and click the URL next to “Your app can be found at:” to view the application in the new tab.

Note: The following widget shows only the required files to show the functionality of the demo application.