This is a video search app built within a React/Redux course and has been slightly modified. The app connects to the YouTube API and lets users search for and display a list of videos, select one of the results and play it in the browser. The key adaptation made to this app was layout related, I created mobile and widescreen modes. This was done by creating a function that checks for screen width and displays a mobile or widescreen class name that sets the styling for either class of device.

React was used to create components within the app. These components are written in JSX, a markup language, and this is then converted to html in the browser via Babel.

This app features a custom hook. Hooks are techniques used by React that allow functional components to emulate the functionality of class-based components (CBCs). Hooks are a condensed way to mimic functionality that is more verbosely scripted in CBCs. By combining different hooks, in this case useEffect and useState, we can create a custom hook that lets us separate out logic related to functions that would otherwise be duplicated in multiple places in a code-base. This simplifies maintenance of this code, and makes it reusable by multiple components.

In this case, the custom hook extracts video fetching logic from a component and makes it easily available to others.

• Axios: Lets us make asynchronous requests (ie. requests that take a finite amount of time) to our API server

• components: all React components

• hooks: contains the custom hook

• apis: Axios clients, ie. functions that form the basis for requests made in this case to our YouTube api

This app is hosted on Netlify.