A Javascript application that allows people to create their own hero to help Overwatch end the Omni Crisis!

This web app makes use of the following technologies:

Frontend

• Vanilla Javascript
• Customized CSS3 styling

Backend

• Ruby [2.6.1]
• Rails [~> 6.0.2, >= 6.0.2.1] - MVC web framework used as an API
• Rack-cors - Handles Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible
• Bootsnap [>= 1.4.2]
• PostgreSQL [>= 0.18, < 2.0] - Database
• Active Model Serializers

Before you continue, please make sure you have installed the latest version of:

• Ruby
• Ruby on Rails
• PostgreSQL
• Javascript

To launch this application, you'll have to follow these steps:

Backend Installation

• Clone this repo in your computers terminal.
• cd into that directory and open it in your text editor.
• Make sure PostgreSQL is running on your machine.
• Once your editor opens, cd into HeroesOfTheWorldApi and run:
  • bundle install to install the required dependencies.
  • Run rails db:create to create a database locally.
  • Run rails db:migrate to create tables into the database.
  • Run rails db:seed to create seed data.
  • Run rails s to run the server.

Frontend Installation

• Open up another terminal in heroes_of_the_world directory and run:
  • npm install to install all dependencies.
  • npm start to start server.
  • Once you're taken to the web app, ensure Frontend is running at http://localhost:3000.

The main page displays all category's of Overwatch's heroes.

When a heroes playercard is clicked, more stats about them are shown!

To create a hero, simply click the 'Create New Hero' button and fill out the required fields.

Once you filled out the form and click 'Create', your hero will be displayed at the bottom of the page!

The user could also like and delete their playercard.