/web-app-from-scratch-1920

This is a web app that fetches the match history of a league of legends player of the EUW server.

MIT LicenseMIT

Live Demo

https://ramon96.github.io/web-app-from-scratch-1920/

Description

This wafs project makes use the api from the Video game league of legends. You can search a player from the EUW server and finds this persons match history

Search Screen

Table of content

  • Installation
  • Actor Diagram
  • Interaction Diagram
  • The Api
  • DDragon
  • Features
  • Wish list
  • Acknowledgements
  • License

Installation

Use the command
https://github.com/Ramon96/web-app-from-scratch-1920.git
To clone the project locally.

Actor Diagram

Actor Diagram

Interaction Diagram

Interaction Diagram

The API

Im made use of the league of legends api. The api is great, I can get alot of information with it. Way more than I anticipated. The problem I had was that my key was only active for 24 hours. After those 24 hours I had to request a new one. A work around for that is to get manually aproved wich takes alot of time.

In order to Fetch any information about a player you are in need of a Encrypted user id wich you can retrieve from one of the endpoints. I used this key to get the Match history of the chosen player and get the data per match.

Player endpoint summoner/v4/summoners/by-name/${name}

Match history endpoint /match/v4/matchlists/by-account/${summonerData.accountId}

Match end point match/v4/matches/${gameKey}

Data Dragon

League of legends also provides a Data dragon. What is this? Its a resource pack that has all of its assets free to use. It also includes a json file that has more specifiek information about the champions which I used to replace the ID's with actual champion names.

Features

  • Search a summoner in EUW
  • View the match Details
  • Filter the data

Wish list

  • providing character images
  • Giving more detailed Match details (with assets)
  • Storing the Fetches in the local storage
  • Refactoring the code to make the code more functional
  • Pagination
  • Using the other possible end points to create even more features (the possibilities really are endless with the right mindset)

My wish list should be called "Upcoming features". I realy had alot of fun And I defenitly plan on working on this project after the grading. This excercise has opened a comepletly new world for me and im just too passionated to keep on working on it. Im just a little bit sad that I got sick during this subject because there was alot more that I wanted to get done in its time frame. That being said Im really proud what I managed to accomplish and im defenitly not dissapointed.

Acknowledgements

Tomas stolp for helping me out with the createElement() function.

License

License MIT Ramon Meijers 2020