Exploring the Dinosaur Search App#

We've put in a lot of hard work up to this point and all your knowledge of React has lead us here - to where we’ll fire up both the API project and the frontend React app. We’ll have an explore through the pages, enter some data, save some dinosaurs as favorites and make sure everything’s working as expected.

Encountering errors#

Rest assured that the code we’ve been working along with has been tested and works without any problems. That said, no system is ever 100% bug free and there are a lot of different variables at play here, not least of all that this is the most complex project we’ve built in the course and has the most moving parts:

• Your local system being different to others.

• How you’ve entered the code whilst copying along with the lessons.

• Silly or minor errors present in the code to begin with.

• Using the system in an unintended way or a way that hasn’t been catered for.

React does a pretty good job of surfacing errors for us and you will usually find them in the terminal’s console or the browser’s dev tools in the console area. For the API you’ll have to rely on the terminal window’s log, as any errors that happen at the API side will be output here. Should the worst happen, just restart the API with the yarn start command.

If you come across any issues, it’s worth tracking back through the files and making sure that they match up with those from the course files. If you’re still stuck and things aren’t working as expected then you can always report the error to us here at newline via the support email [email protected]. You can also check in on the error reporting information in Module 1, Lesson 4, Reporting Errors and Getting Support.

Running the API#

The best place to start is to run the API. I’m using VS Code as my code editor and it has a nifty feature where I can split my terminal window; one side will run the client app and the other the API.

Either way, you’ll need a fresh, separate terminal window open. Once there, navigate to the /server folder from the project root and run the following command:

yarn start

Nothing exciting will happen here, but all things being equal you’ll receive a message saying “listening on port 4000...”. Once you see this message you’ll know that the API is running and we can move on to starting up the main client-facing React app.