ENIT
Preventivo
Andrea Capelli
ENIT
Preventivo
  • ONLINE
  • PRODOTTO PROPRIO

vStats: piattaforma di statistiche e fair-play per giocatori di VALORANT

Una piattaforma online con profili giocatore, un indicatore statistico di fair-play, pagine in cinque lingue e abbonamenti Stripe. Un unico backend serve il sito, un'app mobile, due app desktop e un'integrazione con siti partner.

Ruolo
progettata e realizzata (backend, front end web, pagamenti, infrastruttura)
Tipo
prodotto proprio
Stato
online
Piattaforma
web, più client mobile e desktop sulla stessa API
Link
vstats.xyzCome funziona ARBITERDistribuzione dei rankPagina di stato

Problema

I giocatori vogliono consultare rank, storico partite e forma di chiunque, e capire se una lobby è equilibrata. Prima di scegliere l'architettura ho misurato lo storico ufficiale: arriva solo a circa 90 partite recenti per giocatore. Un servizio dati di terze parti va più indietro, ma con limiti di richieste condivisi. In più la piattaforma doveva costare poco, reggere i disservizi dei fornitori ed essere trovata dai motori di ricerca.

Risultato

vStats è online su vstats.xyz in cinque lingue, con abbonamenti Stripe e una pagina di stato pubblica su status.vstats.xyz. Lo stesso backend serve un'app mobile, due app desktop e un'integrazione partner senza una seconda API.

Approfondimento tecnico (in inglese)

What I built

I designed and built a modular Node/Express backend of about 25,600 lines. It serves the website, a mobile app, two desktop apps and a partner sign-in integration from one API. Player data comes from two sources: the official Riot Games API, with a production key and Riot Sign-On so players can prove they own an account, and a third-party data service for deeper history, which runs under its own request budget. Redis holds sessions, caches and SEO summaries, and team data lives in PostgreSQL with plain-SQL migrations. Stripe Checkout and the Billing Portal handle subscriptions, with webhooks deciding who has access. Profile and stats pages are rendered on the server in five languages. A separate status page, hosted on Cloudflare, watches the whole system.

Highlights

  1. PAYMENTS

    Subscriptions where the webhook decides access.

    Premium and Teams plans run through Stripe Checkout and the Billing Portal, so card details never touch my server. Webhooks handle access, refunds and cancellations, and deleting an account cancels its subscriptions. The server can also verify Apple App Store subscriptions, as a second payment path.

  2. OAUTH

    Sign-in in both directions.

    vStats is a client of Riot Sign-On, and it is also an OAuth 2.0 provider for partner sites: vStats Connect lets a site without its own Riot API key link players' verified accounts. It is built on Node's built-in crypto, with no extra dependencies.

  3. SCORING

    ARBITER, a statistical fair-play indicator.

    A Bayesian model combines several categories of statistical evidence into one score. It gives context; it is not cheat detection. I moved it from three client-side copies into one server-side service, so web, mobile and desktop all show the same number.

  4. SEO & I18N

    Search engines never wait on an upstream API.

    Profile pages render from summaries cached in Redis, so a crawl never triggers an upstream call. Sitemaps, IndexNow submission, crawl-budget metering for bots, and stats pages in English, Brazilian Portuguese, Spanish, Turkish and Japanese with hreflang.

  5. RESILIENCE

    Built to stay up.

    Size-bounded caches resist floods of unique keys, a budget keeps calls within the data service's limits, and process-level error handlers catch the unexpected. Alerts (Discord, with email fallback) fire on memory pressure, unclean restarts and bursts of server errors. The public status page, with 90-day history, is hosted separately from the main server.

  6. CRAFT

    A design system and hand-written PNGs.

    CSS tokens plus 28 React/TypeScript components, each with its own documentation page. Heatmaps are rendered on the server as PNG files with no image library: the file chunks and compression are written by hand.

How it works

vStats architectureWebsite, mobile, desktop, Teams and partner clients call one Node/Express API, which uses Redis, PostgreSQL, the Riot Games API, a third-party data service, Stripe and the App Store; a status page on Cloudflare probes it from outside. The list below describes each step.WebMobileDesktopTeamsPartner site1Node/Express APIRedisPostgreSQL2Riot Games APIThird-party data service3StripeApp Store4Status page (Cloudflare)5probesvStats architectureWebsite, mobile, desktop, Teams and partner clients call one Node/Express API, which uses Redis, PostgreSQL, the Riot Games API, a third-party data service, Stripe and the App Store; a status page on Cloudflare probes it from outside. The list below describes each step.WebMobileDesktopTeamsPartner site1Node/Express APIRedisPostgreSQL2Riot Games APIThird-party data service3StripeApp Store4Status page (Cloudflare)5
  1. Five kinds of client (website, mobile app, vStats Desktop, vStats Teams, partner site) call one Node/Express API.
  2. The API reads and writes Redis (sessions, caches, SEO summaries) and PostgreSQL (team data).
  3. It fetches player data from the Riot Games API and a third-party data service.
  4. Stripe and the App Store verification path report subscription changes back to the API.
  5. A status page on Cloudflare checks the API and its dependencies from outside.

Stack

  • Node.js
  • Express
  • PostgreSQL
  • Redis
  • Stripe
  • App Store Server API
  • Riot Games API
  • Riot Sign-On
  • Cloudflare Workers & Turnstile
  • HTML/CSS/JavaScript
  • React + TypeScript (design system)
  • Expo / React Native
  • Tauri

By the numbers

  • ~25,600lines of server code
  • ~200HTTP routes
  • 53test files (~14,400 lines), run against an in-memory Postgres
  • 5site languages
  • 6regions in server-rendered profiles
  • 28documented components

Outcome

vStats is live at vstats.xyz in five languages, with Stripe subscriptions and a public status page at status.vstats.xyz. The same backend supports a mobile app, two desktop apps and a partner integration without a second API.

Ti serve qualcosa di simile? Chiedi un preventivo gratuito.

Preventivo gratuito

VALORANT e Riot Games sono marchi di Riot Games, Inc. Questo progetto non è affiliato a Riot Games né approvato da Riot Games.

VALORANT and Riot Games are trademarks of Riot Games, Inc. This project is not affiliated with or endorsed by Riot Games.