Giter VIP home page Giter VIP logo

run-log's Introduction

Run Log

Overview

Web application for logging runs and tracking progress. Includes an AWS serverless backend and React-based frontend.

If you'd like more information on the product and the technical approach, review this presentation.

Important warning about security

Read this before running the application.

The authentication mechanism is not secure, because:

  • The credentials are stored as part of the front-end application state, and are hence exposed as plain text to debugging tools (e.g., React Developer Tools)
  • Valid credentials stored in environment variable in CI/CD and lambdas as plain text

Do not reuse credentials with any other system, and treat the credentials as insecure. Do not store sensitive information.

Note that this application uses SSL to transmit HTTP requests, so the use of HTTP Basic Authentication should be secure. It is the manner in how this information is stored in frontend and backend that is not sufficiently secure; not how credentials are transferred.

This warning will be removed once a more secure authentication method is used. Meanwhile, treat this like a demonstration application.

Repository structure

  • .circleci/config.yml: CI/CD configuration, using CircleCI
  • archive/: currently unused files, reserved for quick reference
    • backend-aws/: experimental code using AWS
    • backend-http4s/: previous backend, which used the Scala framework, http4s
  • backend/: source code for backend web API. (E.g., AWS Lambda source code)
  • frontend/
    • README.md: details and instructions for frontend web application
  • terraform/
    • staging/: manages build and configuration infrastructure
    • web/: manages web infrastructure (e.g., API Gateway, Lambdas, CloudFront, etc)

Setup

Here, we'll discuss how to deploy the application to AWS using CircleCI.

For more information:

  • We won't cover all the steps that happen within the CI/CD process; for more details, see .circleci/config.yml.
  • For more details on how to build and test the front-end independently, see frontend/README.md.

Steps:

  1. In AWS Console, under IAM > "Users", create a user with sufficient privileges.
    • You could grant AdministratorAccess, though that will give broader access than required; e.g., account management capabilities as well as the ability to create resources in unrelated AWS services.
  2. For this user, go to "Security credentials" > "Access keys", and click "Create access key".
    • Store the secret somewhere secure; can't be retrieved again later.
  3. Clone this repository in GitHub
  4. In CircleCI, go to "Add Projects"
    • Find "run-log", and click "Set Up Project"
    • This may initiate a build that fails, which is expected
  5. In Circle CI "Jobs" > "run-log" (click gear icon) > "Environment Variables", add the following variables:
    • AUTHORIZED_TOKENS: comma separated list of Base64-encoded "username:password" pairs
      1. E.g., say you want two users: one with username foo with password bar, and another with username demo with password secret
      2. You can find the two base64-encoded strings in Unix:
      $ echo -n "foo:bar" | base64
      Zm9vOmJhcg==
      $ echo -n "demo:secret" | base64
      ZGVtbzpzZWNyZXQ=
      
      1. So AUTHORIZED_TOKENS would be Zm9vOmJhcg==,ZGVtbzpzZWNyZXQ=
    • AWS_ACCESS_KEY_ID: the "Access key ID" for the IAM user you created
    • AWS_DYNAMODB_TABLE_NAME: name for the DynamoDB table
      • Note: table must not exist already, or else you will need to manually import it into Terraform state.
    • AWS_S3_BUCKET_NAME_STAGING: the name of the bucket to use for hosting the staged assets
      • Note: do not include "s3://" prefix
      • Note: if this exists already, you'll need to manually import into Terraform
    • AWS_S3_BUCKET_NAME_WEB: the name of the bucket to use for hosting the static web resources
      • Note: do not include "s3://" prefix
      • Note: if this exists already, you'll need to manually import into Terraform
    • AWS_SECRET_ACCESS_KEY: the secret key for the IAM user you created
    • CORS_ALLOWED_ORIGINS: comma-separated list of domains serving web resources permitted to access resource
      • E.g., http://localhost:8080,http://run-log.bryanesmith.com
  6. Whenever you push any commits to GitHub, you will trigger a new CI/CD execution in CircleCI

The URL to your CloudFront distribution is available in the output of step Provision web infrastructure with Terraform. Look for:

...

Outputs:

...
distribution-url = xxxxxxxxxxxxxx.cloudfront.net
...

The url for your instance will be https://xxxxxxxxxxxxxx.cloudfront.net.

Screenshots

Login Screen

Login screen.

Dashboard

The dashboard with 30-day view loaded.

Manage Events

List of all events. You can add, edit, remove, and favorite events.

Add Event

To log a run, click on "Add Entry" and select "Run".

run-log's People

Contributors

bryanesmith avatar dependabot[bot] avatar

Watchers

 avatar  avatar  avatar

Forkers

goodjourney

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.