Giter VIP home page Giter VIP logo

top-builds's Introduction

Top builds for mythic keys in World of Warcraft

Cache

What is it?

This is a static website with precached data that shows what build is used by the top 30 characters of selected class and specialization. Data recache every day so you can see the fresh ratings!

Zero-cost service without ads

Works using free services:

  • Hosted on GitHub Pages
  • Caching data every day using Github Actions
  • Using public API of raider.io and battle.net

Who are uses this?

  • Casual WoW players to get free recommendations, built by a heartless machine
  • New players who want to know what items should be farmed right now
  • Pro players who don't know why they not in the top of they roles

What's inside?

  • NodeJS + TypeScript for cron job that cache data
  • GotJS - a library for making HTTP requests
  • dotenv - a library that load env variables and secrets
  • parcel-bundler - zero-configurable bundler
  • VueJS - a frontend framework for render interface
  • Petal.less - a UI library with common components
  • @websanova/vue-store for storing global frontend data

How it works?

Caching

  • Each day Github Actions runs cron job
  • Inside the job a script download top characters from raider.io
  • Each character validates in battle.net armory API that he used right specialization and has the full gear (sometimes players add new gear without enchants or gems, those builds are not representative)
  • If character passed due validation, script save character's data to a JSON file
  • All JSON files stores in a public directory of gh-pages branch, that published to a GitHub Pages

UI

  • VueJS loads a JSON file for selected spec and class
  • All data separated to tabs like "Items", "Talents" and so on
  • User can see how many of top30 characters use a spell by hover it's icon
  • Most tabs have a "Usage Frequency summary" block that shows statistics about the current tab

How to run this project locally?

  • Create a developer account on https://develop.battle.net/
  • Create new battle.net OAuth client on https://develop.battle.net/access/clients
  • Clone this repository
  • Install NodeJS v16 or run nvm i if you have nvm
  • Install dependencies using npm i
  • Build code using npm run build
  • Copy .env.example file to .env
  • Fill .env file with your tokens
  • Set a range of class-spec pairs in .env file that you want to cache. Full cache requires 10-15 minutes to build
  • Cache data using npm run cache
  • Run internal web-server with npm start
  • Set class-spec pair, that you cached before, in select on top of page
  • See statistics...
  • Profit!

top-builds's People

Contributors

poalrom avatar snyk-bot avatar

Watchers

 avatar

top-builds's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.