Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Overwatch Team Comps

Build Status

A web app that allows Overwatch players to plan out their team composition for every point of every map on both offense and defense. Players should be able to save their team comps as well as be able to easily share their team comps.

Feature planning is done on our Trello board.

If interested, see also our requirements document that contains a high-level description of all the end-user features of this product.

App Structure

  • Ruby on Rails web app using React for a speedy, single-page front end
    • This means most views will be implemented in JSX in app/assets/javascripts/components/ instead of ERB in app/views/.
  • Rails endpoints will provide a JSON REST API for the front end
  • PostgreSQL database for convenient deployment to Heroku
  • Potential integration with OAuth providers such as Discord for authentication built on top of Devise

How to Develop

You will need Ruby, Rubygems, PostgreSQL, and npm installed.

bundle install
npm install
bin/rake db:setup
bundle exec rails s

Visit localhost:3000.

You can view the style guide at localhost:3000/pages/styleguide.

To add a new JavaScript package: npm install WHATEVER_PACKAGE --save

OAuth in Local Development

To test OAuth signin locally, you will need to create a API app, cp dotenv.sample .env, and copy your app key and secret into the .env file. You will also need to use a service like ngrok to have a public URL that will hit your local server. Start ngrok via ngrok http 3000; look at the https URL it spits out. In your app, set as the "Register Callback URL" value. Update .env so that BNET_APP_HOST is set to the same as ngrok spit out and you used in the app; omit the https:// in .env. Start the Rails server via bundle exec rails s. Now you should be able to go to and click the link.

Installing PostgreSQL on macOS

There are multiple ways to install PostgreSQL, but the recommended way is through homebrew:

brew install postgresql

To manage your installation of PostgreSQL, one way is to use brew/services:

brew install homebrew/services
brew services start postgresql

At anytime you can stop the PostgreSQL service:

brew services stop postgresql

How to Test

After running through the development setup above, then:

npm test # to run the JavaScript style checker and JavaScript tests
bundle exec rspec # to run Rails tests

You can run just the style checker via npm run style. You can run just the JavaScript tests via npm run unit-test.

Snapshots are used in JavaScript tests -- see spec/javascript/components/__snapshots__/ -- to test that a React component is rendered the same way consistently based on the props it's given. If you update a component, a test may fail because the snapshot is now different from what is rendered. Manually compare the two and if the change is expected, update the now out-of-date snapshot with npm run unit-test -- -u.

See also these links about the JavaScript tests:

How to Deploy to Heroku

Create an app on Heroku.

Create a app and set its "Register Callback URL" to

heroku git:remote -a your-heroku-app
heroku buildpacks:add
heroku buildpacks:add
heroku config:set BNET_APP_ID=your_app_id_here
heroku config:set BNET_APP_SECRET=your_app_secret_here
heroku config:set
git push heroku master
heroku run rake db:migrate
heroku run rake db:seed
heroku open


These show the design we are building toward:

Sample Mockup of Team Comp Form 01

Sample Mockup of Team Comp Form 02

Sample Mockup of Hero Pool Page

Sample Mockup of Hero Select Drop Down Menu


Plan your Overwatch team composition per map. Share your team comp with others.





No releases published


No packages published
You can’t perform that action at this time.