English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 8.5 Hours | 3.46 GB
Build full-stack React apps faster than ever, which scale to millions of users, and run entirely in the cloud!
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
What you’ll 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
Table of Contents
Getting Started (Required)
1 What You Need for this Course
2 How to Get Help in this Course
3 Installing Amplify CLI Globally
4 Configuring Amplify CLI with AWS Account
Getting Familiar with the Amplify CLI
5 Setting up Notetaking App
6 Initializing Amplify with Amplify Init
7 Setting up our GraphQL API with Authentication
8 Generating an Entire GraphQL API off of our Schema
9 Configuring Amplify with React
10 Git Tracking with Amplify Projects (Optional)
Ridiculously Simple Authentication using withAuthenticator HOC
11 Using withAuthenticator to Auth Users (in 2 Lines of Code)
12 Exploring the Cognito Console Enabling SMS Verification (Optional)
13 Creating the App UI
Executing GraphQL Queries Mutations with AppSync
14 Running createNote Mutation from AppSync Console
15 Executing GraphQL Mutations on the Client
16 Async Await with GraphQL Operations
17 Running listNotes Query in AppSync and on Client
Adding Update Delete Operations to Notetaker App
18 Deleting Notes with deleteNote Mutation
19 Updating Notes with updateNote Mutation
Real-time Data with GraphQL Subscriptions
20 Subscribing to New Notes with onCreateNote
21 Listening for Deleted Updated Notes
22 @auth Directive for Ownership of Notes
Using Future React (Today) with React Hooks (Optional)
23 Converting our app to React Hooks (Optional)
Deploying our App with S3 Hosting
24 Deploying our App with S3 Hosting
Initializing our App Creating our GraphQL API
25 Initializing our MarketPlace App
26 Advanced AppSync Schema Creation
Customizing Amplify-React Components
27 Customizing withAuthenticator Theme
28 Authenticator Component Listening for Auth Events with Hub
29 Creating Navigation and Signout Functionality
Adding New Markets Managing App State with React Context
30 Adding New Markets
31 Adding Context API to Provide User Data
32 Adding Tags with our Markets
Easier GraphQL Queries with the Connect Component
33 Connect Component to Execute Queries
34 Handling Subscriptions with Connect
Powerful GraphQL Queries with AWS ElasticSearch
35 Creating our Search Input
36 Exploring ElasticSearch Queries in GraphiQL
37 Sort Parameter and Implementing Search Queries in the Client
38 Getting Individual Market Data
Adding Market Products Uploading Files with S3 Storage
39 Build Form to Add New Products
40 Using Styling our PhotoPicker Component
41 Adding New Products
42 Displaying Storage Upload Progress with Progress Component
CRUD Operations with Market Products Real-Time Data with Subscriptions
43 Display Products Adding Nested Fields to Auto-Generated Queries
44 Updating Products
45 Deleting Products
46 Subscribing to Product Mutations
47 Building out PayButton Stripe Configuration
Serverless REST APIs with AWS Lambda Processing Charges with Stripe
48 Introduction to Lambda Functions
49 Processing Orders with our Lambda Function
Sending Transactional Emails with Amazon Simple Email Service
50 Sending Emails with Amazon SES
51 Registering New Users with AppSync
52 Getting Owner’s Current Email, Improving our Email Content
53 Requesting Permission to Move out of SES Sandbox
54 Creating New Orders
Building the Profile Page Verifying Modified Emails with Verification Codes
55 Displaying Order History in ProfilePage
56 Sorting GraphQL Fields with the sortField Argument
57 Display Profile Data for Auth User
58 Getting Auth User’s Current Attributes
59 Verifying Users’ Updated Email Addresses
60 Prevent Users with Unverified Emails to Purchase Add Products
61 Deleting Users’ Profiles
Finishing our Marketplace App
62 Formatting Dates with Date-Fns
63 Next Steps
Resolve the captcha to access the links!