FIDE Analytics

01.Executive Summary

Traditional chess dashboards render analytics in heavy monolithic pages that degrade client performance and increase DOM size. The official FIDE rating database serves as the source of truth, yet lacks clean structural endpoints for developers.

FIDE Analytics resolves this by acting as a high-performance scraping pipeline, edge database cache, and modular React interface. In our latest refactor, we split the application into decoupled client-side components and isolated complex widgets (rating history charts and game statistics) onto dedicated player pages.

“Our core engineering goal is to query FIDE profiles, compile historical progress charts, aggregate White vs. Black game performance, and store them securely at the edge. Moving history and statistics to dynamic player routes reduces initial bundle size and provides a focused analytical environment.”

This modular architecture allows components to fetch their own revalidated cache segments dynamically on Cloudflare Pages workers using OpenNext.

03.The Scraping Engine

At the heart of the service is the parsing component inside lib/scraper.ts. Using the Cheerio parser, the backend reads raw HTML and executes document traversals using jQuery-style selectors.

// Fetch and parse FIDE ranking list
import * as cheerio from 'cheerio'

export async function scrapeTopList(listType: string) {
  const url = `https://ratings.fide.com/a_top.php?list=${listType}`
  const response = await fetch(url, { headers: COMMON_HEADERS })
  const html = await response.text()
  const $ = cheerio.load(html)
  const players = []

  $('table.top_recors_table tr').each((_, element) => {
    const rankSpan = $(element).find('.rank_span')
    if (rankSpan.length === 0) return
    const rank = parseInt(rankSpan.text().trim(), 10)
    const nameLink = $(element).find('a')
    const name = nameLink.text().trim()
    const fideId = parseInt(nameLink.attr('href')?.match(/profile\/(\d+)/)?.[1] || '0', 10)
    players.push({ rank, fideId, name })
  })
  return players
}

04.Caching & Edge D1

Scraping external assets dynamically on every HTTP request induces latency and increases the risk of being rate-limited by target hosts. FIDE Analytics implements a double-sided caching pattern:

05.Multi-Theme Architecture

To offer superior customizability, the UI integrates a theme provider supporting 6 color variants: **Light**, **Dark**, and the four **Catppuccin** variants (**Latte**, **Frappé**, **Macchiato**, **Mocha**).

Instead of using standard client-only hooks that trigger style re-renders, the provider integrates an inline SSR hydration script in the HTML head tag that reads from localStorage and immediately injects the active class into `document.documentElement` during initial render.

Tailwind CSS v4 custom variables map these theme colors to semantic utilities (like `bg-card`, `text-foreground`, `border-border`, and `stroke-chart-1`), keeping our CSS stylesheet compact and performant.

06.Developer API

We provide clean, public REST API routes. All endpoints return structural JSON payloads, optimized for application builders and integrations.