Aws Appsync Chat Starter React

screenshot of Aws Appsync Chat Starter React
react
bootstrap

Aws Appsync Chat Starter React

GraphQL starter progressive web application (PWA) with Realtime, Offline and AI/ML functionality using AWS AppSync

Overview

ChatQLv2 is a starter React Progressive Web Application (PWA) that utilizes AWS AppSync to provide offline and real-time capabilities in a chat application. It incorporates AI/ML features such as image recognition, text-to-speech, language translation, sentiment analysis, and chatbots. This application was developed as part of the re:Invent session to demonstrate the combination of real-time/offline and AI/ML capabilities in serverless applications. Users can search for other users and messages, have conversations, upload images, and exchange messages.

Features

  • GraphQL Mutations, Queries, and Subscriptions with AWS AppSync
  • Integration with various AWS Services such as Amazon Cognito, Amazon DynamoDB, Amazon Elasticsearch, AWS Lambda, Amazon Comprehend, Amazon Rekognition, Amazon Lex, Amazon Polly, and Amazon S3
  • User management and authentication with Amazon Cognito
  • Full text search on messages and users using Amazon Elasticsearch
  • Sentiment and entity analysis, as well as language detection, with Amazon Comprehend
  • Object, scene, and celebrity detection on images with Amazon Rekognition
  • Conversational chatbots with Amazon Lex
  • Text-to-speech on messages with Amazon Polly
  • Language translation with Amazon Translate
  • Media storage with Amazon S3

Installation

  1. Clone the repository and navigate to the created folder.
  2. Install the required modules.
  3. Initialize the directory as an Amplify JavaScript app using the React framework.
  4. Set the region for resource deployment.
  5. Ensure that all services are supported in the chosen region.
  6. Add an Amazon Cognito User Pool auth resource using the default configuration.
  7. Add an AppSync GraphQL API with Amazon Cognito User Pool for API Authentication, following the default options.
  8. Continue with the remaining steps as prompted.

Summary

ChatQLv2 is an AWS AppSync Chat Starter App written in React that leverages various AWS services to provide offline and real-time capabilities in a chat application. It showcases the integration of AI/ML features such as image recognition, text-to-speech, language translation, sentiment analysis, and conversational chatbots. The application is designed to demonstrate the combination of real-time/offline and AI/ML capabilities in serverless apps. Users can search for other users and messages, have conversations, upload images, and exchange messages. It also supports GraphQL Mutations, Queries, and Subscriptions with AWS AppSync.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.