Skip to main content

📓 React with APIs Development Project

So far, we've only really touched on the front-end world of development for web applications. In the next course, you will be learning the ins and outs of databases and back-end development techniques and best practices. At the end of C#, you will be able to create your own API to store and fetch data. Until then, this current course section will serve as a good introduction into using React to call upon APIs - and in the future, you may choose to combine a React and C# application as a full-stack project.

For now, in this course section you'll complete a multi-day project with a pair where you connect any public API of your choosing with a React front end. Alternatively, you may choose to combine forces with another pair and do a mini group project that combines a back end API with React. Note that these projects will not be presented at the end of the course section — however, they are a great opportunity to improve your skills and put together a portfolio piece.

For this project, you will do the following:

First, find an API that you and your pair(s) are interested in utilizing. You may reach out to other Epicodus students to use their C# APIs if you are feeling ambitious! If other students built this project, make sure to clone or fork the project. It's okay if multiple pairs/groups start with the same API source — however, throughout the course section, the projects will likely change as different pairs build out different functionality.

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, and optionally a second Forked repository if using another upper cohort student's API.
  • 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 back end API and the UI should update based on this data.
  • You may also consider deploying your projects, 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 this week.

Again, the biggest goal for this course section is to create a full stack 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 this week — 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 your classmates.

While teachers won't be evaluating the project you and your peers will be creating, don't pass up this opportunity to work on a portfolio piece and build your skills as a full stack developer.