Furry Friend Gallery app
We're going to build on the previous Hooks demo by creating a dog picture gallery. First though, let's take a look at what we're going to build.
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.
Lesson 3, the furry friend gallery. So for our big demo in this module we'll be building on the previous example a dog picture gallery for this time with a few enhancements. Let's take a look at the app to see what we'll be building. So you can see we've got a much improved UI thanks to the Bulma CSS framework. We're accepting a number of dogs to search for from the user. We're displaying the dog pictures in a flexbox grid and also a keeping track of how many dogs pictures have been searched for today. This will also be our first for air into development using the Create React App Starter Project provided by Facebook themselves. We're not building anything super complex just yet but there are a few moving parts to consider and some judicious use of both the use state and use effect hooks.