There is a working site of this application at Heroku. Befor you dive into the code you should check it out.
Feel free to leave feedback or request for additional features.
This application uses the Riot Games API to collect an analyze data concerning champion masteries. It was created as part of the Riot Games API Challenge 2016 The site is divided in two major parts.
Researching a single summoner with all its summoner masteries. This feature is available for every region. The data can then be sorted by champion points, missing points to the next level or the current standing in the region if available.
This site uses Game data of 2 servers to create an overview over the players in this regions. The collected data is used to show comparison values in the Home tab aswell. The servers used are: Europe West (EUW) and North America (NA).
Currently a total of approximately 4,000 summoners are on file. This includes:
- Most popular Champions by accumulated champion points
- Player ranking on a single champion
- Average and total champion points on a champion
The application is build on top of the MEAN-Stack using a MongoDB, ExpressJS and NodeJS for the server and AngularJS for the frontend. Additionally some plugins for node and angular where used. You can find a full list in the package.json for node modules and bower.json for angular plugins. For frontend look and feel the popular Bootstrap-Framework was used in combination with UI Boostratp a framework to integrate AngularJS and Bootstrap.
To start the application after downloading or forking it you need to have a working installation of NodeJS including npm, the node package manager.
The following commands are needed if you just installed node and npm:
npm install -g bower
This installs bower globally. As bower is used in many different apllications as package manager this is recommanded. The dependency is included in the package.json anyway.
npm install
This installs all dependencies for node as listed in the package.json.
bower install
This installs all dependencies for angular as listed in the bower.json.
Then you have to add a key.js file under app/config. This file has to have the following structure:
module.exports = {
apiKey: 'Your API key',
mongoDB: 'Your MongoDB connection String'
};As the contained data is a potential security risk it is not contained in this repository and shouldn't be contained in your fork either!
Then you can start the application from the main directory with:
node server.js
For easier development the application uses the TaskRunner Grunt. If you have installed it you can start the application by simply using
grunt
in the main directory. This call performs a semantic and documentation/comment check. Additionally the minimized css and javscript files are build. Afterwards the node server is started and the files are monitored for changes. The build is automatically repeated on every filechange.
The application is generally divided as follows (not all files are listed):
app - The full server implementation
config - The Configuration files
server - The server side implementation
controllers - The logic of the server
models - The Schematics (kind of Objects) for MongoDB
routes - The API routes provided by the server
routes.js - Automatic assembly of all routes
showRouting.js - File to show all routes on server startup
downloads - File for stored champion data json
node_modules - Folder for the node modules (not in git)
public - The frontend implementation
dist - Distribtion directory with minimized files for deployment to a production environment
images - Directory for all used images
libs - Folder for the angular plugins (not in git)
system - Main frontend implementation folder
controller - Angular Controller for the pages
css - Stylesheets
services - Angular Services
views - HTML pages
app.js - Main Angular file
appRoutes.js - Frontend navigation
Gruntfile.js - Grunt task runner configuration
server.js - Server base file