Production Ready Application Built in Three Weeks Delivers Critical Help in Orange County United Way Covid-19 Response

When the COVID-19 pandemic hit the United States, Orange County United Way quickly identified that many local residents could face economic hardship, impacting their ability to pay rent. The organization knew that without assistance, certain populations may face the horrible reality of homelessness. In response, Orange County United Way mobilized their team to provide pandemic financial assistance through the nonprofit’s Homelessness Prevention Program.

Orange County United Way’s Homelessness Prevention Program is supported by the Pandemic Relief Fund; created to assist low-income individuals and families at imminent risk of homelessness, the current Orange County population experiencing homelessness, and vital social and human services. In order to distribute the funds, Orange County United Way designed an ‘application-to-approval-to-fund’ process, however with limited staff and resources, they sought out solutions to more swiftly manage the multi-step process. Orange County United Way wanted to harness the power of technology to serve more people and faster, so they called on AWS. The team at Orange County United Way collaborated with AWS to build a web and mobile application so individuals can submit requests for financial assistance through the nonprofit’s Homelessness Prevention Program.

Chris Ticknor, Chief Transformation Officer of Orange County United Way, describes the situation, “We exist on fundraising, which sometimes means we can’t easily scale our call center. We felt that seeking out an application development solution with AWS was the best way to deliver help quickly. AWS proposed using AWS Amplify as the best path to create a web and mobile application that our team could quickly deploy and feel confident that it’s secure, reliable and scalable.“

AWS Amplify provides low code solution for building cloud backend infrastructure – speeding development velocity

The AWS team recommended building the application with AWS Amplify because time to market, security and reliability were essential. AWS Amplify is a set of tools and services that enable mobile and front-end web developers to build secure, scalable full stack applications, powered by and hosted on AWS.

The Amplify Framework consists of 3 components including libraries, UI components, and a CLI toolchain. Components can be used together or on their own. Organized by use case, such as authentication, storage, or API. They are open source and work with existing front-end frameworks (React, React Native, Angular, Vue, Ionic) and iOS/Android IDEs. The Amplify Command Line Interface (CLI) is a toolchain to create and maintain serverless backends on AWS. The Amplify Console provides hosting for static applications on AWS in just a few clicks by connecting to a repository.

Over the course of three weeks, Orange County United Way used Amplify to build and launch their new AssistOC application. AssistOC manages the ‘application-to-approval-to-fund’ process and has alleviated the call center from being inundated and creating lengthy queue times. With the AssistOC app, financial relief processing is accelerated so it can arrive in time for those who need it the most.

“Building the app with Amplify made it easy to blend technology and human touch points. Not all users have similar devices, it had to be as generally available as possible. We thought the best way to do this was as a responsive web app, so most devices would support the app. The use of a mobile devices’ camera is essential to upload the critical personal verification documents needed for approval.” states Ticknor.

Building the application: Solution Overview

The solution used in this project relied on the capabilities of AWS Amplify and React. React is a widely known open-source JavaScript library for building user interfaces and is supported by the AWS Amplify Framework. By leveraging Amplify and the pre-made libraries, the team was able to seamlessly integrate AWS services into the application. With the flexibility and speed of Amplify, the team was able to design, build, test, and deploy the application-to-approval-to-fund web app in just a matter of weeks. The overall architecture can be seen below.

The architecture uses the Amplify console to host the application based on source code uploaded to CodeCommit. An added benefit of hosting on Amplify is that it provides CI/CD right out of the box, which means any updates made to the CodeCommit branch automatically trigger a new build. This drastically speeds up the iterative development and testing phase. The application code itself leverages the Auth, Storage, and API libraries to interface with the correlating AWS services (i.e., Amazon Cognito, Amazon API Gateway, and Amazon S3). Each of these libraries are important building blocks that can be used to build any application, but let’s breakdown each of these application components in this example

When building an application there are many requirements that must be taken into consideration such as the following:

• Security with Authentication and Authorization
• Storage of static content and application data
• UI/UX
• API management
• CI/CD

AWS Amplify helps accomplish all of this. For each workflow and application requirement there was a library in Amplify ready to be used. The diagram below shows how each application workflow was able to leverage the different features of Amplify.

There are five core workflows created with Amplify as listed below:

1. Authentication
2. Authorization
3. API Management
4. Storage
5. CI/CD

Each workflow is able to seamlessly integrate with AWS services via the provided Amplify library. One benefit of Amplify is that the libraries only have to be initialized once within the application, which can be done via the Amplify CLI or manually as shown below.

Amplify.configure({
    Auth: {
        identityPoolId: ' XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab’, 
        region: 'XX-XXXX-X', 
        userPoolId:’ XX-XXXX-X_abcd1234’,
        userPoolWebClientId: ' XX-XXXX-X_abcd1234'
    },
    Storage: {
      AWSS3: {
          bucket: 'bucket-name', //REQUIRED -  Amazon S3 bucket
          region: 'XX-XXXX-X' //OPTIONAL -  Amazon service region
      }
    },
    API: {
        endpoints: [
            {
                name: "API_1",
                endpoint: "https://your_api_gateway_endpoint"
            },
            {
              name: "API_2",
              endpoint: "https://your_api_gateway_endpoint"
          }
        ]
    }
});

