Create a PWA cloud-enabled offline-first chatroom using Vue

Image for post
Image for post

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…

Create a PWA cloud-enabled offline-first chatroom using Vue

Image for post
Image for post

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…

Refresh your REST APIs skills using AWS Amplify and Vue

Image for post
Image for post

In this article you will create a REST API integrated with Amazon DynamoDB using AWS Amplify including CRUD operations and publication. Access to the REST API will allow both registered users and guests. In order to test it you will create a client including an authentication flow using Vue.


Full-stack serverless made easy using AWS Amplify and Vue

Image for post
Image for post

In this tutorial, we will learn how to build a GraphQL data-driven serverless app using Vue, AWS Amplify and AWS AppSync. We will create a new project with Vue, generate a serverless GraphQL API using AWS AppSync and build a client to consume it including real-time. We will cover:


Build flexible, scalable, and reliable apps with AWS Amplify

Image for post
Image for post

In this tutorial, you will learn how to build a full-stack serverless app using Vue and AWS Amplify. You will create a new project and add a full authorisation flow using the authenticator component. This includes:

Please let me know if you have any questions or want to learn more on the above at…


Creating a distance-aware search UI using Mapbox and Angular

Image for post
Image for post

This is the third and last article of a series of articles that provides a comprehensive step by step guide to enable distance-aware searches in your full-stack serverless applications using AWS Amplify and AWS AppSync.

At the end of Part 2 of this series, you created a custom GraphQL distance-aware search using AWS Amplify and AWS AppSync together with Amazon Elasticsearch. In this article, you will create the UI for LondonCycles and integrate the search query using Mapbox and Angular on the client.

We will cover:


Create a custom GraphQL distance-aware search using AWS AppSync

Image for post
Image for post

This is the second article of a series of articles that provides a comprehensive step by step guide to enable distance-aware searches in your full-stack serverless applications using AWS Amplify and AWS AppSync.

In this article, you will learn how to create a custom GraphQL distance-aware search. First, we will introduce Amazon Elasticsearch and some tools. Then, you will create an index to store your geolocation data and make changes to your GraphQL Schema by adding a new distance-aware search query. …


Enable GraphQL distance-aware searches with @searchable

Image for post
Image for post

This is the first article of a series of articles that provides a comprehensive step by step guide to enable distance-aware searches in your full-stack serverless applications using AWS Amplify and AWS AppSync.

In this article, you will learn how to enable GraphQL distance-aware searches starting by making changes to your GraphQL Schema. Next, we will introduce some essential concepts around geolocation and a detailed explanation of the inner workings of the @searchable GraphQL transform.

The whole series includes:


Use face recognition to uncover fake selfies and more by Gerard Sans

Image for post
Image for post
Is this a fake selfie? Hold my beer. Image by vertecchi*.

How many times do you go on your day and happen to cross paths with a celebrity? Now imagine how embarrassing would be to post a selfie with someone that resembles a celebrity but is not. I think, I may have built the perfect app for you: FindKeanu! 🙄😂

In this tutorial, we will learn how easy is to build a fullstack serverless app to find Keanu Reeves in selfies like a pro while learning about face recognition using Angular and Amplify. We will cover:


Serverless made easy with AWS Amplify and Angular

Image for post
Image for post

In this tutorial, we will learn how to build a GraphQL data-driven serverless app using Angular, AWS Amplify and AWS AppSync. We will create a new project with Angular, generate a serverless GraphQL API using AWS AppSync and build an AWS AppSync client to access it including real-time. We will cover:

Gerard Sans

Developer Advocate | ex @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | @fullstackcon @ReactiveConf @ngcruise @UphillConf

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store