Skip to content

Latest commit

 

History

History
211 lines (162 loc) · 6.4 KB

README.md

File metadata and controls

211 lines (162 loc) · 6.4 KB
Raw

AWS Amplify & AppSync Conference - Reference App

amplifybutton

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

Slides

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

Topics

Demo Features

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

Prerequisites

Getting Started

  1. Clone this repo locally.
$ git clone https://github.com/ksivamuthu/aws-amplify-conference.git
cd aws-amplify-conference
  1. Initialize the amplify project.
$ amplify init
  1. 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
  1. Install client dependencies.
$ npm install
  1. Run the react application
$ npm run start
  1. 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.