Skip to content

DEV Community

younesfdj

Posted on Jul 13

The World Cup is on, so I turned every GitHub profile into a FIFA Ultimate Team card

#devchallenge #weekendchallenge #github

DEV Weekend Challenge: Passion Edition Submission

This is a submission for Weekend Challenge: Passion Edition

What I Built

Every football fan knows the feeling. The World Cup is on, your team walks out, and for 90 minutes nothing else matters.

And if you grew up on FIFA, you know the other feeling too. Ripping open a pack praying for a walkout. Grinding coins for weeks to afford one player. Staring at a 99-rated card like it's a trophy. I was obsessed with Ultimate Team.

Here's the thing though: I'm a developer. And we have our own stats. Commits instead of goals. Stars instead of trophies. A contribution graph we're way too proud of. We grind just as hard, we just don't get a shiny gold card at the end of it.

So with the World Cup on and football on my mind, I asked my self one question: what would my GitHub profile look like as a FIFA card?

That question became gitfut.

gitfut turns any GitHub profile into a FIFA Ultimate Team card, rated out of 99. Your commits, stars, pull requests, followers and the languages you actually ship in become PAC, SHO, PAS, DRI, DEF and PHY. You get a position, playstyles, and a tier that climbs from bronze all the way to icon. The stronger your GitHub, the stronger your card.

The theme of this challenge is passion. For me that wasn't a stretch at all, gitfut is literally two things I love, football and code, smashed into the same card.

Demo

Try it live: https://gitfut.com or just swap the URL. Turn github.com/torvalds into gitfut.com/torvalds and Linus walks out as a 96-rated icon.

gitfut doesn't stop there. You can also start arguments with your friends: duels. Put two devs head to head, six stats, one winner. Level scoreline? It goes to penalties on Overall.

Your turn:

Scout yourself → gitfut.com/yourusername
Duel a friend → gitfut.com/you/vs/yourfriend

So… what would you be rated? Go find out. ⚽

How I Built It

Stack:

Frontend: Next.js, TypeScript, Tailwind v4
Data: GitHub GraphQL API
Card export: html-to-image (downloads) + next/og & sharp (link previews)
Infra: Vercel + Cloudflare

Fetching the numbers is easy. Making a card that feels fair is the whole game. Here's the actual core.

1. Turn a profile into six stats. Real GitHub signals go in, FUT stats come out, and every input is log-scaled:

const lg = (x) => Math.log10(x + 1); // diminishing returns

const stats = {
  pac: 36 + 12 * lg(recentActivity),
  sho: 36 + 13 * lg(totalStars) + 5 * lg(topRepoStars),
  pas: 40 + 12 * lg(pullRequests) + 9 * lg(followers),
  dri: 58 + 7  * Math.sqrt(languages),
  def: 40 + 14 * lg(reviews + issues),
  phy: 40 + 9  * lg(lifetimeContributions) + 2.2 * Math.min(activeYears, 12),
};

That lg is added exactly so that no single viral repo makes you a 99.

2. Give every card a shape. Two passes stop everyone being 90 across the board:

normalize(stats)            // z-score around the player's own average
pushRivalStatsApart(stats)  // if you're a great attacker, your defence drops

3. Position falls out of that shape - biggest pair wins:

const family = maxOf({
  Forward:   sho + pac,   // → ST / RW
  Playmaker: pas + dri,   // → CM / CAM
  Anchor:    def + phy,   // → CB / CDM
});

Lots of stars and commits → forward. Lots of PRs and reviews → defence. It reads how you actually use GitHub.

4. The URL trick. One Next.js rewrite turns any GitHub link into a card link:

// next.config.js
rewrites: () => [
  { source: "/:user.png", destination: "/api/card-image/:user" },
];
// gitfut.com/torvalds.png → renders the card as an image

Code and Repository

Younesfdj / gitfut

Your GitHub stats, turned into a World-Cup-style player card

GitFut mascot

GitFut

your GitHub, rated out of 99 ⚽

🃏 Embed your card

Your card lives at a URL. Drop it in your profile README, your portfolio, anywhere — and it re-scouts itself as your stats change.

[![My GitFut card](https://gitfut.com/YOUR_USERNAME.png)](https://gitfut.com/YOUR_USERNAME)

`gitfut.com/<username>.png`	your card, as a live image
`gitfut.com/<username>`	the full scout report
`?country=XX`	override the flag (e.g. `?country=DZ`)

⚙️ How the scouting works

Six signals from a live GitHub profile, each mapped to a football stat — read straight from GitHub's GraphQL API. No surveys, no self-reporting. Just the commits.

Stat	Scouted from
PAC	Pace	Commits in the last year
SHO	Shooting	Stars earned across repos
PAS	Passing	Pull requests + followers
DRI	Dribbling	Language diversity
DEF	Defending	Reviews + issues
PHY	Physical	Lifetime contributions

Your overall is the headline. Raw stats cap at 88 — the 90s are a legacy…

Prize Categories

None, this one's theme-only. No Snowflake, Solana, ElevenLabs or Google AI here, just football and GitHub.

Top comments (0)

Subscribe