Create new web app for Trophy Hunter

[lmachens]

TL;DR
Create a web app based on our API, Next.js and maybe MaterialUI.

The problem
We have a very limited web app which only shows matches and ranking.
https://www.loltrophyhunter.com/match/EUW1/3863024196/24688273
It is the same like in the app and doesn't look good in the browser.

The technology
Our new api makes it possible to read from our database and fetch data from the Riot API.
Example: https://www.th.gl/api/trophies?platformId=euw1&matchId=3795861223&summonerId=30118891

I prepared the setup based on Next.js and serverless deployment.
See https://github.com/lmachens/trophy-hunter/tree/master/src/www

Why Next.js?
It fits perfectly into our serverless architecture and allows easy scaling and developing.

Details:

• Docs: https://nextjs.org/
• Serverless Docs: https://zeit.co/docs/v2/deployments/official-builders/next-js-now-next/
• Serverless Example: https://zeit.co/examples/nextjs/

Design-wise I am open for ideas.
It could get inspired by https://play.overwolf.com/trophy-hunter/ or our app https://www.overwolf.com/app/trophy_hunter-trophy_hunter.

I am very familiar with MaterialUI and want to be able to maintain the web app later.

The tasks

First of all, thank you that you are reading this.
For me it is important to have a good communication and speak about ideas and issues.
In the past I had bad experiences with other devs who created one huge pull request which was impossible to review. Please show me some of your work and speak about your ideas.
If you work on this task, please create small pull requests.

First step:

• Design
• League of Legends related and modern design. You can use assets from https://developer.riotgames.com/static-data.html.
• Responsive layout
• Landing page: /
• Contains app description from our marketing page https://play.overwolf.com/trophy-hunter. For some design ideas, take a look at http://lolwiz.gg/ or search for other apps.
• Match page: /match?platformId=euw1&matchId=123&summonerId=123
• Redesign our current matches page. It is extracted from the app and has fixed width and height. For the web it should be responsive. You are free to suggest or remove ideas from the page. https://www.loltrophyhunter.com/match/EUW1/3885740024/24688273

Second step (not important right now -> only to get a feeling what we want to do later):

• Landing page: /
• Contains a search for summoner name like on http://euw.op.gg/ or https://lolprofile.net which redirects to the summoner page
• Summoner page: /summoner/:summonerName
• Show profile with summonerName, icon and rank (data from our api)
• Show tabs (or other ui solution) for Live, Matches, Trees and Trophies.
• Live tab will show details about the active match like on https://raw.githubusercontent.com/lmachens/trophy-hunter/master/.github/overlay.png. It is enough to prepare the view and make a design suggestion.
• Matches will show the match history (last x matches). It should show the champion, basic stats and the matchup like https://lolprofile.net/de/summoner/kr/SANDBOX%20OnFleek or http://www.op.gg/summoner/userName=SANDBOX+OnFleek. It looks like this in the app, which is ugly as fuck:
  
• Trees will show the tree progress of the summoner. The component can be imported from the app.
  
• Trophies will show all trophies and colorize obtained ones. The component can be imported from the app.
  

[Rayth]

What exactly do you need the web-app to do?

[lmachens]

@Rayth I will finish the requirements soon

[Rayth]

@Rayth I will finish the requirements soon

Cool will keep posted. Web-development is my specialty (more specifically PHP development)

[lmachens]

We hired a designer to create a new design for this project which includes Adobe XD specs for
the landing, profile and match results pages.
In the meantime I prepare the use of our api in #96.
After the design is done, it should be easy to convert it to React components.