Learning Objectives
With this assignment you will demonstrate:
- The ability to create and deploy a React Web Application
- The ability to fetch and display data from a public API
- Knowledge of asynchronous JavaScript
Readings and Videos
Please:
- Read docs on the React site.
- Review all applicable course notes.
- Take Eve Porcello’s class on LinkedIn Learning (She has on older course here if you feel like you need to see things twice, but remember it is a bit oder). Please note these videos use the no-longer-supported project Create-React-App (CRA) instead of Vite, so you’ll need to mentally think in terms of Vite whenever you see CRA in the video.
- As time allows, go through The Net Ninja’s Full Modern React Tutorial. (Also skip the Create-React-App parts if you see any.)
- Read from the beginning through Chapters 3, and Chapters 5 and 6 of the Git Book.
Instructions
Submit in BrightSpace links to your CodeSandbox or Replit.
The Project
You will be creating an interactive React Web Application for fetching data from an API and displaying the data as you like. Be creative, but also work toward creating an application that would actually be useful. You can use any API that you find: it can be for music, food, restaurants, museums, weather, you name it.
Need some API ideas? Try
this one,
this one,
or (especially)
this one.
Use the techniques learned in class during our Pokémon API code along.
As in your first homework assignment, ensure your app:
- Uses a background image or gradient
- Uses grid and flex
- Is responsive: it must look good on mobile and web (narrow or wide screen)
- Has a nice “title’ (perhaps an h1 element)
- Has a fun image or two
- Is visually balanced and aesthetically pleasing: Use colors and contrast properly! Line things up! Get a designer friend of yours to critique your work
- Has a detailed README.md file, that not only explains the project (as a real README should), but also with a link to where the app is deployed.
- Is built from code (all files) that is flawlessly formatted, and that means that you not only indent and space 100% consistently, but that you are also perfectly consistent with blank-line spacing where necessary. (Prettier will help with most things.)
- Is run through an HTML and an accessibility validator