Sample project to demo latest development stacks. The idea is to build a live train location updates.
Below techniques are being used for development:
- NestJS for backend/RestAPI development.
- ReactJS for frontend development in which:
- ReduxJS is used for state management.
- Redux Toolkit Query is used for calling RestApi.
- AWS WebSocket API is used for handling live update of train feeds.
- AWS Lambda is used for backed WebSocket API to live update related logic.
- AWS DynamoDB is used for storing clients' connections.
- AWS Cognito is for managing user signin, signup experiences.
- AWS SES is for sending invitation emails.
- Terraform is for cloud infrastucture development.
- Google Map is used for displaying train locations.
- TypeScript is the main development language.
- Users can signup with email, username, first name and last name
- After verifying their emails, users then can signin and start using the app.
- Users can update their personal info including first name, last name, email but not username. Updating email will require user to verify their email again.
- Users can view VR's train info in either table view or map view.
- Users can invite other users by sending invitation to an email address.
- Users can optionally be allowed to access the updating train locations endpoint.
- VR's trains info can be read and fed into out system using
feeder
sample app.
To get the app funtion properly there are 5 components have been developed.
/backend
: serve data to FrontEnd and train locations feeder apps. Code can be found under/frontend
: user front facing app./infra
: terraform scripts for setting up infrastucture/wsapi
: lambda function to handle users' WebSocket connections/feeder
: a sample partner application that read VR's train info and feed into the app using a credentials with needed permisisons.
- Pull the source
- Create an AWS development account with below permissions. NOTE: this account is supposed to be used for deployment as well, and thus it is powerful. So keep if safe and DO NOT use it as runtime credetial.
AmazonAPIGatewayAdministrator
AmazonAPIGatewayInvokeFullAccess
AmazonCognitoPowerUser
AmazonDynamoDBFullAccess
AmazonS3FullAccess
AmazonSESFullAccess
AWSLambda_FullAccess
CloudWatchLogsFullAccess
IAMFullAccess
-
Run
aws configure
to setup the dev account -
Backend
.env
need to be created with below values
AWS_COGNITO_REGION=
AWS_COGNITO_ID=
AWS_COGNITO_CLIENT_ID=
AWS_DYNAMODB_REGION=
AWS_DYNAMODB_TABLE=
AWS_WS_CONNECTION_URL=
AWS_SES_REGION=
AWS_SES_FROM_EMAIL=
SIGNUP_BASE_URL=
- Backend
.env
need to be created with below values
REACT_APP_AWS_COGNITO_ID=
REACT_APP_AWS_COGNITO_CLIENT_ID=
REACT_APP_API_BASE_URL=
REACT_APP_WS_URL=
REACT_APP_GOOGLE_MAP_API_KEY=
- Open
ubisecure.code-workspace
- Invitations can now only work with manually verified emails cause the SES account need to be verified at domain level and moved out of sandbox.
- Frontend and Backend are in development mode, there is no live demo yet.
- Deployment strategy for Frontend and Backend. Possible ideas include Route53, CloudFront, S3 for Frontend and API Gateway, Lambda for Backend.
- Security enhancement for Google Maps API Key by adding accepted domains.
- Security enhancement for WSS endpoint by adding WAF.
- Security enhancement for WSS by asking clients to send id token for verification.