React AWS Serverless Application with a Serverless backend.
General Functionality:
- The main website is currently available through AWS. Chat widget is bottom right icon.
- The API endpoints this website hits to get the chat widget working. Note: Do not hit this directly, its an API.
- The other github repository with the React code for deployment using this API - ignore the netlify this should be disabled (I have used it in the past)
The call flow can be displayed in the files (they were exported):
- _VF First Contact Flow
- _VF Call Flow
- _VF Queue Integration
I've hopefully included the phone number to reach the contact center by email. If I somehow forgot please remind me.
The capabilities of the call center:
- First contact flow that routes to a flow that is either chat or calls.
- The calls are routed to three "separate" queues (which are actually all the same as this is not production).
- These separated queue's represent different regions in Canada (Eastern/Western) and one International Line.
- Multilanguage support.
- The default in queue music.
The capabilities of the chat widget:
- It calls to a Lex bot that can perform some basic answers to questions, typically before the customer talks to an agent.
- The customer can talk to an agent anytime, and if a message is received the bot doesn't understand it gives a generic response. If someone is on the other end in the call center it allows communication between the two people.
- There is some very basic error handling performed when some API calls fail, that generates an error on the chat widget to that effect.
- I am going to add some more unit tests, and subsequently refactor some of the messier code on the last day (Friday Dec 4th) before totally handing this off to you.
The tech stack is:
- React
- API Gateway
- AWS Lambda
- Node.js
- Amazon DynamoDB
- AWS Connect
- AWS SAM Templates
- AWS Lambdas
- A custom lambda function I built to retrieve the area code of the caller and place them in an appropriate queue
- The relatively sparse test folder, that has a few tests surrounding the above lambda function
- The SAM template file that constructs all the infrastructure code
- The main file edited on the frontend to create the chat call center widget
- The React Saga that calls the API endpoints for the chat widget
- Front end integration test I had to write in order to get the chat widget working
Prerequisites: Node.js and AWS CLI installed
- Create an AWS Account and IAM User with the
AdministratorAccess
AWS Managed Policy - Run
aws configure
to put store that user's credentials in~/.aws/credentials
- The production build of the react site comes from the other linked repository.
npm run build
to build that project into the build folder of that repository, and then copy and paste it over to the public folder of this repository. Do not delete the app.js file in the public folder when doing this. - Create an S3 bucket for storing the Lambda code and store its name in a shell variable with:
export CODE_BUCKET=<bucket name>
- Npm install:
npm install
- Build:
npm run build
- Upload package to S3, transform the CloudFormation template:
npm run package
- Deploy to CloudFormation:
npm run deploy
- serverless-todo on Github
- serverless-todo on the AWS Serverless Application Repository
The code I used, which wasn't mine, I checked the licenses for all of it. Although I am not comfortable stating the exact license of every codebase, I tended to pull from either AWS codebases that are typically MIT, or pull from applications that are simple TO-DO apps and build on top of them. One of the licenses I am using is listed below:
© 2017-2019 Evan Chiu. This project is available under the terms of the MIT license.