/hexastats

League of Legends stats visualization tool. Analyze and compare data from multiple players.

Primary LanguageTypeScriptMIT LicenseMIT

Contributors Stargazers Issues MIT License LinkedIn


Logo

Hexastats

Visualize your stats and metrics from League of Legends!

🎉 Check it on hexastats.vercel.app 🎉


The project is consisted in:


Table of Contents
  1. About the project
  2. Technical approach
  3. Local setup
  4. Gallery

About the project

Hexastats is a web app to visualize your metrics from League of Legends.

  • Last games performance, winrates, graphs and more! 🔥
  • Enter multiple usernames, comparing data between players in a fast, visual and interactive way!

Hexastats

The project was born from the need to compare data between players in a fast and interactive way.
First, we created a basic script that eventually turned into a small API to play with some stats from our accounts and compare them.

Eventually, more people wanted to be added to try it, so we turned the project into a web with search system, so everyone could add their own username and their friends to make comparisons and have fun.

Right now, we keep working on it, adding new features, sections and thinking about new ways to compare data!

(back to top)

Technical approach

When the API is called with an username, it loads and serves the JSON data to the frontend. The client loads the data into a SvelteKit store (equivalent to React context) from where can be accessed by each page to display and visualize different information depending of the page.

General diagram of the project:

NestJS specific diagram:

For more specific info, browse both /frontend and /backend code.

Built With

It has been written entirely in TypeScript, using the latest solid frameworks such as Next.js for frontend and Nest for backend.

  • TypeScript
  • Node
  • Nest
  • Redis


Local setup

Instructions to setup the project locally:

Prerequisites

To run the project locally, you need:

  • Frontend running
  • Backend running
  • Redis running (optional, it's only a cache)

Setup: frontend

Move to frontend/ folder, install dependencies and run the project

~/hexastats/ $ cd frontend
~/hexastats/frontend/ $ npm install # or yarn, or pnpm
~/hexastats/frontend/ $ npm run dev

In frontend/.env file you can setup

PUBLIC_IS_DEVELOPMENT = 'true'

This will make the calls to http://localhost:5000/, local backend
If not, it will call https://api-hexastats.vercel.app/, the production URL


Setup: backend

Move to frontend/ folder, install dependencies and run the project

~/hexastats/ $ cd backend
~/hexastats/backend/ $ npm install # or yarn, or pnpm
~/hexastats/backend/ $ npm run dev

To setup the environment, copy backend/.env.example file to backend/.env and fill the variables

  • If you don't have a Riot API key, you can get one here

  • If you don't have a Upstash redis instance, you can get one here
    Or you could disable it by setting UPSTASH_REDIS_REST_DISABLE = true

(back to top)

Last features

  • Dark mode
  • Players data remains after browser refresh
  • Masteries page

Incoming features

  • Faster load for players data
  • Integration with League of Legends desktop client
  • Automatic load of player names once you enter in a new game, to give you statics of both teams

Gallery

Some images from the project:

Hexastats

Hexastats

Hexastats