 Resources from Ali Spittel in 2022

In this course, we'll build a video course platform using the AWS Amplify Admin UI. 

The Admin UI provides simple yet powerful tools to model database tables, add authentication and authorization, and manage app content, users, and groups. It also offers the ability to manage the application users and content. 

The AWS Amplify Admin UI focuses on data types rather than backend infrastructure. 

All the backend resources generate infrastructure as code (IaC) templates that can be committed in the team repository and integrated with AWS Amplify continuous deployment workflow to manage the different environments.

Before taking this course, you should have a basic understanding of React Hooks.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Get Started with the AWS Amplify Admin UI

In this course, you will learn all about AWS Amplify and how you can leverage it to handle authentication and authorization in your applications.

Ali Spittel takes all of this and puts it in one streamlined package that will get your users signed in, creating, and accessing data in the blink of an eye! Amplify helps you configure serverless backends with authentication, storage, and data, using intuitive workflows. 

Amplify abstracts a lot of deep auth mechanics away from you, the developer, and allows you to harness the power of backend development without needing deep cloud knowledge. At the end of this course, you will be able to Build a React App with Authorization and Authentication from scratch.

Bite-size video tutorials for badass web developers.

egghead

Build a React App with Authorization and Authentication using AWS Amplify

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

Using the `open` function, and the `as` and `with` keywords, we'll open up and read from a file. At the end of this lesson, you will be able to loop through the lines of text in a file, process the text in Python, and then print them to the terminal.

Read from a File in Python

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

We have a parent HTML element that takes up the height and width of the page. We will make that parent element into a flex container, and then vertically center its child element using `align-items: center;`. Finally, we'll use `justify-content: center;` to horizontally center the element.

Center an Element Horizontally and Vertically using Flexbox

Cascading Style Sheets bring order and beauty to our applications.

We'll use `display: grid;` to make our parent element into a grid container. Then, we'll use `grid-gap` to add a gutter between our elements. Finally, we'll use `grid-template-columns`, the `repeat` function and `fr` units to create equally sized columns for our layout.

Create a Card Layout with CSS Grid

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

You can create diffs in markdown to show what has changed in a code snippet. I use this in blog posts to highlight changed lines for readers. This works for code snippets in most markdown packages and on Dev.to.

To show a line of code changing in a function, you can do this:

```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```

First, instead of specifying the programming language, use diff after the backticks. Then at the beginning of any lines of code you want to show as removed, add a -. At the beginning of any lines of code you want to show as added, add a +.

The code would look like this:

````
```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```
````

Create a Diff in Markdown to Show What Has Changed in a Code Snippet

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this video, we'll test out a schema created in the Amplify Admin UI locally. You will be able to test out your data without an AWS account. We'll first create a React app, then install the necessary dependencies, pull in our Amplify-created backend, and then add create and read functionality to a Course model.

Use an AWS Amplify DataStore Backend in a React Application

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

We'll deploy our backend generated using the Amplify Admin UI to AWS. Once deployed, we'll use the Admin UI's CMS functionality to create data. We'll also sync our deployed application with our local frontend.

Deploy an AWS Amplify Backend

In this video, we'll create the schema for a video course platform using the AWS Amplify Admin UI. Head to [the Amplify Sandbox](https://sandbox.amplifyapp.com/) to get started.

We'll create two models: Video and Course and add fields and a relationship to them. Once our data is modeled, we'll clone down our project and create a React application we'll use our backend in.

Create a Database Schema using the Amplify Admin UI

In this video, we'll add authentication to our app using the Amplify Admin UI. Then, we'll use the `withAuthenticator` higher order component to add sign-in and sign-up functionality. We'll also create users and groups in the Admin UI dashboard. Finally, we'll implement authorization roles to our data in the Admin UI.

Add Authentication to an Amplify App

In this video, we'll first create a form for our video model. Once a new video is created, we'll upload the video file to Amazon S3, which we'll enable via the Amplify CLI. Finally, we'll display a video on our page.

Use AWS Amplify to add Amazon S3 Static File Storage

In this video, we'll host a `create-react-app` generated React application to AWS using the Amplify Console. First, push your code to GitHub, then configure your deployment in the Amplify Console.

Use the AWS Amplify Console to deploy a React App

Now that our data models are deployed, we need some data to be able to view on our application. We can take advantage of AWS Amplify's autogenerate tool to create some sample data for our posts and our blog. 

Create Sample Data using AWS Amplify's Auto-Generate seed data

Now that we have our sample data, we need to create authorization rules for our different users. We are going to create rules for our unsigned-in users, our signed-in users, and for our Admins. 

Configure Authorization on AWS Amplify

To be able to have our data public, we first need to deploy our data models. We will click deploy and follow the prompts. 

Deploy Data Models on AWS Amplify

To start with our application, we first need some content to display on our app. In sandbox.amplifyapp.com, we can create two models, our Post and Blog models that we will populate with data.  

Create Data Models using AWS Amplify and Populate Data

To be able to create a new post, we can use AWS Amplify's `DataStore`. We are going to create a button that will prompt the user to fill in two fields, a title and the content. Then using DataStore.save we can save that user's post then console.log it to see that it will automatically auto-populated the owner's fields on the model when the new post is created.

Create New Posts using AWS Amplify's DataStore

To get our data from AWS, we are going to use `withSSRContext`. This will fetch our data on the server-side so we won't need to rebuild the site every time we get a new blog and the front end will be more performant.  Server-Side Rendering is an abstraction built on top of GraphQL so we don't have to write GraphQL queries.

Fetch Data Server Side using withSSRContext

To get the data of a user that is signed in, we are going to use `Auth` from AWS Amplify. Auth allows us to do a number of things such as get the `currentAuthenticatedUser` and give the ability of our users to `signOut`.

Sign In and Out Users using AWS Amplify's Auth

To be able to view our data on an application, we are going to create a next.js app in the terminal. We need to install aws-amplify and aws-amplify/ui-react. Lastly, we need to link up our front end with our backend. AWS Amplify makes this easy by literally giving us the code that we just need to paste into our terminal. 

Link your AWS Amplify Backend to your Frontend

We have finished building our next.js app with AWS Amplify authentication! Now we want to display our app for the world to see. We first need to create and push our code to a repository. Then, in the amplify console, we go to frontend environments and follow the prompts, click save and deploy, and you're done!  

Ali Spittel