Over the past nine modules we’ve covered a lot of ground. We’ve learned about React and the part it plays as a modular, component-driven approach to building modern, responsive front ends.

Not only that but we’ve:

• Hooked it up to an API and made it more data-driven.

• Explored the common Hooks on offer, baked right into React.

• Extended the core React functionality with third-party libraries such as React Router.

You should be feeling pretty pleased with yourself for completing the projects we’ve build thus far. Hopefully, by now, your React knowledge has grown to immense proportions and you’re feeling confident in your abilities to recognize the core concepts and build your own applications in this popular, powerful library.

Introducing the Dinosaur Search App#

In this final module, we’ll be pulling together all this React knowledge and building a more comprehensive app, The Dinosaur Search App. Imagine we have a team of palaeontologists who need to be able to look up information on a range of known dinosaurs. We can build an app to help them search for dino info and save a list of their favorites to refer to later. It’ll all be powered by an API that retrieves a list of all required dino data.

Let’s jump right in and take a look at what we’ll be building:

We have a simple navigation up top and start our journey at the main search page. From here, we can either enter a name (or part name) of a dinosaur and search on that, or hit the ‘I’m feeling lucky’ button and be taken to a page of results filled with dinos whose names start with a random letter of the alphabet.

Either option leads to the results page where we see a list of matching dinosaurs. From here we can favorite them directly which will add them to a list in the global app state, allowing users to visit them in a separate area once they’re logged in.

If we want to find out more about a particular dinosaur, we simply click the button or dino’s name and we can visit a special details page with all the information neatly laid out, including a picture of the beast in question.

Finally, we can simulate a sign-in process which will then allow a logged-in user to view their saved favorites in a convenient list.

Planning out the build#

With larger, more complex apps such as this, even as a minimum viable product, where the functionality might be bare bones to begin with, it can be helpful to start by mapping out two things:

• A user journey or flow.

• Some basic wireframes.

The user journey allows us to roughly map out which parts of the app connect to each other and how a user might navigate around an app from a given starting point. With the wireframes, we’re really aiming to loosely pin together our intended UI, placing components into groups, breaking down sections into more modular chunks and trying to think about what will live on what page or pages — especially important in a system such as React where modularity is key!