 Resources from Ali Spittel in 2021

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

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Getting Started with Hasura

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

First, head to [hasura.io](https://hasura.io) and create a free account. Then, create a new project using a Herkou database. Just like that you'll have a Hasura instance up and running!

Create a Hasura Project on Hasura Cloud

Over the course of the next few videos, we will be creating a simplified Twitter clone with users and statuses on Hasura. We will create two tables, `users` and `statuses` and add a foreign key between them. We'll also populate the databases using Hasura's interface.

Create Tables on Hasura

In this video, we run a SQL query and a GraphQL query and mutation in Hasura, demonstrating the multiple ways you can access data.

Querying Data in Hasura

In this video, we will make a fetch request in JavaScript in order to demonstrate requesting data from a Hasura endpoint.

Fetching Data Stored in Hasura

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.

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

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 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.

Topics

Instructors

Content Type

Free or Pro

Ali Spittel