Build a Twitter clone using these technologies

10 things you will learn

  • How do GraphQL APIs work? How to define a GraphQL schema.

  • How are GraphQL APIs different from REST? The pros & cons of each.

  • What is AppSync? How does it compare to API Gateway?

  • How to test AppSync APIs both locally and remotely with end-to-end tests.

  • How to secure AppSync APIs with the right auth method and prevent unauthorized access.

  • Data modelling techniques for DynamoDB.

  • Hands-on experience with popular AWS services such as AppSync, Lambda and DynamoDB.

  • Hands-on experience building something non-trivial with the popular Vue.js framework.

  • How to build an effective caching strategy to optimize performance, cost and scalability.

  • Best practices for logging and monitoring so you can spot and fix issues in production quickly.

Registration, Sign-Up, Sign-In

Build user flows for registration, sign-up, sign-in, and email verification with Amazon Cognito and AWS Amplify.

Tweets and Timelines

Build the Home page and show Twitter timeline, and add the ability to post new tweets, retweet, like and reply to another tweet.

Manage user profiles

Build the Profile page and allow users to edit their profiles, see their tweets and follow other users.
Watch Intro Video

Course curriculum

  • 1

    Welcome to the course!

  • 2

    Chapter 1 - AppSync 101

  • 3

    Chapter 2 - AWS 101

  • 4

    Chapter 3 - Preparing your dev environment

  • 5

    Chapter 4 - Building an AppSync backend (part 1)

    • Set up the backend project

      FREE PREVIEW

    • Designing the GraphQL schema

    • Configure Cognito User Pool

    • Save user profile on PostConfirmation

    • What should we test?

    • Add integration test for confirmUserSignup

    • Add acceptance test for confirmUserSignup

    • Implement getMyProfile query

    • Add unit test for getMyProfile query

    • Add acceptance test for getMyProfile query

    • Capture AppSync's GraphQLUrl in .env

    • Implement editMyProfile mutation

    • Add tests for editMyProfile mutation

    • Implement getImageUploadUrl query

    • Add unit test for getImageUploadUrl query

    • Add acceptance test for getImageUploadUrl query

    • Implement tweet mutation

    • Add integration test for tweet mutation

    • Add acceptance test for tweet mutation

    • Implement getTweets query

    • Add unit tests for getTweets query

    • Add acceptance test for getTweets query

    • Implement getMyTimeline query

    • Add tests for getMyTimeline query

    • Use context.info to remove unnecessary DynamoDB calls

    • How are you finding the AppSync Masterclass so far?

    • Implement like mutation

    • Implement Tweet.liked nested resolver

    • Rewrite tests with GraphQL fragments

    • Add tests for like mutation

    • Implement unlike mutation

    • Add tests for unlike mutation

    • Implement getLikes query

    • Add tests for getLikes query

    • Implement Profile.tweets nested resolver

    • Implement retweet mutation

    • Implement Retweet nested resolvers

    • Add integration tests for retweet mutation

    • Add acceptance tests for retweet mutation

    • Implement unretweet mutation

    • Add integration tests for unretweet mutation

    • Add acceptance tests for unretweet mutation

    • Implement reply mutation

    • Add integration tests for reply mutation

    • Implement Reply nested resolvers

    • Add unit tests for Reply.inReplyToUsers VTL

    • Add acceptance tests for reply mutation

    • Implement follow mutation

    • Implement Profile.following and Profile.followedBy

    • Implement getProfile query

    • Add tests for follow mutation

    • Distribute tweets to followers

    • Add integration tests for the distribute-tweets function

    • Add acceptance tests for the distribute-tweets function

    • Add tweets to timeline when following someone

    • Add integration tests for distribute-tweets-to-follower function

    • Add acceptance tests for distribute-tweets-to-follower function

    • Implement unfollow mutation

    • Add acceptance tests for unfollow mutation

    • Implement getFollowers query

    • Compare the two ways of hydrating results

    • Add unit tests for hydrateFollowers.request VTL template

    • Add acceptance tests for getFollowers query

    • Implement getFollowing query

    • CI/CD pipeline intro

    • Configure CI/CD pipeline with Github Actions

    • How to promote change through different stages

    • VTL now supports ULID

    • Wrap up
  • 6

    Chapter 5 - Building a SPA with Vue.js and Tailwind CSS (part 1)

    • Setup: create new Vue.js project

    • Setup: configure TailwindCss

    • Setup: configure font-awesome

    • Setup: integrate backend

    • Router: setup router

    • Router: add public pages

    • Router: setup router guard for authenticated pages

    • Vuex: setup multi-module store

    • Vuex: add authentication module

    • Vuex: add store access to UI components

    • Landing page: setup and styling with Tailwind

    • Landing page: add signup modal and step logic

    • Landing page: add signup Vuex module and migrate local signup logic to Vuex

    • Landing page: add escape directive to close signup modal window

    • Landing page: add signup step 1, create account

    • Landing page: add signup step 2, customise

    • Landing page: add signup step 3, password

    • Landing page: add signup step 4, review

    • Landing page: add signup step 5, verification code

    • Signup steps overview

    • Login page: add user login with Amplify

    • Configure CI/CD pipeline with Amplify

    • Home page: setup and styling with Tailwind

    • Home page: loading profile data

    • Home page: posting a new tweet

    • Home page: rendering the timeline

    • Home page: adding Reply, Retweet, Like and Unlike

    • Profile page: setup and styling with Tailwind

    • Profile page: rendering profile details

    • Profile page: rendering profile timeline

    • Profile page: edit profile details

    • Profile page: following/unfollowing a user

    • UI: add infinite scrolling

    • UI: add loading indicator

    • Wrap up

    • Minor fixes to the demo code
  • 7

    Chapter 6 - Building an AppSync backend (part 2)

    • Welcome back!

    • Why not Elasticsearch?

    • Sign up to Algolia

    • Sync users and tweets to Algolia

    • Securely handle Algolia API key

    • Add search to GraphQL schema

    • Implement search query

    • Add tests for search query

    • Add getHashTag to GraphQL schema

    • Implement getHashTag query

    • Add tests for getHashTag query

    • What are AppSync subscriptions?

    • Add subscriptions to GraphQL schema

    • Restricting access to onNotified subscription

    • Add subscription for retweets

    • Add subscription for likes

    • Add subscription for mentions

    • Add subscription for replies

    • Add e2e tests for retweeted notifications

    • Use serverless-layers to reduce package size

    • Add e2e tests for liked, replied and mentioned notifications

    • Support Direct Messages in the GraphQL schema

    • Implement sendDirectMessage mutation

    • Implement listConversations query

    • Implement getDirectMessages query

    • Support notifyDMed in the GraphQL schema

    • Implement the notifyDMed notification

    • What about group messaging?

    • Understanding AppSync caching

    • AppSync caching update [Jan 2022]

    • Configure per-resolver caching

    • Use BatchInvoke to reduce the number of Lambda invocations

    • AppSync BatchInvoke update [Jan 2022]

    • Report individual errors in a BatchInvoke request

    • How can we implement two-way pagination?

    • Wrap up
  • 8

    Chapter 7 - Building a SPA with Vue.js and TailwindCSS (part 2)

    • Add search page

    • Add hashtag page

    • Add notifications page

    • Add messages page

    • Send direct messages

    • Layout and Profile page integration

    • Wrap up
  • 9

    Chapter 8 - Building an AppSync backend (part 3)

    • Welcome back!

    • Kinesis Firehose 101

    • Configure Kinesis Firehose

    • Configure Cognito Identity Pool and IAM role

    • Update schema to return Kinesis Firehose stream name

    • How to create unauthenticated GraphQL operations in AppSync

    • Catalog and query analytics events

    • How to configure Glue with CloudFormation

    • Wrap up
  • 10

    Chapter 9 - Building a SPA with Vue.js and TailwindCSS (part 3)

    • Mobile styling

    • How to make a Progressive Web Application

    • Get IAM credentials from Cognito Identity Pool

    • Track "sign up" button clicks
  • 11

    Chapter 10 - Observability

    • Understanding the AppSync logging options

      FREE PREVIEW

    • Configure AppSync Logging

    • Implement sampling for resolver logs

    • Set log retention for all log groups

    • Configure tracing with X-Ray

    • X-Ray shortcomings

    • My observability strategy

    • Set up dashboards in CloudWatch

    • Set up CloudWatch alerts

    • Configuring Lumigo

    • Wrap up
  • 12

    Chapter 11 - Misc

  • 13

    Chapter 12 - Bonus content

  • 14

    Next steps

    • Congratulations on completing this course!

Your instructors


Other courses you might like