Exploring the app

[00:00 - 00:10] Lesson 5, exploring the dinosaur search app. We've put in a lot of hard work up to this point and all your knowledge of reactors letters here where we'll fire up both the API project and the Frontend React app.

[00:11 - 00:23] We'll have an explore through the pages, enter some data, save some dinosaurs' favourites and make sure everything's working as expected. Rest assured that the code we've been working along with has been tested and worked without any problems.

[00:24 - 00:34] That said, no system is ever 100% bug free and there are a lot of different variables of player here. Not least of all is that this is the most complex project we've built in the course and has the most moving parts.

[00:35 - 00:53] Your local system being different to others, you've entered the code whilst copying along with lessons, silly or minor errors present in the code to begin with and using the system in an unintended way or in a way that hasn't been cared for. React does a pretty good job of surfacing errors for us and you will usually find them in the terminals console or in the browser dev tools in the console area.

[00:54 - 01:03] For the API you'll have to rely on the terminal windows log for this as any errors that happen in the API side will be output here. Should the worst happen just restart the API with the yarn start command.

[01:04 - 01:18] If you come across errors and 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].

[01:19 - 01:27] You can also check in on the error reporting information in module 1 lesson 4 reporting errors and getting to port. The best place to start is to run the API.

[01:28 - 01:44] 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.

[01:45 - 01:52] Yarn start. Nothing exciting will happen here but all things being equal you receive a message saying listening on port 4000.

[01:53 - 02:08] Once you see this message you'll know that the API is running and we can move on to the starting up the main client face in React app. With the API worrying away in the background let's navigate to the client folder from the project root in a new terminal window and use the same yarn command to start it .

[02:09 - 02:20] Yarn start. This time once the files are built and React is ready to go you'll see the main search component i.e. the home page displayed in your default system browser.

[02:21 - 02:30] Let's take a good look through the app and see how it works. I'm going to bypass searching for a dinosaur and hit the "I'm feeling lucky" button because you know what I am feeling lucky today.

[02:31 - 02:44] Look at that we've been taken to the browse root and shown a list of dinosaurs fetched from the API by the dino service. Because the "I'm feeling lucky" root to this page includes selecting a random character to search on your results will differ to mine here but hopefully you've got a similar result.

[02:45 - 02:55] However, I'm not happy with the choice made for me so I'm going to browse for dinosaurs whose name start with "R" just like mine am. I'm drawn to the "Rinchenia" here so I'm going to mark her as a favourite.

[02:56 - 03:04] Next I'm going to look at "K" because of my last name. This time I'm going to mark the "Kentrosaurus" as a favourite because it's almost like the "Kendelaurus" right?

[03:05 - 03:13] In fact let's take a look at the "Kentrosaurus" in more detail. I'll click on the "C" details button here and see a bigger picture and some top stats.

[03:14 - 03:27] Notice as well that since I've favourited this little guy when I've viewed the details for him, the favourite heart in the top right of the info box is already filled in indicating that he's firmly in my favourites list in our app state. Let's check out the favourites list to see what's what.

[03:28 - 03:40] First however I'll need to sign in. If I try to sign in with just a username we'll get a quick loading animation on the button as we talk to the API but then we'll get errors and a nice message telling us that there was a problem.

[03:41 - 03:49] Remember that the API is set up to only throw logging errors where either or both use an name and password at empty. Literally any value in both boxes will sign you in.

[03:50 - 04:03] If I try again with the password this time I'll be signed in and escorted to the home page where I can now view my favourites from the extra link in the navigation bar. Over on the favourites page we can see the "Kentrosaurus" and "Rincinia" sitting proudly amongst my top dinos.

[04:04 - 04:13] If I remove one then it's instantly removed from state via the Redux mechanisms we built early on in the module and now I'm left with a single dino in my top list. And this wraps up the "DinoSource" search app.

[04:14 - 04:28] There's just one more lesson to go where I share some heartfelt thanks for having you join me for the course and I'll offer some next steps and thoughts on additional learning paths to bolt on extra skills and round out your development profile as a front end of Fullstack Developer. I look forward to seeing you in the next lesson.