The Dinosaur Search App

Module 10, the dinosaur search app. Over the past nine modules, we've covered a lot of ground. We've learned about React and the part that players is a modular, component- driven approach to building modern responsive frontends. Not only that, but we've. Hooked it up to an API and made it more data-driven, explored the common hooks they're offered, baked right into React, and 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 built thus far. Hopefully by now, your React knowledge has grown to immense proportions and your feeling confident in your ability to recognise the core concepts and build your own applications in this popular, powerful library. 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 paleontologists 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 favourites 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. So, we have a simple navigation up top and we start our journey to 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 a search results page where we see the list of matching dinosaurs. From here we can favourite them directly which will add them to a list in global app status, allowing users to visit them in a separate area once we've logged in. If you want to find out more about our particular dinosaur we simply click the button or the dinosaur'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 allow a then logged in user to view their save favourites in a convenient list. Planning out the build With larger, more complex apps such as this, even as an MVP where the functionality might be barebones to begin with, it can be helpful to start by mapping out two things. A user journey off-floor and 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 never get 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 systems such as React where modularity is the key. I've already mocked these two things out for you to give you a flavour of how this could look, so let's take a quick peek and see how they can be very useful tools. So here's an example navigation floor or user journey for our small dinosaur search in app. You can see that we start our users out by hitting the search page which will act as our home or default landing page. This kicks off the main floor of the app which should work like this. From the starting page users trigger a search for a dinosaur. Next, they're taken to a results page to see a list of matching dinosaurs returned from the API. From here they can keep searching or choose to view specific details of a particular dinosaur on the DINL details page. If they wish to sign into the app they can visit the login page from any of the main navigation pages, but they can only view the favourite page once they've authenticated. So users must visit the login page first and then the favourites. Of course once they're logged in we'll enable the favourites link from the main navigation so they can get to it anytime, but for the purposes of this flow diagram we want to explicitly call out the deliberate need to visit the login then favourites. This is quite a simple diagram, but we're only building a relatively simple app , even though it'll be more complex than the projects we've built so far. You might see lots of different versions of this sort of flow diagram in the wild, from actual flow diagrams with the correct diagram structures and types to rough hand drawn sketches and everything in between. Sometimes they may be larger in nature encompassing more of the app all at once , or they might just show the floor for a particular area of functionality. Whatever their approach, the aim is to give you an at a glance view of how the user will flow through various distinct parts of the pages within your app. They can help immensely during the planning phase of any app you're going to build. We're not going to dwell on the wireframes for too long as I'm sure you're keen to get building and put your react muscles to good use. Let's move through the rough and ready wireframes for each of the pages we saw in the previous flow diagram. You can see that each page's wireframe is much like the flow diagram, quite simple and low-fi. What we're doing here is getting down on paper, so to speak, the general idea of which parts of the UI will live on which pages and roughly how they're intended to look. Again, in the wild you might see lots of different versions of this sort of thing from hand drawn sketches, physical paper models to really simplistic low- fi versions through to full-on UI mock-ups made by design teams. Just like the user journey diagram, the idea with wireframes is to give a general starting direction for the feel of the UI. What sort of data will be displayed on the page and what where and with which key interaction points, things like animations, parts of the UI that switch or change and so on. There helps so much by providing a reference point that you can keep coming back to whilst building the component or part of the application. Building the app. With this being a larger, more complex app than we've built thus far in the course, the remaining lessons in this module will be broken down like this. In lesson two, we'll get all of the projects scaffolding and setup done, including looking at the API we'll be using and adding in the skeleton react router structure. In lesson three, we'll add in some services that will act as a kindly data-f airying middleman, providing data to our components and updating items in our Redux star. In lesson four, we'll flesh out the components in the UI parts of the app. And finally, in lesson five, we'll fire everything up and bask in our mighty coding glory as we take the dinosaur search app for a test flight. Let's dive in and get cracking. Inhale.