In this article, you will create Chatty, a chatroom Progressive Web App (PWA) that stores data on the device while offline, and synchronises in real-time with other devices when online using Amplify DataStore, GraphQL and Amazon DynamoDB. We will cover:

• Introduction to Offline-first, PWAs and Amplify DataStore
• Setting up a new project with the Vue CLI
• Creating a new GraphQL API
• Amplify DataStore: setup, data models and usage
• Creating the UI with Vue: the chatroom, sending and deleting messages; and doing real-time with subscriptions
• Making Chatty a PWA
• Adding a PWA custom configuration
• Improving UX while offline
• Publishing your app via the AWS Amplify Console
• Installing Chatty in the Desktop and Mobile
• Cleaning up cloud services

In order to follow this post you will need a basic knowledge of GraphQL. You can learn the basics following this tutorial at graphql.org. We will be referring to GraphQL schema, directives, types, queries, mutations, subscriptions and resolvers.

Please let me know if you have any questions or want to learn more at  @gerardsans.

Final solution and step by step tutorial in  GitHub.

#graphql #pwa #aws-amplify #javascript #vuejs