Skip to main content
Version: v1.4

📓 3.5.0.2 React with APIs Development Project

Almost all of our work so far has lived on the front end. The one exception was the React with NoSQL section, where Firestore gave us a hosted database to read from and write to without building a server ourselves. This course section takes the next step: pulling data from public APIs that we don't control at all. Consuming someone else's API is an everyday part of front-end development, and it's also a great way to build a portfolio piece that does something real with live data.

For now, in this course section you'll complete a project where you connect any public API of your choosing with a React and TypeScript front end.

For this project, you will do the following:

First, find a public API that you're interested in utilizing.

Ultimately, it's up to you to decide how you want to proceed with this project.

By the end of the course section, your project should include the following:

  • One repository with your React front-end application.
  • The README for the project should have clear instructions for setting up an API key if required
  • The README for the front end should include local server deployment instructions if applicable
  • The React front end should receive data from the API and the UI should update based on this data.
  • You may also consider deploying your project, though be sure to check with your APIs documentation about rules and requirements to consider.

The useReducer() Hook and React Context​

We'll learn how to use the useReducer() hook to make an API call, as well as how to use the React tool "context" to share data between components to create a toggleable light and dark theme in the Help Queue. While it's important to become familiar with both of these tools, you are not required to implement either tool in your projects for this section.

Again, the biggest goal for this course section is to create a complete application with a React frontend that consumes an API of your choosing.

Further Exploration​

In this course section, we will provide further exploration lessons on the following topics:

  • Mobile development with React Native
  • SEO with React
  • Custom React environments
  • Data visualization
  • Animations and interactivity

These lessons will provide only a brief overview of each topic. They are meant to broaden your knowledge of a range of topics relevant to React development. While you are not expected to deepen your knowledge of any one of these specific topics, we recommend exploring and implementing something outside of the curriculum in your project for this section. That includes any further exploration topic provided in the lessons or something from your own exploration and research. The goal of the further exploration is to encourage you to differentiate yourself and learn skills that separate you from other entry-level developers.