Building a Real-Time World Cup 2026 Bracket Predictor with Vanilla JS and GitHub Actions

Introduction
With the World Cup 2026 group stage reaching its climax, football fans worldwide are speculating about who will make it to the finals. To make this experience interactive, I built a fully dynamic World Cup 2026 Bracket Simulator.

Instead of just letting users click and choose winners, this app dynamically calculates ELO win probabilities and probabilistically generates realistic match scores (including extra time and penalties) based on team ratings. It also syncs with live match data in real-time.

Live URL: https://worldcup-predict2026.github.io/champion/
Tech Stack: Vanilla JS, CSS3 (3D parallax), GitHub Actions, Python, football-data.org API
Core Features & Technical Implementation

1. ELO-Based Win Probability & Score Simulation Each team in the database is assigned an ELO-based strength rating. When a user runs the AI auto-prediction, the script calculates win probability and generates a realistic scoreline.

Here is the goal roll algorithm (Poisson-like simulation) implemented in Vanilla JS:

javascript

function generateMatchScore(team1, team2, winner) {
if (team1 === "TBD" || team2 === "TBD" || !winner) return null;

const s1 = teamStrengths[team1] || 70;
const s2 = teamStrengths[team2] || 70;
const winnerIsTeam1 = (winner === team1);

const strengthDiff = Math.abs(s1 - s2);
const baseGoalExpected = 1.1;
const bonusGoal = Math.min(1.8, strengthDiff / 12.0); // Goal weight based on ELO difference

const rollGoals = (lambda) => {
let L = Math.exp(-lambda);
let k = 0;
let p = 1.0;
do {
k++;
p *= Math.random();
} while (p > L && k < 10);
return k - 1;
};

let gWin = 0;
let gLose = 0;
const r = Math.random();
if (r < 0.75) {
// Regular time win (90 mins)
gLose = rollGoals(baseGoalExpected);
gWin = gLose + 1 + rollGoals(0.7 + bonusGoal);
return winnerIsTeam1 ? ${gWin} - ${gLose} : ${gLose} - ${gWin};
} else if (r < 0.92) {
// Extra time win (AET)
const normalGoals = rollGoals(baseGoalExpected);
gLose = normalGoals;
gWin = normalGoals + 1;
return winnerIsTeam1 ? ${gWin} - ${gLose} (AET) : ${gLose} - ${gWin} (AET);
} else {
// Penalty shootout win (PK)
const finalGoals = rollGoals(baseGoalExpected + 0.3);
const pkWin = 3 + Math.floor(Math.random() * 3);
const pkLose = pkWin - 1 - (Math.random() < 0.25 ? 1 : 0);
return winnerIsTeam1
? ${finalGoals} - ${finalGoals} (${pkWin}-${pkLose} PK)
: ${finalGoals} - ${finalGoals} (${pkLose}-${pkWin} PK);
}
}
This logic yields realistic outcomes, ranging from intense 3 - 2 battles to stressful 1 - 1 (4-3 PK) penalty shootouts.

1. Bypassing API Rate Limits via GitHub Actions (Serverless Sync) We integrate with the football-data.org API to fetch live standings and scores. However, the free tier limits us to 10 requests per minute. To keep client-side updates real-time without hitting rate limits, I built a hybrid synchronization pipeline:

Backend (GitHub Actions): A Python script runs every 30 minutes on a cron job, fetches the latest standings and matches, and pushes updated static JSON files (live_standings.json & live_matches.json) back to the repository.
Client (Vanilla JS): While a user is on the site, the browser fetches these local JSON files every 15 seconds (the maximum safe frequency). This client-side reloading syncs live states without hitting the external API servers directly.

1. Mathematical Elimination Filtering As the group stages progress, some teams become mathematically unable to qualify for the round of 32.

The client-side script calculates the maximum possible points each team can achieve (current points + remaining games * 3) and compares it to the cutoff points for 2nd place in their group. Once a team falls below the cutoff, they are dynamically removed from the qualification slot's candidate list.

1. Simulating the Complex FIFA Annex C (3rd Place Logic) In the World Cup 2026, the 8 best 3rd-place teams qualify for the Round of 32. The tournament layout for these 3rd-place teams depends on which combination of groups they qualify from.

I mapped out all 15 possible qualification combinations (defined by FIFA Annex C) into a lookup dictionary. The engine dynamically rewrites the bracket nodes on the fly as 3rd-place standings fluctuate.

Performance & UX Design
Instead of relying on heavy frameworks like React or Next.js, this app was built entirely with Vanilla JS and CSS3.

This allowed me to implement a 60fps cinematic stadium parallax scroll effect and hologram laser-scanning animations without any performance overhead. The initial load time is practically instantaneous.

Conclusion
This project demonstrates how serverless utilities like GitHub Actions and Pages can be leveraged to build dynamic, real-time, data-driven web applications for free.

Check out the predictor and run your simulations! Let me know in the comments who wins the World Cup in your bracket!