Deliverables - Class Assignments

React Navigation

TIP

Due before 6:00 pm on Friday October 15, 2021.

In this project, you will build a simple master/detail application using React with React Router.

Screenshot

Watch the URL in the location bar to see how the navigation works. The User details page is showing the values of the match properties.

The image above is merely a concept demonstration that took 10 minutes to build. It is not feature complete, and I expect that you can improve the styling 😉

Instructions

• Use fetch() to asynchronously retrieve data from a remote API.

• Use the data from the RandomUser API (opens new window)

• For the request parameters use:

  • your own Algonquin username as the seed value
  • a number between 16 and 32 for the results value
  • format should be set to json
  • nat should be au,ca,nz,gb,us

• data that is downloaded should be saved in state, so it can be used and filtered repeatedly. Remember to keep the state values lifted up to a component that allows the data to be used everywhere it is needed.

• The Home page should display a welcome message and brief instructions on how to use the app.

• Your app should show a list of user cards on the User List page that display the values for name, email, cell, plus a medium or thumbnail image.

• There needs to be a link from each displayed card for more details for the selected user on a User Details page.

• The User Details page should show the base user info plus their full address (street, city, state, postcode), login information (uuid, username, password), and a larger image

• There should be a top-level nav menu link that routes the website user to a list <table> of all of the names and addresses sorted by last name. This is the Address List page.

• You can also link a row in the Address List table to the User Details page.

• If the user manually adds a URL that has no match then the app should redirect to the Home page or a 404 Error page. This is not a link in the menu.

• React Router (opens new window) should be used for all navigation.

• While data is being loaded in any component you should have a message/icon/indicator that data is loading. Animated is best because it gets the user's attention.

Testing Loaders and Spinners

In the Chrome Dev Tools Network tab, you can throttle the network speed. Try using Fast 3G or Slow 3G to see how your loading functions work.

Remember

Make commits as you complete each requirement. They should be atomic and have a meaningfully descriptive message.

Submission

• Create a private repo on GitHub with the name mad9135-c2-react-router.
• Invite GitHub user prof3ssorSt3v3 as a collaborator on your private repo.
• Submit the URL for your code repo to bs LMS.

DO NOT deploy to GitHub Pages ...yet

We will cover the details of how to deploy your React Router App to production next week and there will be a follow-up assignment just for that.