Overwatch Team Comps

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 Battle.net 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 Battle.net app, set https://your-ngrok-id-here.ngrok.io/users/auth/bnet/callback as the "Register Callback URL" value. Update .env so that BNET_APP_HOST is set to the same your-ngrok-id-here.ngrok.io as ngrok spit out and you used in the Battle.net app; omit the https:// in .env. Start the Rails server via bundle exec rails s. Now you should be able to go to https://your-ngrok-id-here.ngrok.io/ and click the Battle.net 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:

• Shallow rendering with Enzyme
• Jest matchers
• ESLint rules

How to Deploy to Heroku

Create an app on Heroku.

Create a Battle.net app and set its "Register Callback URL" to https://your-heroku-app.herokuapp.com/users/auth/bnet/callback.

heroku git:remote -a your-heroku-app
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-nodejs.git
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-ruby.git
heroku config:set BNET_APP_ID=your_app_id_here
heroku config:set BNET_APP_SECRET=your_app_secret_here
heroku config:set BNET_APP_HOST=your-heroku-app.herokuapp.com
git push heroku master
heroku run rake db:migrate
heroku run rake db:seed
heroku open

Mockups

These show the design we are building toward: