Skip to content
Overwatch Challenge project repo
Branch: master
Clone or download

Overwatch Challenge

This is the repo for the Overwatch Challenge Open Source project.

Please check out the User Guide for visual instructions here.

This project provides an application that teams can use to gamify their learning processes.

  • Users create "Activities" every time they learn somthing.
  • Everyone comes together at the end of a week to see who scored the highest
  • Admins maintain the scores
  • Scores and activities are saved for future reference

This project uses Google's Firebase with the Angular Fire 2 Library for the following:

  1. Hosting
  2. Authentication
  3. Database Storage (Document Driven)
  4. Cloud Functions

This project also uses CircleCI for deployments.

Project Organization

This project is organized into the following folders:

  1. docs is where the markdown files are stored that are used in the instrutions site
  2. frontend is where the Angular 2+ application code resides
  3. functions is where the Google Firebase Cloud Functions code resides
  4. scripts is where all deployment scripts are located

Frontend Project Organization

The frontend project is organied loosely based on feature in the following folders:

  1. /src/app/activity all components that are used to work with displaying and storing activity in the application
  2. /src/app/static all static pages that show users or activity in the application
  3. /src/app/users all components that are used to work with user accounts in the application
  4. /src/app/models any models used in the application

Slack Integeration

  • The project includes a slack integration for team members. Once you get registered, one of the admins can send you an invite to the slack channel.
  • The application uses Fireabase Cloud Functions to emit slack notifications (1) when users are registered and (2) when activities are created

Running Locally

  • npm run frontend-serve runs the frontend angular application locally
  • npm run frontend-build builds the frontend angular application locally
  • npm run frontend-deploy deploys the frontend application to firebase
  • npm run functions-serve runs the firebase cloud functions locally
  • npm run functions-deploy deploys the firebase cloud functions
  • npm run environment-variables loads in the environment variables for the functions index.js file
  • npm run frontend-cypress-test runs the cypress tests locally with a test runner
  • npm run frontend-cypress-run runs the cypress tests headless for CI deployments

Running With Your Own Firebase Project

User Guide

  • User guide code is in the docs folder
  • User guide is built with MkDocs
  • In order to deploy a new copy of the user guide, you'll need to have MkDocs installed on your computer by following the directions here
  • Once you have MkDocs installed, build the site by running (from the project root) npm run docs-build
  • When you're ready to deploy the site, deploy the site to be hosted on GitHub pages with npm run docs-deploy
  • Note that the message for the commit includes "[ci skip]", this is so that CircleCI will not run a build on the gh-pages branch

Cypress Testing

  • The frontend application uses Cypress for e2e testing
  • To run tests from the project root run npm run frontend-cypress-test
  • Note that you'll need to run the npm script for environment variables first with npm run environment-variables because the values used in testing are Cypress environment variables (see docs for more info)
  • When the project is deployed with CircleCI, Cypress is run in the pipeline with npm run frontend-cypress-run
  • When running the cypress tests for the frontend application, the npm module start-server-and-test is used
  • The use of http-get was necessary with start-server-and-test because the frontend is an Angular Webpack project (see special note here)
  • Cypress environment variables are loaded in from the cypress.json file
  • Please checkout my blog post on Cypress Testing

Future Improvements

Future improvements on the horizon (PR's Welcome!):

  1. Refactor service calls to be in specific classes around their function
  2. Build out more tests for code coverage (potentially may be using Cypress for this in the future)
  3. Add more visual elements
  4. Add more details to the instructions (docs) site
You can’t perform that action at this time.