All Projects → amazon-archives → Aws Appsync Chat

amazon-archives / Aws Appsync Chat

Licence: apache-2.0
Real-Time Offline Ready Chat App written with GraphQL, AWS AppSync, & AWS Amplify

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Aws Appsync Chat

Aws Mobile Appsync Chat Starter Angular
GraphQL starter progressive web application (PWA) with Realtime and Offline functionality using AWS AppSync
Stars: ✭ 449 (-13.98%)
Mutual labels:  graphql, aws-amplify, real-time, offline
Aws Appsync React Workshop
Building real-time offline-ready Applications with React, GraphQL & AWS AppSync
Stars: ✭ 193 (-63.03%)
Mutual labels:  graphql, serverless, aws-amplify
Amplify Photo Sharing Workshop
Building full-stack cloud apps with AWS Amplify and React
Stars: ✭ 143 (-72.61%)
Mutual labels:  graphql, serverless, aws-amplify
Conference App In A Box
Full stack & cross platform app customizable & themeable for any event or conference.
Stars: ✭ 693 (+32.76%)
Mutual labels:  graphql, serverless, aws-amplify
Aws Mobile Appsync Events Starter React Native
GraphQL starter application with Realtime and Offline functionality using AWS AppSync
Stars: ✭ 134 (-74.33%)
Mutual labels:  graphql, real-time, offline
Hype Beats
Real-time Collaborative Beatbox with React & GraphQL
Stars: ✭ 100 (-80.84%)
Mutual labels:  graphql, aws-amplify, real-time
This Or That
This or that - Real-time atomic voting app built with AWS Amplify
Stars: ✭ 87 (-83.33%)
Mutual labels:  graphql, serverless, aws-amplify
Graphql Recipes
A list of GraphQL recipes that, when used with the Amplify CLI, will deploy an entire AWS AppSync GraphQL backend.
Stars: ✭ 137 (-73.75%)
Mutual labels:  graphql, serverless, aws-amplify
Aws Mobile Appsync Events Starter React
GraphQL starter application with Realtime and Offline functionality using AWS AppSync
Stars: ✭ 337 (-35.44%)
Mutual labels:  graphql, real-time, offline
Autoserver
Create a full-featured REST/GraphQL API from a configuration file
Stars: ✭ 188 (-63.98%)
Mutual labels:  graphql, serverless
Mongoke
Instant Graphql for MongoDb (active branch is golang, rewrite in process)
Stars: ✭ 203 (-61.11%)
Mutual labels:  graphql, serverless
aws-mobile-appsync-events-starter-ios
GraphQL starter application with Realtime and Offline functionality using AWS AppSync
Stars: ✭ 99 (-81.03%)
Mutual labels:  real-time, offline
Apollo Offline
An offline toolkit for the Apollo client
Stars: ✭ 186 (-64.37%)
Mutual labels:  graphql, offline
Commerceql
UNMAINTAINED
Stars: ✭ 217 (-58.43%)
Mutual labels:  graphql, serverless
Jamstack Serverless
Learn JAMstack Serverless Modern App Development in Baby Steps using Gatsby.js, React, TypeScript, GraphQL, Contentful, Netlify, FaunaDB, MongoDB, Apollo, Github Actions, Project Fugu, and CSS Houdini.
Stars: ✭ 178 (-65.9%)
Mutual labels:  graphql, serverless
Workers Graphql Server
🔥Lightning-fast, globally distributed Apollo GraphQL server, deployed at the edge using Cloudflare Workers
Stars: ✭ 255 (-51.15%)
Mutual labels:  graphql, serverless
Gatsby Auth Starter Aws Amplify
Starter Project with Authentication with Gatsby & AWS Amplify
Stars: ✭ 306 (-41.38%)
Mutual labels:  serverless, aws-amplify
Space Cloud
Open source Firebase + Heroku to develop, scale and secure serverless apps on Kubernetes
Stars: ✭ 3,323 (+536.59%)
Mutual labels:  graphql, serverless
Aws App Sync
Easily Deploy AWS AppSync GraphQL APIs Using Serverless Framework Components
Stars: ✭ 261 (-50%)
Mutual labels:  graphql, serverless
Prisma1
💾 Database Tools incl. ORM, Migrations and Admin UI (Postgres, MySQL & MongoDB)
Stars: ✭ 16,851 (+3128.16%)
Mutual labels:  graphql, serverless

Chatt

Real-Time Offline Ready Chat App written with GraphQL, AWS AppSync, & AWS Amplify

Features

  • User management
  • Routing (React Router)
  • Real-time
  • Offline ready (conflict resolution handled for you when user comes back online)

