Furry Friends Gallery Mark II

[00:00 - 00:52] Lesson 2, furry friends gallery Mark 2. For module 4 our project is going to be based on the foundation of the furry friends gallery we built in the last module. Here's what we'll be building. We've replaced the original input box that allowed users to choose the number of pictures to display with a sidebar containing a breeds filter. When the user select a breeds radio button, the dog pictures in the right hand pane refresh using an API call. The list of breeds in the sidebar is also pulled from the API. What's more you'll be able to page this list using previous and next buttons, each page being fetched directly from the API. This mechanism of filtering and listing data items and page in those data items, all while interacting with an API endpoint, is a very common pattern in web development. Although it seems that we're just listing and filtering pictures of cute dogs, I'm sure you can already recognise this familiar layout pattern from just about every online shop or product category page.

[00:53 - 01:14] We'll be using the Create React App Starter project again to quickly scaffold our project, as well as the excellent Axios Http client package to handle our API calls in data fetching. We'll broach the subject of a data handler to act as a middleman between our API and our components. For this project, we're going to use a slightly different API for our dog picture needs, the dog API Dogs as a Service.