English | MP4 | AVC 1920×1090 | AAC 44KHz 2ch | 187 Lessons (35h 55m) | 6.91 GB
Build scalable and performant full-stack serverless applications
Learn how to use modern technologies such as AppSync, Lambda, DynamoDB and Vue.js to build performant and scalable full-stack applications by building a Twitter clone from scratch.
Serverless technologies let you build scalable and performant applications without managing any infrastructure. GraphQL lets you build powerful APIs that are easy to use and extend. Together, they’re the perfect tool for building modern applications.
Build a Twitter clone using these modern technologies
- AWS Lambda for server side processing
- AWS AppSync for building flexible APIs
- AWS Cognito for authentication management
- AWS DynamoDB for data storage
- Vue.js for interface building
- Tailwind CSS for styling
- Serverless Framework for infrastructure management
- AWS Amplify to simplify development
Learn practical skills valued by employers
Don’t waste your time on yet another hello-world tutorial. Go deep and learn practical, hands-on skills that can actually make you a better developer and help you stand out from the crowd.
Testing & Debugging
How to test Lambda functions and AppSync APIs both locally (unit & integration tests) and remotely (end-to-end tests).
Observability
Learn best practices for logging, monitoring and tracing so you can spot and fix issues in production quickly.
Design Patterns
Learn architectural design patterns for serverless applications and modelling techniques for DynamoDB.
Security
How to secure your application and prevent unauthorized access.
Experience modern full-stack development
Build a non-trivial, full-stack application using modern technologies (GraphQL, AWS, serverless, Vue.js) and development practices (infra-as-code, CI/CD, load-testing, progressive web apps).
AWS
Gain hands-on experience with popular AWS services such as AppSync, Lambda, DynamoDB and Cognito.
Vue.js and Tailwind CSS
Learn by building a non-trivial progressive web application with the popular Vue.js framework and Tailwind CSS.
GraphQL
Learn how GraphQL works, how it compares with REST APIs and best practices for modelling GraphQL schemas.
CI/CD with GitHub Actions
Continuously test and deploy your API using GitHub Actions.
Table of Contents
Welcome to the course-
1 Welcome and introductions
Chapter 1 – AppSync 101
2 What is GraphQL-
3 What is AWS AppSync-
4 AppSync now supports EventBridge as data source
5 AppSync vs API Gateway
6 AppSync vs running GraphQL in Lambda
7 AppSync now supports Merged APIs
8 What is AWS Amplify-
Chapter 2 – AWS 101
9 Introduction
10 DynamoDB 101
11 CloudFormation 101
12 Cognito 101
13 IAM 101
14 Additional learning resources
Chapter 3 – Preparing your dev environment
15 Pre-requisites
16 Recommended VS Code plugins
17 Check out the AppSync Masterclass forum
Chapter 4 – Building an AppSync backend -part 1-
18 Set up the backend project
19 Designing the GraphQL schema
20 Configure Cognito User Pool
21 Save user profile on PostConfirmation Vide
22 What should we test-
23 Add integration test for confirmUserSignup
24 Add acceptance test for confirmUserSignup
25 Implement getMyProfile query
26 Add unit test for getMyProfile query
27 Add acceptance test for getMyProfile query
28 Capture AppSync-s GraphQLUrl in .env
29 Implement editMyProfile mutation
30 Add tests for editMyProfile mutation
31 Implement getImageUploadUrl query
32 Add unit test for getImageUploadUrl query
33 Add acceptance test for getImageUploadUrl query
34 Implement tweet mutation
35 Add integration test for tweet mutation
36 Add acceptance test for tweet mutation
37 Implement getTweets query
38 Add unit tests for getTweets query
39 Add acceptance test for getTweets query
40 Implement getMyTimeline query
41 Add tests for getMyTimeline query
42 Use context.info to remove unnecessary DynamoDB calls
43 how-are-you-finding-the-appsync-masterclass-so-far
44 Implement like mutation
45 Implement Tweet.liked nested resolver
46 Rewrite tests with GraphQL fragments
47 Add tests for like mutation
48 Implement unlike mutation
49 Add tests for unlike mutation
50 Implement getLikes query
51 Add tests for getLikes query
52 Implement Profile.tweets nested resolver
53 Implement retweet mutation
54 Implement Retweet nested resolvers
55 Add integration tests for retweet mutation
56 Add acceptance tests for retweet mutation
57 Implement unretweet mutation
58 Add integration tests for unretweet mutation
59 Add acceptance tests for unretweet mutation
60 Implement reply mutation
61 Add integration tests for reply mutation
62 Implement Reply nested resolvers
63 Add unit tests for Reply.inReplyToUsers VTL
64 Add acceptance tests for reply mutation
65 Implement follow mutation
66 Implement Profile.following and Profile.followedBy
67 Implement getProfile query
68 Add tests for follow mutation
69 Distribute tweets to followers
70 Add integration tests for the distribute-tweets function
71 Add acceptance tests for the distribute-tweets function
72 Add tweets to timeline when following someone
73 Add integration tests for distribute-tweets-to-followe
74 Add acceptance tests for distribute-tweets-to-follower
75 Implement unfollow mutation
76 Add acceptance tests for unfollow mutation
77 Implement getFollowers query
78 Compare the two ways of hydrating results
79 Add unit tests for hydrateFollowers.request VTL template
80 Add acceptance tests for getFollowers query
81 Implement getFollowing query
82 CI-CD pipeline intro
83 Configure CI-CD pipeline with Github Actions
84 How to promote change through different stages
85 VTL now supports ULID
86 Wrap up
Chapter 5 – Building a SPA with Vue.js and Tailwind CSS -part 1-
87 Setup- create new Vue.js project
88 Setup- configure TailwindCss
89 Setup- configure font-awesome
90 Setup- integrate backend
91 Router- setup router
92 Router- add public pages
93 Router- setup router guard for authenticated pages
94 Vuex- setup multi-module store
95 Vuex- add authentication module
96 Vuex- add store access to UI components
97 Landing page- setup and styling with Tailwind
98 Landing page- add signup modal and step logic
99 Landing page- add signup Vu
100 Landing page- add escape directive to c
101 Landing page- add signup step 1- create account
102 Landing page- add signup step 2- customise
103 Landing page- add signup step 3- password
104 Landing page- add signup step 4- review
105 Landing page- add signup step 5- verification code
106 Signup steps overview
107 Login page- add user login with Amplify
108 Configure CI-CD pipeline with Amplify
109 Home page- setup and styling with Tailwind
110 Home page- loading profile data
111 Home page- posting a new tweet
112 Home page- rendering the timelin
113 Home page- adding Reply- Retweet- Like and Unlike
114 Profile page- setup and styling with Tailwind
115 Profile page- rendering profile details
116 Profile page- rendering profile timeline
117 Profile page- edit profile details
118 Profile page- following-unfollowing a user
119 UI- add infinite scrolling
120 UI- add loading indicator
121 Wrap up
122 Minor fixes to the demo code
Chapter 6 – Building an AppSync backend -part 2-
123 Welcome back-
124 Why not Elasticsearch-
125 Sign up to Algolia
126 Sync users and tweets to Algolia
127 Securely handle Algolia API key
128 Add search to GraphQL schema
129 Implement search query
130 Add tests for search query
131 Add getHashTag to GraphQL schema
132 Implement getHashTag query
133 Add tests for getHashTag query
134 What are AppSync subscriptions-
135 Add subscriptions to GraphQL schema
136 Restricting access to onNotified subscription
137 Add subscription for retweets
138 Add subscription for likes
139 Add subscription for mentions
140 Add subscription for replies
141 Add e2e tests for retweeted notifications
142 Use serverless-layers to reduce package size
143 Add e2e tests for liked- replied and mentioned notificatio
144 Support Direct Messages in the GraphQL schema
145 Implement sendDirectMessage mutation
146 Implement listConversations query
147 Implement getDirectMessages query
148 Support notifyDMed in the GraphQL schema
149 Implement the notifyDMed notification
150 What about group messaging-
151 Understanding AppSync caching
152 AppSync caching update -Jan 2022
153 Configure per-resolver caching
154 Use BatchInvoke to reduce the number of Lambda invocations
155 AppSync BatchInvoke update -Jan 2022
156 Report individual errors in a BatchInvoke request
157 How can we implement two-way pagination-
158 Wrap up
Chapter 7 – Building a SPA with Vue.js and TailwindCSS -part 2-
159 Add search page
160 Add hashtag page
161 Add notifications page
162 Add messages page
163 Send direct messages
164 Layout and Profile page integration
165 Wrap up
Chapter 8 – Building an AppSync backend -part 3-
166 Welcome back-
167 Kinesis Firehose 101
168 Configure Kinesis Firehose
169 Configure Cognito Identity Pool and IAM role
170 Update schema to return Kinesis Firehose stream name
171 How to create unauthenticated GraphQL operations in AppSync
172 Catalog and query analytics events
173 How to configure Glue with CloudFormation
174 Wrap up
Chapter 9 – Building a SPA with Vue.js and TailwindCSS -part 3-
175 Mobile styling
176 How to make a Progressive Web Application
177 Get IAM credentials from Cognito Identity Pool
178 Track -sign up- button clicks
Chapter 10 – Observability
179 Understanding the AppSync logging options
180 Configure AppSync Logging
181 Implement sampling for resolver logs
182 Set log retention for all log groups
183 Configure tracing with X-Ray
184 X-Ray shortcomings
185 My observability strategy
186 Set up dashboards in CloudWatch
187 Set up CloudWatch alerts
188 Configuring Lumigo
189 Wrap up
Chapter 11 – Misc
190 How to configure custom domain names
191 Considerations for scaling an AppSync API
192 Load testing the AppSync API
193 Versioning AppSync APIs
194 How to model multi-tenant applications with Cognito
195 How to model multi-tenant applications with Lambda authorizer
196 How to handle advanced multi-tenant use cases
197 GraphCDN
Chapter 12 – Bonus content
198 Live Q-A -1 -27th Nov 2020
199 Live Q-A -2 -12th Mar 2021
200 Live Q-A -3 -30th July 2021
Next steps
201 Next steps. Congratulations on completing this course
Resolve the captcha to access the links!