From Concept to Cloud: Mastering Full-Stack Web Development

The goals of this course are to give you the basic requirements and tools needed to complete this course successfully. We will cover installing a code editor, Docker, Nodejs, as well as setting up an AWS account and giving your Github account permission to interact with it.

Please note I'm using macOS as my operating system so the entire course will be taught with that in mind. If you are using a Windows OS some terminal commands and installation steps may be different but I do not cover those differences and that is up to you to figure them out.

Installing Visual Studio Code as your primary code editor

Installing Docker

Get Node.js (JavaScript engine that can be run without a browser) & Yarn (An optional alternative package manager you can use instead of NPM) downloaded. Reminder you do not need to use Yarn for this course but I will be using Yarn and all of the lessons will show you Yarn commands instead of NPM commands.

Set up an AWS account for the first time, if you already have an AWS account setup you can skip this lesson.

Set up multi-factor authentication (MFA) for your AWS account to ensure it's more secure. If you have MFA setup you can skip this lesson or if you don't want to set it up you may also skip this lesson. Fun fact I once had an AWS account without MFA setup and a malicious 3rd party was able to log into my account and charge me over $14,000 in AWS service fees in one day.

Creating an AWS access key for the root user (not recommended but if you'd like to set up an access key on a user feel free to do so). The access key will give you the ability to use AWS from your Comand Line Interface (CLI).

How to download the AWS CLI

Storing the AWS access keys, we created from the previous lesson, in the correct folder on macOS. This allows our CLI to understand where our access keys are so we can connect to AWS.

Linux & macOS access keys will be stored here: ~/.aws/config

Windows access keys will be stored here: C:\Users\USERNAME\.aws\config

Setting up an OpenID Connection establishes trust between Github and your AWS account so GitHub can perform actions on AWS on your behalf.

Please make sure you have a GitHub account setup before doing this step.

We are creating a role for our OpenID Connection which will be used by all our AWS resources that Github will eventually interact with.

The goals of this course are to teach you how to define a NoSQL database given the requirements of your application. We will be setting up Nodejs scripts that will seed data to our DynamoDB tables locally from our computer.

Set up a new GitHub repository for all database related files, ensure you have SSH keys setup, and make an initial commit to that repo.

Set up a new Nodejs project, install dependencies, & configure Typescript.

Define the Typescript types/interfaces of the data we will be seeding into our database

Adding your /build folder to a .gitignore file

Adding an initial set of seed data.

Writing a method to create an AWS DynamoDB with the AWS SDK.

Writing a method to describe an AWS DynamoDB table with the AWS SDK. Describing a table checks to see if a table exists, and if it does it will give you some basic information about it.

Writing a method to delete an AWS DynamoDB table with the AWS SDK.

Writing a method to insert a record in to an AWS DynamoDB table with the AWS SDK

Combining all the methods we created prior, we will take all the data from our initial seed data file and seed it into our vendors DynamoDB table.

The goals of this course are to teach you how to setup up a basic AWS VPC that will allow you to build an AWS system that can communicate internally and with the outside world. We will be describing how to build your VPC with code written with Terraform scripts in HCL (Hashicorp Configuration Language). Lastly, we will use some DevOps CI/CD (continuous integration continuous development) workflows by building your Terraform scripts with Github actions.

Set up a new GitHub repository to store all networking related files.

Setup a .gitignore file specifically for Terraform files.

Inorder to track Terraform state changes we need to setup an S3 bucket to store the Terraform state file.

Actions allow us to pass secure secrets from our GitHub repo into our GitHub actions and onto Terraform files. In this course, we will insert the necessary GitHub action secrets.

Creating a GitHub actions file in the repository that GitHub can execute on all pull-request/commits to the main branch.

The main.tf file defines what provider we building on. In this course we will be building on AWS with the provider hashicorp/aws

The variables.tf file defines all the variables that we will be using throughout all the terraform files in this repo.

We attach our first policy to our OpenID Connect (OIDC) role.

Attach the rest of the policies to your OIDC role.

Creating a basic AWS VPC with Terraform.

Creating public and private subnets on AWS with Terraform.

We create an Internet Gateway, Nat Gateway, and Elastic IP with Terraform. This allows us to connect to the internet from these subnets without letting unsolicited traffic in.

Creating a Route Table with Terraform.

The goals of this course are to teach you how to interact with the Twitter API using Node.js to get tweet and location updates of the vendors we are tracking in real-time. We are going to use this real-time data to update our database and update our front-end clients using web sockets.

Signing up and creating a Twitter developer API key.

Set up a new GitHub repository for all Twitter service related files.

Set up a new Nodejs project, install dependencies, & configure Typescript.

Creating a GitHub actions file in the repository that GitHub can execute on all pull-request/commits to the main branch for the Twitter service.

Define the Typescript types/interfaces we will reference throughout the Twitter service.

Similar to what we did before we are writing a method to describe an AWS DynamoDB table with the AWS SDK for the Twitter service.

Writing a method to scan an AWS DynamoDB table with the AWS SDK using a generator function.

Writing a method to get all the paginated scan table results using the scan table method we created in the previous lesson.

Writing a method to update existing records in a DynamoDB table. We are specifically inserting new tweets into the tweets field on the vendor record.

Writing a method to send a message to an AWS SQS queue.

Twitter streams require users to have rules which act as a filter for the tweets we want to receive. Our goal is to receive tweets from vendors in our database that also have geotags enabled.

Writing a method to get the Twitter stream rules we previously set.

Writing a method to delete all set Twitter stream rules. Every time we use the Twitter service we want to make sure we’re starting fresh with a new set of rules. If we restart the service with a new set of vendors we want to make sure our old rules are removed.

Writing a method that will parse the tweets we receive from the Twitter stream into a more friendly format for our application and database.

Writing a method to connect to our Twitter stream.

Combining all the methods we used together to start the Twitter stream.

Writing a method to satisfy a healthy response from our health check. ECS sends a request to an HTTP endpoint periodically and expects a 200 response in return. This is called a health check and it’s there to make sure your service is running otherwise it will spin down your service.

Writing our starting point function that put all the code we wrote together to run our Twitter service.

Writing a Dockerfile to tell Docker how to build the code for our Twitter service.

Defining the provider we are building on.

Defining all variables used for the Twitter service Terraform files.

Storing our .env secrets as a JSON document and saving it in S3.

Creating permissions for our Twitter service to interact with various AWS services.

Creating a Loadbalancer for ECS in Terraform.

Creating our ECS resources in Terraform.

Creating our SQS resources in Terraform.

With our Twitter service up and running on AWS we are going to test our Twitter stream, real-time tweets, DynamoDB updates, and SQS queue.

Now we’re at the final stage of setting up our backend and we need to be able to interact with the services we created. We are going to create two things first, the logic for the WebSocket what do we do when we get a tweet and who do we send it out to, and second an HTTP endpoint that will give the user all the vendors and tweets when asked for. We will use API Gateway to manage all our API endpoints and Websockets and lambda functions to execute our code.

Set up a new GitHub repository for all API & Websocket service related files.

Set up a new Nodejs project, install dependencies, & configure Typescript.

Creating a GitHub actions file in the repository that GitHub can execute on all pull-request/commits to the main branch for the Twitter service.

Create a connection table in DynamoDB to store the IDs of all users connected to our websocket.

Create a method to add a websocket connection id to our DynamoDB connections table.

Create a method to remove a connection id from our DynamoDB connections table.

Writing a method to remove a message from an SQS queue.

Broadcast a message to all users connected to our WebSocket.

Create an AWS Lambda function to handle connecting to the WebSocket.

Create a Dockerfile to build our connect Lambda function and test it with Docker locally.

Create an AWS Lambda function to handle disconnecting from the WebSocket.

Update our Dockerfile to build our disconnect Lambda function and test it with Docker locally.

Create an AWS Lambda function to handle sending vendor information to users connected to the WebSocket.

Update our Dockerfile to build our send vendor Lambda function and test it with Docker locally.

Create an AWS Lambda function to handle getting all our vendors via an HTTP GET request.

Update our Dockerfile to build our get vendors Lambda function and test it with Docker locally.

Creating permissions for our API Gateway/Lambda services to interact with various AWS services.

Setting up all our Lambda functions on AWS with Terraform

Setting up an API Gateway on AWS with Terraform

Testing connecting, disconnecting, & sending messages to our WebSocket endpoints while hosted on AWS

In the final section, we are going to create a UI to utilize all of our backend services and show a kick-ass app to our frontend users. We will be using Next.js which is a React framework that helps us to use server-side rendering with React. To deploy all this we’re going to use AWS Amplify which is a web development service for AWS they happen to make deploying SSR applications on AWS with Amplify easy otherwise it would be a more complex task.

Create a personal access token on Github that will be used to allow AWS Amplify to interact with our Github repo.

We are going to create a Google maps developer API key.

Set up a new GitHub repository for all Next.js related files.

Set up a new Next.js project, install dependencies, & configure Typescript.

Copying a Dockerfile from Next.js Github repo into our project.

Creating a GitHub actions file in the repository that GitHub can execute on all pull-request/commits to the main branch for the Next.js project.

We remove the default CSS styles and HTML code that was created when we initialized our Next.js project.

Define the Typescript types/interfaces of the Vendor data we will retrieve from our API.

Create a function that will call the getVendors API to retrieve paginated vendor data.

Using the getStaticProps method from Next.js we will call our vendors API to serve our vendor data with our HTML.

Create a container component that will hold our map component.

We render the map within the map wrapper that contains our map component.

Create custom styles for your map or add pre-created styles for a little bit of flair.

Deeply compare your vendor tweets so your map updates correctly if a new tweet comes in.

Send vendor data taken from our top-level Main component and pass it down into our Map component.

Display your vendors on the map with map markers!

Fixing the issue where markers disappear on a Next.js project save refresh.

We setup the lefthand dashboard that will display all vendors we are currently tracking.

Create a tile that will display all the food truck information on the dashboard.

Setup a basic infinite scroller inside the Dashboard component.

Fill out the next() function to populate the infinite scroller with paginated vendor data.

Sort the vendors on the dashboard showing the most recently updated one at the top.

Connect to the WebSocket hosted on our API Gateway.

Create event listeners to handle WebSocket connection and send message events.

Defining all variables used for the Twitter service Terraform files.

Defining the provider we are building on.

Creating permissions for Amplify to interact with various AWS services.

Deploy an AWS Amplify project with Terraform.

Build your project on AWS Amplify so it can be hosted and shared with the world!

Cleanup any AWS services that may be costing you money.