Skip to content
Web application that allows you to get the counters of a specific League of Legends champion.
TypeScript HTML Python JavaScript CSS Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github 💰 Oct 8, 2019
e2e initial commit Sep 12, 2019
src better quality gif 📹 Oct 8, 2019
.gitattributes Initial commit Sep 12, 2019
.gitignore gitignore addition Oct 7, 2019
LICENSE Initial commit Sep 12, 2019
README.md docs docs docs 📚 Oct 8, 2019
SECURITY.md 🔒 Oct 8, 2019
_config.yml playing with Jekyll config 👷 Oct 8, 2019
angular.json initial commit Sep 12, 2019
browserslist initial commit Sep 12, 2019
deploy.sh deploy script Oct 7, 2019
karma.conf.js initial commit Sep 12, 2019
package-lock.json updates Sep 17, 2019
package.json updates Sep 17, 2019
scrapy.py added labda screenshot 🏮 Oct 8, 2019
tsconfig.app.json initial commit Sep 12, 2019
tsconfig.json read json Sep 19, 2019
tsconfig.spec.json initial commit Sep 12, 2019

README.md

LoL-champ-select

Simple mobile friendly Angular app designed for League of Legends players to use during champion selection. It allows you to pick a champion, and to quickly get who counters them, according to the most updated champion data on the web.

try it here.

What It Looks Like

How It Works

In order to achieve great speed, the rendering of the champions counter data is done using a json file called data.json that is located within the project assets. However, we keep our data up to date by continuously running a python script that scrapes https://lolcounter.com/ for new counter data. Here is how this is automated using AWS

Lambda Design

Screenshot

Explanation

lol-scrapy is an AWS Lambda that executes a python script (you can find it in this repo as scrapy.py) that does the scraping of the website for data. This Lambda connect with the lol-champ-select AWS S3 Bucket that hosts the production build of our Angular app, which allows the Lambda to directly update the data.json file used to display our champion counter data. In order to give you the most updated version of counter data (in case a new champion is out, the votes change, etc...), we use AWS CloudWatch Events to trigger this Lambda every 1 day.

Run Locally

Clone this Repository
git clone https://github.com/Marwan01/LoL-champ-select.git
Go to the cloned Repo cd LoL-champ-select
Install Dependencies npm install
Run npm start
On your browser, go to http://localhost:4200

Build & Deploy

Run sh deploy.sh to execute the deploy script which commits and pushes your changes to Github, creates a production build, and uploads the result to your S3 bucket.

Running Unit Tests

Run ng test to execute the unit tests via Karma.

Running e2e Tests

Run ng e2e to execute the end-to-end tests via Protractor.

Tools Used

  • Angular 8: Simple and fast front-end framework.
  • Python: Counter data was fetched from https://lolcounter.com/champions using scrapy.py.
  • AWS: S3, Lambda, CloudWatch to allow the hosting of the app, and the updating of the data.

ScreenShots

LoLchampselect

Screenshot

Lolcounter

Screenshot

This project was generated with Angular CLI version 8.3.0.

You can’t perform that action at this time.