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. [Plus or Premium package only]

  • Best practices for logging and monitoring so you can spot and fix issues in production quickly. [Premium package only]

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

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

    • 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 - Bonus content

  • 8

    Next steps

    • Congratulations on completing this course!

Your instructors


Other courses you might like