Furry Friends Gallery Mark II
Our code-along project for this module is to build a new Furry Friends Gallery. This time, we'll be using a new API and common UI patterns such as a sidebar filter. In this lesson, we'll take a look at what we'll be building.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Beginner's Guide to Real World React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Beginner's Guide to Real World React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[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.