AWS Amplify & AppSync Conference - Reference App

This sample reference application shows how to use GraphQL to build an application that a user can login to the system, see the conference, sessions and speaker details. The sample is written in React and uses AWS AppSync, Amazon Cognito, Amazon DynamoDB, Amazon PinPoint and Amazon S3 as well as the Amplify CLI.

This tweet is my reaction when I started exploring AWS AppSync. I'm impressed on how AWS Amplify & Appsync evolved over an year. Integration with backend and client libraries are awesome.

Table of Contents

• AWS Amplify & AppSync Conference - Reference App
  • Slides
  • Topics
  • Demo Features
  • Prerequisites
  • Getting Started
  • GraphQL Schema & Transforms
  • How to run React Web App Project?
  • Contributing
  • License

Slides

Slides are here - https://slides.com/sivamuthukumar/building-serverless-graphql-using-aws-amplify/fullscreen

Topics

• AWS AppSync
• AWS Amplify CLI
• AWS Amplify Client Libraries
• AWS Amplify GraphQL Transforms

Demo Features

• Authentication
• Authorization
• GraphQL Query
• GraphQL Mutation
• GraphQL Subscription
• Elastic Search
• Search Functionality in Client
• Lambda Functions Resources
• DynamoDB Resource
• Chatbot

Prerequisites

• AWS Account

• NodeJS with NPM

• AWS Ampify CLI

  • npm install -g @aws-amplify/cli
  • amplify configure

Getting Started

1. Clone this repo locally.

$ git clone https://github.com/ksivamuthu/aws-amplify-conference.git
cd aws-amplify-conference

2. Initialize the amplify project.

$ amplify init

3. Push the amplify resources into cloud

$ amplify push

Current Environment: dev

| Category  | Resource name                | Operation | Provider plugin   |
| --------- | ---------------------------- | --------- | ----------------- |
| Auth      | awsamplifyconferenceee829563 | Create    | awscloudformation |
| Hosting   | S3AndCloudFront              | Create    | awscloudformation |
| Api       | amplifyconferencegraphql     | Create    | awscloudformation |
| Analytics | amplifyconferenceanalytics   | Create    | awscloudformation |
| Storage   | amplifyconferences3          | Create    | awscloudformation |
| Function  | speakerfacts                 | Create    | awscloudformation |
? Are you sure you want to continue? Yes

This command will create the all backend resources required for projects.

Category	Resource name	Operation	Provider plugin
Auth	awsamplifyconferenceee829563	Create	awscloudformation
Hosting	S3AndCloudFront	Create	awscloudformation
Api	amplifyconferencegraphql	Create	awscloudformation
Analytics	amplifyconferenceanalytics	Create	awscloudformation
Storage	amplifyconferences3	Create	awscloudformation
Function	speakerfacts	Create	awscloudformation

GraphQL Schema & Transforms

The GraphQL Schema file is located at - amplify/backend/api/amplifyconferencegraphql/schema.graphql

Read about GraphQL Transforms on @model, @searchable, @function directives

type Conference @model {
  id: ID!
  title: String!
  year: Int!
  websiteUrl: String!
  location: String!
  contact: String!
  sessions: [Session]! @connection(name: "ConferenceSessions")
}

type Session @model @searchable {
  id: ID!
  title: String!
  abstract: String!
  level: Level!
  category: Category!
  keywords: [String]!
  favorites: [UserSessionVote]! @connection(name: "UserSessionVotes")
  conference: Conference! @connection(name: "ConferenceSessions")
  speaker: Speaker! @connection(name: "SessionSpeakers")
}

type Speaker @model {
  id: ID!
  name: String!
  bio: String!
  facts: String @function(name: "speakerfacts-${env}")
  jobtitle: String!
  phonenumber: String!
  companyname: String!
  companywebsite: String!
  blog: String!
  website: String!
  twitter: String!
  facebook: String!
  linkedin: String!
  sessions: [Session]! @connection(name: "SessionSpeakers")
}

type UserSessionVote @model {
  id: ID!
  userId: String!
  session: Session! @connection(name: "UserSessionVotes")
}

enum Level {
  BEGINNER
  INTERMEDIATE
  ADVANCED
}

enum Category {
  GeneralDiscussion
  ClientDevelopment
  WebDevelopment
  DatabaseDevelopment
  CloudDevelopment
  Design
  ProfessionalDevelopment
  CareerAdvancement
  ITTopics
}

How to run React Web App Project?

1. Navigate into react-web-app project

cd react-web-app

2. Install client dependencies.

$ npm install

3. Run the react application

$ npm run start

4. To deploy into S3 hosting

$ amplify publish

The sample uses AWS Amplify to perform the Sign-Up and Sign-In flows with a Higher Order Component and its GraphQL calls.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

• Fork the Project
• Create your Feature Branch (git checkout -b feature/AmazingFeature)
• Commit your Changes (git commit -m 'Add some AmazingFeature)
• Push to the Branch (git push origin feature/AmazingFeature)
• Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.