After configuring the Amplify library, the application is ready to work with AWS services such as AWS Cognito for Authentication and Authorization, S3 for object storage, and API Gateway for API management. Let’s walk through each of these components.

1. Authentication and Authorization

Security is critical in any application and Amplify equips its developers with the Auth library to build secure systems. When building an application, it is likely the case that some form of user that needs to be able to gain access to the site. The process of verifying a user is known as authentication. Similarly, once a user has been verified you need to ensure they have access to the proper resources and APIs, which is known as Authorization. These workflows are enabled by the Auth library and can be initialized with Amplify.

Auth: {
  identityPoolId: ' XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab’, 
  region: 'XX-XXXX-X', 
  userPoolId:’ XX-XXXX-X_abcd1234’,
  userPoolWebClientId: ' XX-XXXX-X_abcd1234'
},

As seen in the configuration, the auth package is connected to an identify pool and user pool in Cognito to manage user identities and access to the application. For authorization, a Cognito authorizer was used to lock down access to the APIs in API Gateway. This ensures that only authenticated and authorized users have the ability to use the APIs. Through this, OC United Way was able to quickly deploy a safe and secure web application.

2. API Management

When building applications there is likely a defined API that must be used for services to communicate with each other. API Gateway is a great service that helps developers host, build, and deploy scalable secure APIs, but at the code level Amplify helps manage this. Using the API library, the API endpoint or even multiple API endpoints can be configured with Amplify as seen below.

API: {
  endpoints: [
    {
      name: "API_1",
      endpoint: "https://your_api_gateway_endpoint"
    },
    {
      name: "API_2",
      endpoint: " https://your_api_gateway_endpoint "
    }
  ]
}

Not only does the API library help manage API calls, but it can also work together with the Auth library to secure APIs. As seen in the example below, an API can be secured via a Cognito authorizer which requires a valid session token in order to get access to the API. The session token can be extracted via the Auth.currentAuthenticatedUser() function call.

adminGetUser = async ()=>{
  var user = await Auth.currentAuthenticatedUser();
  let apiName = 'API_1';
  let path = '/admingetuser';
  let params = { // OPTIONAL
    body: {
      "info":{
        "email":this.state.email,
      }
    }, // replace this with attributes you need
    headers: { Authorization: `Bearer ${user.signInUserSession.idToken.jwtToken}` }
  }
  return await API.post(apiName, path, params);
}

3. Storage

While security and APIs are important, it is a common pattern to have to manage static files for an application. Fortunately for developers, AWS has S3, a scalable object level storage service. At the code level Amplify provides the Storage library, which enables configuration of an application with S3 buckets in AWS. This can be seen in the example below.

Storage: {
  AWSS3: {
    bucket: 'bucket-name', //REQUIRED -  Amazon S3 bucket
    region: 'us-east-1', //OPTIONAL -  Amazon service region
  }
},

Once configured, the library can upload and download files via the already defined put and get functions. The Amplify documentation can be referenced to correctly configure the AWS environment.

Storage.put('test.txt', 'Hello')
    .then (result => console.log(result)) // {key: "test.txt"}
    .catch(err => console.log(err));

4. CI/CD

One thing that cannot be emphasized enough is the ability to quickly iterate. It can be tedious to manual build deployment pipelines and automation, but with Amplify this no longer becomes a concern. Amplify actually automates this process for you out of the box and all you have to do is point it at your code repository. Once Amplify knows where your code is, it can monitor your deployment branch for changes and whenever a change is detected a new build will be triggered. This drastically speeds up the iterative design process that developers go through when building and testing applications. The image below is an example of what you see in the console when a build is triggered. You get step by step updates about the status of your builds.

This process works by referencing a buildspec file that defines the build commands to be used. Once Amplify sees this file it will take that source code and deploy it to host your application with S3 and CloudFront. An example of this buildspec file for a React application can be seen below.

version: 0.1
frontendUser:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Summary

By utilizing these core building blocks in Amplify, the team was able to produce a production ready application in three weeks that has all the features of a modern cloud native web app. It has secure authentication and authorization, storage for static files, API management, and even an automated CI/CD pipeline. These design patterns can be used for many different systems and can drastically improve developer workflows enabling teams to make a difference and truly focus on important tasks.

As of September 1st, Orange County United Way has relied on AssistOC for their application process and distributed $2.6 million in the form of $500 emergency debit cards to more than 5,198 families who were at risk of homelessness due to a change in income caused by the pandemic. Chris Ticknor, Chief Transformation Officer of Orange County United Way shares the next steps “Overall, financial security is another big challenge and we intend to use the AssistOC application to connect the most vulnerable to resources that can help with guidance and assistance. Lastly, scaling this solution with more communities is of huge interest to us. We want to spread the success and make it easier for those to receive assistance but, also those that are trying to assist. We’re looking to scale together.”

AWS Amplify Resources

• Overview
• Build a Full-Stack React Application Tutorial
• Amplify Get Started Docs

About the authors

Benjamin Fields is a Solutions Architect for Strategic Accounts based out of Seattle, Washington. His interests and experience include AI/ML, containers, and full stack software development. You can often find him out climbing at the nearest climbing gym, playing ice hockey at the closest rink, or enjoying the warmth of home with a good game.

Elise Greve is a Product Marketer for the AWS Front-end web and mobile development which includes Amplify and AppSync. She’s based in Seattle and is an avid diver and fish geek.