Skip to Content
View all events

Hands-On Full-Stack Development in 3 Weeks

Published by Pearson

Intermediate content levelIntermediate

Create a Scalable Serverless Application with React, Node, and MongoDB

Do you want to learn how to make an entire web application, top to bottom? Over 3 weeks, you will create a production-ready application complete with a ReactJS front-end; an auto-scaling serverless back-end written with ExpressJS, NodeJS, and AWS Lambdas; authenticated user accounts with AWS Cognito; and a scalable Mongo database. By the end of the course, you will have created a powerful MERN stack web application.

This course:

  • Is a multidisciplinary challenge including front- and back-end development, database management, AWS Infrastructure, and even a bit of networking.
  • Enables you to create authentication for user sign-up and sign-in
  • Teaches you how to test your code regularly with continuous integration
  • Gives you a strategy to create separate local and remote environments

Week 1 we start by planning the data structures used in our application. Then we create and style a ReactJS front-end to display that information. Next, we create an ExpressJS back-end API in NodeJS to power our front-end. Finally, we set up a Mongo database locally and store our data there. Your homework is a challenge to create your first full-stack application, locally.

Week 2 we deploy our database to an AWS EC2 instance. Next we deploy our API to a AWS Lambda function and configure access from the Lambdas to our database EC2 instance. Then we deploy our front-end to Netlify. Your homework is a challenge to deploy your full-stack application to AWS and Netlify.

Week 3 we create an AWS DocumentDB running MongoDB to allow scaling our database. Next, we add authentication using AWS Cognito and update our application to allow user-based records. Finally, we set up continuous integration with GitHub actions. After the class you will be able to access all our code samples on GitHub and you’ll be ready to build some amazing applications.

What you’ll learn and how you can apply it

By the end of the live online course, you’ll understand:

  • The role of React, Express, Node, and MongoDB in a full-stack application
  • What application scalability means and how to achieve it
  • The basics of serverless infrastructure and related concepts

And you’ll be able to create:

  • A hosted React application that interacts with an API
  • A serverless API using ExpressJS and AWS Lambdas
  • Authenticated requests and private user data
  • A scalable MongoDB style database with AWS DocumentDB

This live event is for you because...

  • Front-end or back-end developers who want to be able to work in the entire stack of their applications.
  • Experienced JavaScript developers who want to learn to build full-stack applications.
  • Developers interested in creating production-grade scalable infrastructure for their full-stack projects

Prerequisites

  • Must be familiar with JavaScript and Node.js. No React experience needed.

Course Set-up

Recommended Preparation

Recommended Follow-up

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

Week 1 - Local Full-Stack

Introduction (15 minutes)

  • Class overview
  • This week's tools: React, Express, and MongoDB
  • Plan project and data structures

Crafting the Front-End with React (50 minutes)

  • Start a new React app
  • Add pages and router
  • Create interfaces for CRUD operations

Exercise: Start a React Project (10 minutes)

Crafting the Back-End with Node.js and Express (40 minutes)

  • Create a local Node.js server
  • Create a REST API for our data structures
  • Test our API using browser or Postman

Exercise: Start an ExpressJS project (10 minutes)

Store Data with MongoDB (45 minutes)

  • Run MongoDB locally
  • Update endpoints to save to MongoDB
  • Exercise: Save data to MongoDB with an endpoint (10 minutes)

Connect Front-End and Back-End (45 minutes)

  • Use Fetch API to read and write data
  • Display results on the page
  • Create loading indicators

Introduce Week 1 Assignment, Q&A (15 minutes)

Week 2 - Remote Full-Stack

Recap Week 1 Assignment, Q&A (10 minutes)

Introduction (15 minutes)

  • Lesson overview
  • This week's tools: AWS EC2, AWS Lambdas, GitHub and Netlify

MongoDB on EC2 (30 minutes)

  • Create an EC2 instance using the AWS Console
  • Set up SSH and connect to the instance
  • Install and run MongoDB on the instance

Exercise: Create MongoDB on EC2 (15 minutes)

Create our Lambda Function (35 minutes)

  • Initialize AWS Amplify in your project
  • Add API and test Lambda function with an express app
  • Investigate the resources created in AWS Console
  • Learn how to deploy and update our Lambda

Run our Express API in Lambda Function (50 minutes)

  • Connect our Express API to the Lambda
  • Touch on AWS networking and permission
  • Configure access to the EC2 instance
  • Create local and production environments
  • Discuss CORS

Exercise: Use Amplify JS to create a Lambda function (10 minutes)

Deploy Front-end (30 minutes)

  • Building for production
  • Deploy to Netlify
  • Create local and production environments
  • Handle multiple routes on Netlify

Exercise: Deploy to Netlify (10 minutes)

Set up domain (20 minutes)

  • Connect a domain name to Netlify
  • Connect a subdomain to the API

Introduce Week 2 Assignment, Q&A (15 minutes)

Week 3 - Authentication, Scalability, and CI/CD

Recap Week 2 Assignment, Q&A (10 minutes)

Introduction (15 minutes)

  • Lesson overview
  • This week's tools: AWS Cognito, DocumentDB, GitHub Actions

Create DocumentDB (20 minutes)

  • Create the AWS DocumentDB which implements MongoDB
  • Connect Lambda to DocumentDB
  • Discuss scalability
  • Cost difference
  • Discuss other database options

Add Auth to project (30 minutes)

  • Add auth module using AWS Amplify
  • Add auth UI
  • Modify auth UI
  • Discuss custom authentication flow
  • Block interface unless user is signed in

Exercise: Add auth to your project (10 minutes)

User created records (45 minutes)

  • Find user’s Cognito “sub”
  • Create records owned by a user
  • Only allow an authorized user to modify or delete their records
  • Generate account records on user creation

Exercise: Create post confirmation lambda function (10 minutes)

Update front-end to reflect user permissions (30 minutes)

  • Hide edit options when not created by me
  • Add account endpoints
  • Display user information

Write tests (20 minutes)

  • Write a React test
  • Set up API testing
  • Write an API test

Break (5 minutes)

Continuous Delivery (25 minutes)

  • CI vs CD
  • Create GitHub action to deploy API
  • Create strategy to deploy front end
  • Create a rollback strategy

Q&A (10 minutes)

Conclusion and Next Steps (10 minutes)

Your Instructor

Jim Hall

Jim Hall is a software engineer with over 12 years of experience building software. His experiences range from front end engineering to dev ops and everything in between. He is currently Engineering Manager at Munetrix where he oversees and contributes to dev ops, application development, project planning, and data transformation processes. Jim is thrilled by the capabilities of the new and powerful tools available to engineers today. The possibilities are endless!

linkedinXsearch

Skill covered

Software Development