Skip to content
This repository has been archived by the owner on Jun 3, 2020. It is now read-only.

Sample Survey Tool Progressive Web Application written with React, GraphQL, AWS AppSync & AWS Amplify

License

Notifications You must be signed in to change notification settings

amazon-archives/aws-appsync-survey-tool

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

AWS Appsync Survey Tool

Sample Survey Tool Progressive Web Application written with React, GraphQL, AWS AppSync & AWS Amplify

amplifybutton

Features

  • Full Progressive Web Application (PWA)
  • Install (desktop) or Add to Homescreen (mobile)
  • Offline ready
  • Adminstration Portal
  • User management

Technologies

  • AWS AppSync
  • AWS Amplify
  • GraphQL
  • React Router
  • React Apollo
  • Material UI

Quicklinks


Introduction

This is a demonstration solution that uses AWS AppSync to implement a survey app as a Progressive Web Application (PWA). In this app, users can complete assigned surveys, including pre and post questionnaires. The solution also includes an administration portal, which allows admins to create and manage surveys and questionnaires. The solution demonstrates GraphQL capabilities (e.g. Mutations, Queries and Subscriptions) with AWS AppSync, offline support with the AWS AppSync SDK and React Apollo, and integrates with other AWS Services such as:

  • Amazon Cognito for user management, as well as Auth N/Z
  • Amazon DynamoDB with NoSQL Data Sources
  • Amazon S3 for asset storage
  • Amazon Pinpoint for web client analytics data collection

Getting Started

Prerequisites

  • AWS Account with appropriate permissions to create the related resources
  • NodeJS with NPM
  • AWS CLI with output configured as JSON (pip install awscli --upgrade --user)
  • AWS Amplify CLI configured for a region where AWS AppSync and all other services in use are available (npm install -g @aws-amplify/cli)
  • Create React App (npm install -g create-react-app)

Automated Setup

This process will use the configuration in the amplify folder of this repo.

  1. First, clone this repository and navigate to the created folder:

    git clone https://github.com/aws-samples/aws-appsync-survey-tool.git
    
    cd aws-appsync-survey-tool
  2. Install the required modules:

    npm install
  3. Initilize the directory as an Amplify Javascript app using the React framework:

    amplify init
  4. Now it's time to provision your cloud resources based on the local setup and configured features. When asked to generate code, answer "NO" as it would overwrite the current custom files in the src/graphql folder.

    amplify push

    Wait for the provisioning to complete. Once done, a src/aws-exports.js file with the resources information is created.

  5. Run the project locally:

    npm start

Manual Setup

This process lets you configure custom settings for your backend components.

  1. First, clone this repository and navigate to the created folder:

    git clone https://github.com/aws-samples/aws-appsync-survey-tool.git
    
    cd aws-appsync-survey-tool
  2. Install the required modules:

    npm install
  3. Delete the amplify folder

    rm -f amplify
  4. Init the directory as an amplify Javascript app using the React framework:

    amplify init
  5. Add an Amazon Cognito User Pool auth resource. Use the default configuration.

    amplify add auth
  6. Add an AppSync GraphQL API with Amazon Cognito User Pool for the API Authentication. Follow the default options. When prompted with "Do you have an annotated GraphQL schema?", select "YES" and provide the schema file path backend/schema.graphql

    amplify add api
  7. Now it's time to provision your cloud resources based on the local setup and configured features. When asked to generate code, answer "NO" as it would overwrite the current custom files in the src/graphql folder.

    amplify push

    Wait for the provisioning to complete. Once done, a src/aws-exports.js file with the resources information is created.

  8. Run the project locally:

    npm start

Clean Up

To clean up the project use:

amplify delete

to delete the resources created by the Amplify CLI.


Change Log

1.0.0:

  • Initial release.

License

This library is licensed under the Apache 2.0 License.

About

Sample Survey Tool Progressive Web Application written with React, GraphQL, AWS AppSync & AWS Amplify

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •