O'Reilly logo
live online training icon Live Online training

Full-Stack React: Build and Publish a Modern Web Application

Leverage React, Node.js, MongoDB, and AWS to Create a Full-Stack Site

Shaun Wassell

Most developers are used to working on only one part of a web application - the front-end, back-end, database, or ops. In the past this made sense, since each piece of a web-application was written in a different programming language and required a lot of platform-specific knowledge to work on effectively. However, this is no longer the case. With the rise of technologies such as React, Node.js, MongoDB, and Amazon Web Services, developers are now capable of creating, publishing, and managing entire web applications on their own.

The implications of this shift are huge. For businesses, it means that large development teams with complex hierarchies and endless meetings are no longer a necessity, and can be replaced with small, lean teams of talented full-stack developers. For entrepreneurs, it means that small, software-based businesses can be created far more quickly with less initial investment than before.

Of course, in order to take advantage of all this, developers must understand all the key concepts behind full-stack development. Once you learn how each piece works and how all the pieces fit together, it becomes possible to create large, performant, maintainable web applications very quickly.

What you'll learn-and how you can apply it

  • How to rapidly create a front-end using React and a back-end using Node.js and MongoDB
  • How to effectively communicate between the front- and back-end using React Hooks and the Fetch API
  • How to build and host a full-stack site using AWS so that it can be accessed by anyone worldwide

This training course is for you because...

  • Front- and Back-end Developers who want to better understand how all the parts of a web application work
  • Intermediate to Advanced Javascript Developers who want to know how to create a full-stack site from scratch
  • Developers who want to learn the “ops-side” of things and have the ability to host and manage their own sites

Prerequisites

  • Must have basic familiarity with Javascript and Node.js

Course Set-up:

  • Install Node.js and NPM
  • Install MongoDB locally
  • To make the example site we’re building look good, I’ll be providing some CSS, and probably the basic app setup (GitHub repo will be provided) - you’ll need to clone this repo
  • Open a “free-tier” AWS account
  • Open a github account

Recommended Preparation:

Recommended Follow-up:

About your instructor

  • Shaun is a lifelong programmer and problem-solving addict. His goal is to help people build incredible software and solve meaningful problems by mastering the art of software development. He currently works as a Senior React Developer, but also has a lot of side gigs, including consulting, freelance development, and online education. Don’t hesitate to get in contact with him if you enjoy his materials.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Segment 0: The App We’ll Be Building (15min)

  • The App
  • The Technology
  • The Benefits

Segment 1: Creating a Front-end with React (35min)

  • Creating and Running a React App
  • Adding the Router and Pages
  • Building the Home Page
  • Building the Articles List Page
  • Building the Article Page
  • Adding Upvotes
  • Adding Comments
  • Break (10min)

Segment 2: Creating a Back-end with Node.js and Express (35min)

  • Creating and Running a Node Server
  • Testing a Server with Postman
  • Creating the articles endpoint
  • Creating the upvotes endpoints
  • Creating the comments endpoints
  • Break (10min)

Segment 3: Persisting Data with MongoDB (35min)

  • Setting up a local MongoDB instance
  • Rewriting the articles endpoint
  • Rewriting the upvotes endpoints
  • Rewriting the comments endpoints
  • Break (10min)

Segment 4: Connecting the Front- and Back-end with the Fetch API (35min)

  • Installing the Fetch API polyfill
  • React hooks
  • Loading articles from the server
  • Loading comments from the server
  • Loading upvotes from the server
  • Break (10min)

Segment 5: Building and Hosting our App on AWS (35min)

  • Preparing our app for production
  • Creating and setting up an EC2 instance on AWS
  • Committing and pushing our local code to github
  • Pulling our code to AWS
  • Building and running our code on AWS

Course wrap-up and next steps (10min)