Git Product home page Git Product logo

ubisecure-trainloc's Introduction

Train Tracker

Sample project to demo latest development stacks. The idea is to build a live train location updates.

Development Stacks

Below techniques are being used for development:

  1. NestJS for backend/RestAPI development.
  2. ReactJS for frontend development in which:
  3. ReduxJS is used for state management.
  4. Redux Toolkit Query is used for calling RestApi.
  5. AWS WebSocket API is used for handling live update of train feeds.
  6. AWS Lambda is used for backed WebSocket API to live update related logic.
  7. AWS DynamoDB is used for storing clients' connections.
  8. AWS Cognito is for managing user signin, signup experiences.
  9. AWS SES is for sending invitation emails.
  10. Terraform is for cloud infrastucture development.
  11. Google Map is used for displaying train locations.
  12. TypeScript is the main development language.

Features

  1. Users can signup with email, username, first name and last name
  2. After verifying their emails, users then can signin and start using the app.
  3. 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.
  4. Users can view VR's train info in either table view or map view.
  5. Users can invite other users by sending invitation to an email address.
  6. Users can optionally be allowed to access the updating train locations endpoint.
  7. VR's trains info can be read and fed into out system using feeder sample app.

Development components

To get the app funtion properly there are 5 components have been developed.

  1. /backend: serve data to FrontEnd and train locations feeder apps. Code can be found under
  2. /frontend: user front facing app.
  3. /infra: terraform scripts for setting up infrastucture
  4. /wsapi: lambda function to handle users' WebSocket connections
  5. /feeder: a sample partner application that read VR's train info and feed into the app using a credentials with needed permisisons.

How to start developing?

  1. Pull the source
  2. 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
  1. Run aws configure to setup the dev account

  2. 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=
  1. 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=
  1. Open ubisecure.code-workspace

Limitations

  1. 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.
  2. Frontend and Backend are in development mode, there is no live demo yet.

Todos

  1. Deployment strategy for Frontend and Backend. Possible ideas include Route53, CloudFront, S3 for Frontend and API Gateway, Lambda for Backend.
  2. Security enhancement for Google Maps API Key by adding accepted domains.
  3. Security enhancement for WSS endpoint by adding WAF.
  4. Security enhancement for WSS by asking clients to send id token for verification.

ubisecure-trainloc's People

Contributors

chinhnguyen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.