How I Built a High-Performance CS2 Leaderboard Using Antigravity & GitHub Actions 🚀

As developers, we often over-engineer. We reach for React, a Node.js backend, and a PostgreSQL database before we even define the problem. For my latest project—a Counter-Strike 2 Leaderboard—I decided to go the opposite way: Lean, Mean, and Blazing Fast.

I wanted to build a platform that tracks player stats, rankings, and match history without paying a dime for hosting or managing a heavy backend.

🚀 Live Demo: ibrahimsezer.github.io/cs2-leaderboard

💻 Source Code: github.com/ibrahimsezer/cs2-leaderboard

🧐 The Challenge: Dynamic Data on a Static Budget
Leaderboards are inherently dynamic. Ratings change after every match. Usually, this requires a database. However, I wanted to leverage GitHub Pages for hosting.

The solution? Treating my repository as a database using JSON and automating the "write" process with GitHub Actions.

🛠️ The Tech Stack

• Frontend: (React + Tailwind CSS + Vite).
• Backend : Python for data parse.
• Steam WEB API
  • steam documents : Check it out
• IDE : Antigravity
• Data Storage: Structured data.json files.
• Automation: GitHub Actions for scheduled data fetching.
• Styling: Custom CSS with a "Steam/Valve" inspired aesthetic.

🎨 UI/UX: Designed for Gamers
I wanted the leaderboard to feel like an extension of the CS2 game menu. This meant high-contrast typography, dark themes, and subtle gradients.

Responsive Design
Gamers check stats on their phones during match breaks. I used a mobile-first approach to ensure the tables scale beautifully on any device.

⚙️ How It Works: The "Static-Dynamic" Loop
The magic happens in three steps:

1. The Data Fetcher Instead of the client (the browser) calling heavy APIs, a GitHub Action runs on a schedule (Cron job). It fetches the latest player data and updates the leaderboard.json file in the repo.

for workflow update-stats.yml

name: Update Stats & Deploy to Pages

on:
  schedule:
    #- cron: '0 */12 * * *'
    - cron: '0 */6 * * *' 
    #- cron: '0 0 * * *' # Her gece çalışır
  workflow_dispatch:      # Manuel tetikleme
  push:
    branches: ["main"]    # Kod değişikliği yaparsan da tetiklensin

permissions:
  contents: write
  pages: write      # GitHub Pages'e yazma izni
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # 1. GÖREV: Verileri Güncelle ve Build Al
  build-and-update:
    runs-on: ubuntu-latest
    steps:
      - name: Depoyu Çek
        uses: actions/checkout@v4

      # --- PYTHON KISMI (Veri Çekme) ---
      - name: Python Kurulumu
        uses: actions/setup-python@v4
        with:
          python-version: '3.10'

      - name: Python Paketlerini Yükle
        run: pip install requests python-dotenv

      - name: İstatistik Scriptini Çalıştır
        env:
          API_KEY: ${{ secrets.STEAM_API_KEY }}
        run: python scripts/data-parse.py

      # --- REACT KISMI (Build) ---
      - name: Node.js Kurulumu
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: NPM Paketlerini Yükle
        run: npm ci

      - name: React Projesini Derle (Build)
        run: npm run build

      # --- COMMIT KISMI (Verileri Repoya Kaydet) ---
      # Bu adım data.json'ı repoda da güncel tutar, böylece geçmişi görürsün.
      - name: Güncel Veriyi Commit ve Push Et
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          git add src/data.json scripts/baseline.json src/hall_of_fame.json
          # Değişiklik yoksa hata vermeden devam et, varsa pushla
          git diff --quiet && git diff --staged --quiet || (git commit -m "Auto-update stats [skip ci]" && git push)

      # --- ARTIFACT OLUŞTURMA ---
      # Build edilen 'dist' klasörünü bir sonraki adıma aktarır
      - name: Upload Pages Artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'

  # 2. GÖREV: Yayına Al (Deploy)
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build-and-update
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

1. Live Filtering I implemented a real-time search feature. As you type, the table filters instantly without any server-side delay. It also has a versus mode where you can compare users with each other.

1. Detailed Player Cards Clicking on a player reveals a deeper dive into their stats—Win rates, ADR (Average Damage per Round), and recent match history.

🚀 Performance Benchmarks

Since we use the Steam web API, you need to close the game for the game data to synchronize. You can then retrieve the data using the data-parse.py file. The site goes live on GitHub Actions in about 1-2 minutes, and the data retrieval process takes approximately 5 to 10 seconds.

💡 What I Learned
This project actually came about after a conversation among friends. That's why I wanted to move forward quickly. I created a React project using Antigravity AI and the Steam Web API. With Vite, I was able to build the foundation of the project very quickly, and the rest was just development.

Key Takeaway: Focus on the data structure first. If your JSON is clean, your frontend logic becomes trivial.

💬 Let's Discuss!
How do you handle data updates for static sites? Do you prefer GitHub Actions, or do you think a serverless function (like Vercel/Netlify) is the better route?

If you liked it, don't forget to leave a star ! ⭐

Check out the repo and let me know your thoughts in the comments! 👇