Udemy

Platform

English

Language

Web Development

Category

Serverless React with AWS Amplify - The Complete Guide

Build full-stack React apps faster than ever, which scale to millions of users, and run entirely in the cloud!

4.68 (1099 reviews)

Students

8.5 hours

Content

Dec 2019

Last Update
Regular Price


What you will learn

Learn how to create stunning end-to-end serverless React apps

See how to rapidly build React apps; faster than you've ever built React web apps before!

Use and implement all of the major AWS services that are made available with Amplify

Discover how to make infinitely scalable React projects which run entirely in the cloud


Description

Do you want to make amazing, performant, and overall better React applications?  Look no further than AWS Amplify.

This course is the best guide you'll find to learn Serverless React App building.

In it, we will be making two complete React / AWS Amplify projects, from project start to deployment on the web.

Here's what we'll be making:

  • A Full-Stack Serverless Marketplace app (similar to Udemy), built with React / Amplify, a complete GraphQL API, Multi-Factor Authentication, Lambda Functions for charging customers / sending emails, Stripe for payment processing and the component library Element for styling

  • A Real-Time Notetaker App (made both with class components and React Hooks), with full CRUD functionality, GraphQL Subscriptions, complete Authentication and all written in ~100 lines of JavaScript

What will this course cover?

  •   Creating entire GraphQL APIs from the command line using the Amplify CLI 

  •   Building sophisticated serverless GraphQL APIs with AWS Appsync

  •   Multi-Factor Authentication and Verification Codes using AWS Cognito

  •   Creating serverless REST APIs (functions) with AWS Lambda that run entirely in the cloud

  •   Using GraphQL Subscriptions to Broadcast Data Changes in Real-Time

  •   Executing GraphQL Queries and Mutations both in the GraphiQL Console and in our React Client

  •   How to integrate React Hooks with Amplify applications

  •   Sending emails with Amazon's Simple Email Service

  •   Image and file uploads with AWS S3 Storage

  •   How to deploy our completed apps with S3 Hosting

  •   Customizing Amplify's built-in React Components

  •   Storing and managing our app data with a DynamoDB database

  •   Flexible, robust search capabilities with the help of AWS ElasticSearch

  •   Using Stripe for payment processing and using it in React Apps with Stripe Checkout

  •   Verifying user emails / phone numbers with email confirmations

  •   Working with the AWS Console extensively

  •   React Context for managing app state

  • React Router 4 (with some useful tricks)

  •   Formatting dates with the date-fns library

  •   Two CSS libraries in-depth -- Element and Tachyons


Screenshots

Serverless React with AWS Amplify - The Complete Guide
Serverless React with AWS Amplify - The Complete Guide
Serverless React with AWS Amplify - The Complete Guide
Serverless React with AWS Amplify - The Complete Guide

Content

Getting Started

What You Need for this Course

How to Get the Most out of This Course

Installing Amplify CLI Globally

Configuring Amplify CLI with AWS Account

Getting Familiar with the Amplify CLI

Setting up Notetaking App

Initializing Amplify with Amplify Init

Setting up our GraphQL API with Authentication

Generating an Entire GraphQL API off of our Schema

Configuring Amplify with React

Ridiculously Simple Authentication using withAuthenticator HOC

Using withAuthenticator to Auth Users (in 2 Lines of Code)

Exploring the Cognito Console / Enabling SMS Verification (Optional)

Creating the App UI

Executing GraphQL Queries / Mutations with AppSync

Running createNote Mutation from AppSync Console

Executing GraphQL Mutations on the Client

Async / Await with GraphQL Operations

Running listNotes Query in AppSync and on Client

Adding Update / Delete Operations to Notetaker App

Deleting Notes with deleteNote Mutation

Updating Notes with updateNote Mutation

Real-time Data with GraphQL Subscriptions

Subscribing to New Notes with onCreateNote

Listening for Deleted / Updated Notes

@auth Directive for Ownership of Notes

Using Future React (Today) with React Hooks (Optional)

Converting our app to React Hooks (Optional)

Deploying our App with S3 Hosting

Deploying our App with S3 Hosting

Initializing our App / Creating our GraphQL API

Initializing our MarketPlace App

Advanced AppSync Schema Creation

Customizing Amplify-React Components

Customizing withAuthenticator Theme

Authenticator Component / Listening for Auth Events with Hub

Creating Navigation and Signout Functionality

Adding New Markets / Managing App State with React Context

Adding New Markets

Adding Context API to Provide User Data

Adding Tags with our Markets

Easier GraphQL Queries with the Connect Component

Connect Component to Execute Queries

Handling Subscriptions with Connect

Powerful GraphQL Queries with AWS ElasticSearch

Creating our Search Input

Exploring ElasticSearch Queries in GraphiQL

Sort Parameter and Implementing Search Queries in the Client