Technologies

  • AWS AppSync
  • AWS Amplify
  • GraphQL
  • MobX
  • React Router
  • React Apollo
  • Glamor

Screens

Building the App (automated)

This project contains an Amplify project (/amplify) already configured & ready to be deployed. Deploying this project will create the following resources in your account: an authentication configuration using Amazon Cognito, an AWS AppSync GraphQL API, & a DynamoDB table.

  1. Make sure you are on the newest version of the AWS Amplify CLI
npm install -g @aws-amplify/cli

You must also have the CLI configured with a user from your AWS account (amplify configure). For a walkthrough of how to do this, check out this video.

  1. Clone Chatt
git clone https://github.com/aws-samples/aws-appsync-chat.git
  1. Install dependencies
npm install
  1. Initialize the amplify project
amplify init
  • Enter a name for the environment master
  1. Push the new resources to the cloud
amplify push
  1. Run the project
npm start
  1. Deleting the project resources

If you'd like to tear down the project & delete all of the resources created by this project, run the delete command.

amplify delete

Building the App (manually)

You can also manually set up your resources if you would like. If you would like to manually create & configure the resources for this project, follow these steps:

  1. Install & configure the Amplify CLI
npm install -g @aws-amplify

amplify configure
  1. Clone Chatt
git clone https://github.com/aws-samples/aws-appsync-chat.git
  1. Install dependencies
npm install
  1. Delete the amplify folder

  2. Initialize a new Amplify project

amplify init
  1. Add authentication
amplify add auth

Here, either choose the default security choice or configure your own.

  1. Add the api
amplify add api

Choose Cognito User Pools as the authentication type. When prompted for the GraphQL schema, use the following schema:

type User 
  @model 
  @auth(rules: [{ allow: owner, ownerField: "id", queries: null }]) {
  id: ID!
  username: String!
  conversations: [ConvoLink] @connection(name: "UserLinks")
  messages: [Message] @connection(name: "UserMessages")
	createdAt: String
	updatedAt: String
}

type Conversation
  @model(
    mutations: { create: "createConvo" }
    queries: { get: "getConvo" }
    subscriptions: null
  )
  @auth(rules: [{ allow: owner, ownerField: "members" }]) {
  id: ID!
  messages: [Message] @connection(name: "ConvoMsgs", sortField: "createdAt")
  associated: [ConvoLink] @connection(name: "AssociatedLinks")
  name: String!
  members: [String!]!
	createdAt: String
	updatedAt: String
}

type Message 
  @model(subscriptions: null, queries: null) 
  @auth(rules: [{ allow: owner, ownerField: "authorId" }]) {
  id: ID!
  author: User @connection(name: "UserMessages", keyField: "authorId")
  authorId: String
  content: String!
  conversation: Conversation! @connection(name: "ConvoMsgs")
  messageConversationId: ID!
	createdAt: String
	updatedAt: String
}

type ConvoLink 
  @model(
    mutations: { create: "createConvoLink", update: "updateConvoLink" }
    queries: null
    subscriptions: null
  ) {
  id: ID!
  user: User! @connection(name: "UserLinks")
  convoLinkUserId: ID
  conversation: Conversation! @connection(name: "AssociatedLinks")
  convoLinkConversationId: ID!
	createdAt: String
	updatedAt: String
}

type Subscription {
  onCreateConvoLink(convoLinkUserId: ID!): ConvoLink
    @aws_subscribe(mutations: ["createConvoLink"])
  onCreateMessage(messageConversationId: ID!): Message
    @aws_subscribe(mutations: ["createMessage"])
}
  1. Run the push command to create the resources in your account:
amplify push
  1. Run the project
npm start
  1. Deleting the project resources

If you'd like to tear down the project & delete all of the resources created by this project, run the delete command.

amplify delete

Hosting with the AWS Amplify Console

The AWS Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators) with serverless backends. Continuous deployment allows developers to deploy updates to either the frontend or backend (Lambda functions, GraphQL resolvers) on every code commit to the Git repository.

  1. Push your code to a Git repository of your choice.
  2. Login to the AWS Amplify Console and choose Connect app
  3. Connect your repository and branch.
  4. Accept the default build settings.
  5. Give the Amplify Console permission to deploy backend resources with your frontend. This will allow the Console to detect changes to your backend on every code commit. If you do not have a service role, follow the prompts to create one.
  6. Review your changes and then choose Save and deploy. You app will now be available at https://master.unique-id.amplifyapp.com.

About

Schema

This application utilizes 4 database tables:

  • User table (stores user's identity information)
  • Conversation table (stores conversations)
  • Messages table (stores messages)
  • ConvoLinkTable (stores relations between conversations & users)

License

This library is licensed under the Apache 2.0 License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].