Skip to main content

📓 Full Stack Development Project

While we've worked on both front and back end skills throughout our time at Epicodus, in this course section we'll have the chance to practice something entirely new — combining what we've learned from our back end class (either C#/.NET or Ruby/Rails) with what we've learned of JavaScript and React. In a nutshell, this means practicing your skills as a full stack developer.

So in this course section you'll complete a multi-day project with a pair where you combine a back end API (that either you or classmates made) 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 on 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 either you or classmates built during your back end language class. 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 project — however, throughout the course section, the API 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. While creating a React front end and using a C#/.NET or Ruby/Rails API is required, you can spend as much or as little time as you want on building out the back end API further.

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

  • Two repositories, one for the back end and one for the front end.
  • The README for the API should document all endpoints, include local server deployment instructions, and include a link to the repository for the front end project.
  • The README for the front end should include local server deployment instructions as well as a link to the repository for the API.
  • The React front end should receive data from the back end API and the UI should update based on this data.

Here are some other goals to consider:

  • Deployment of both the API and the front end
  • Authentication/authorization so that only the front end React application can communicate with the API (challenging — but an opportunity for students that are particularly interested in working on their back end language further)

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 and a backend in C#/.NET or Ruby/Rails.

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 this project, don't pass up this opportunity to work on a portfolio piece and build your skills as a full stack developer.