I Recreated the Panini World Cup Sticker Album as a Free Web App

#worldcup2026 #webdev #sideprojects #javascript

Remember ripping open Panini sticker packs as a kid?

That rush of discovering which players you got. The heartbreak of yet another duplicate. Playground negotiations to complete your album.

The FIFA World Cup 2026™ is coming — 48 nations, 3 host countries, the biggest tournament in history. So I asked myself: what if the entire Panini collecting experience lived online?

Free. Social. Playable from any phone or laptop.

So I built it. 🚀

👉 Try it live: ghcp-panini.onrender.com

What You Get

📦 3 free packs daily — each containing 5 random player cards

⚽ 1,246+ real players — all 48 qualified World Cup nations

🔄 Trade duplicates — swap with other collectors to complete your album

🎮 Mini-games — trivia, spin-the-wheel, and more to earn bonus packs

✨ 5 Exquisite Cards — ultra-rare holographic collector items unlocked through milestones

📊 Leaderboards — compete to see who finishes first

🔔 Push notifications — get alerted about new packs, trades & events

🤝 Referral system — invite friends, both get a free bonus pack

How It Works

The concept is simple — it mirrors the physical experience:

Open packs → you get 5 random player cards
Stick them → place players into their national team page in the album
Got duplicates? → trade them with other users or list them on the swap market
Play games → earn extra packs through daily mini-games
Complete your album → collect all 1,246 players across 48 nations

There's also a cooldown system (just like waiting for the next trip to the shop!) and daily challenges to keep things engaging.

The Tech (Briefly)

For those curious about what's under the hood:

Layer	Tech
Frontend	React + Vite + Tailwind + Framer Motion
Backend	Node.js + Express + Prisma
Database	PostgreSQL (Supabase free tier)
Hosting	Render (free tier)
Testing	Playwright E2E + GitHub Actions
Push	Web Push API + Service Workers

The whole thing runs on $0/month — Supabase free PostgreSQL for persistent data, Render for hosting, and a GitHub Actions cron to keep the app alive.

A Few Things I Learned

1. Start with a hosted database. I initially used SQLite, which worked great locally but lost all data on every deploy (Render's free tier has ephemeral storage). Switching to Supabase PostgreSQL was painless thanks to Prisma — literally changing one word in the config.

2. Push notifications need permanent keys. If you're using the Web Push API, generate your VAPID keys once and store them as env vars. If they regenerate on restart, all user subscriptions silently break.

3. Social sharing needs PNG. LinkedIn and Facebook don't render SVG for link previews. Learned this the hard way — always use PNG for your og:image.

4. Free-tier hosting is totally viable for side projects. Supabase + Render + GitHub Actions cron = always-on app with persistent data at zero cost.