Getting Individual Market Data

Adding Market Products / Uploading Files with S3 Storage

Build Form to Add New Products

Using / Styling our PhotoPicker Component

Adding New Products

Displaying Storage Upload Progress with Progress Component

CRUD Operations with Market Products / Real-Time Data with Subscriptions

Display Products / Adding Nested Fields to Auto-Generated Queries

Updating Products

Deleting Products

Subscribing to Product Mutations

Building out PayButton / Stripe Configuration

Serverless REST APIs with AWS Lambda / Processing Charges with Stripe

Introduction to Lambda Functions

Processing Orders with our Lambda Function

Sending Transactional Emails with Amazon Simple Email Service

Sending Emails with Amazon SES

Registering New Users with AppSync

Getting Owner's Current Email, Improving our Email Content

Requesting Permission to Move out of SES Sandbox

Creating New Orders

Building the Profile Page / Verifying Modified Emails with Verification Codes

Displaying Order History in ProfilePage

Sorting GraphQL Fields with the sortField Argument

Display Profile Data for Auth User

Getting Auth User's Current Attributes

Verifying Users' Updated Email Addresses

Prevent Users with Unverified Emails to Purchase / Add Products

Deleting Users' Profiles

Finishing our Marketplace App

Formatting Dates with Date-Fns

Next Steps


Reviews

D
David12 September 2020

The course was good and I learned a lot, but I found a few issues during the way. - there is a new version of amplify - the instructor was too fast and it was hard to follow him. I needed to slow down the video and/or rewind the videos a lot of times - there were different issues in the code due to the new amplify versions that required searching the internet and FAQ to solve. This took a lot of time, but also was good to learn how to deal with them. - the instructor doesn't seem to maintain this course anymore To sum up, the code was really good, but the I think it is worth 4 stars due to the issues above. In the other hand I understand that the quality and content is more than appropriate for the price.

S
Simon14 August 2020

So many courses skip this critical step of clearly showing exactly how to get started. Very easy to follow so far.

S
Sumit5 August 2020

Excellent course for getting started with Amplify quickly. My only complaint is that Reed might be going too fast for some people, especially in the second part of the course.

A
Adam18 July 2020

It’s pretty easy to follow but it is getting pretty outdated and needs to be refreshed. Needed to handle some additional setting and component-compatibility issues to progress in the course. Slowed me down quite a bit and even started over before figuring it out.

D
David2 July 2020

Nice one ! Could be even better if you could do a course with 2 complete applications such as the marketplace one. Thanks!

R
Ramakrishnan18 February 2020

1. Some of the things taught are not working. ex: amplify push fails. I tried searching for internet resources on this. but couldnt manage to figure why it fails. 2. In some of the sections video stop and done proceed further.

J
Jody19 January 2020

I'm able to follow along, however there are some missing steps (like tachyons emmet), the amplify console is really old, and the React portion is done with classes vs hooks. so feels a little dated, but concepts are clear enough.

J
Jaber19 January 2020

AWS is no more accepting the amplify version instructed to be used in this video! this video is outdated and need to br updated.

D
Dan5 January 2020

Whilst this course is a bit outdated, it is still without a doubt the best AWS Amplify / React course you can find right now. I really enjoyed the projects and how Reed guided us through the projects whilst explaining in good detail what we was doing. (I am a new programmer). A few downsides are that the course is a bit outdated due to Amplify updates, however thankfully other course users in the Q&A have posted their solutions (You're awesome guys!). It would be cool to see the course updated and maybe add a new project. Overall if you're a beginner at React and Amplify you won't regret this course.

D
David5 January 2020

I've taken Reed's earlier tutorials. He's a good coder and concise communicator. Very valuable skills in his courses with good best practices.

S
Steve26 December 2019

Reed covered alot of ground and was clear throughout. A few hiccups along the way but mostly due to Amplify version differences. Thanks Reed!

R
Ronak19 December 2019

Great content and presentation was awesome, course is easy to follow and Reed is an awesome tutor. but speaking course wise I think this course missing quizzes and interactive part, this course would be more engaging if those were there. Apart from that is real an nice and precises tutorial, worth every bit of penny.

J
Joseph12 December 2019

Clearly spoken. You will have to debug some gaps in the tutorials – use the Q&A section as best you can. Once you use Amplify more you find gaps in required knowledge not in this course

J
John11 December 2019

Course is good but needs an update. It's a bit frustrating to have to find known issues in the Q&A. Maybe just put them all in one place.

C
Capacitacion9 December 2019

Excelente curso, todo esta ejemplificado. Te lleva de la mano en cada paso y puedes ir viendo los resultados con cada elemento que vas viendo en el curos. Totalmente recomendado.


2102800

Udemy ID

12/23/2018

Course created date

3/9/2019

Course Indexed date
Bot
Course Submitted by