WC2026 · Crypto Sportsbook

A professional, full-stack 2026 FIFA World Cup crypto betting platform — dense sportsbook UI, real wallet sign-in, live odds over WebSocket, and an automatic bet-settlement engine.

WC2026 Sportsbook — dashboard

⚠️ Educational / demo build — not a live gambling service. No real funds, deposits, or on-chain transactions occur. Operating a real-money sportsbook requires a gambling licence (per jurisdiction), KYC/AML, an audited custody contract, and a licensed odds feed — none of which software alone can provide. Bets and balances run on a mock/testnet ledger.

Highlights

🎟️ Real sportsbook coupon UI — dense event rows with aligned 1 / X / 2 odds columns, market counts, and grouped Live / Upcoming / Results sections.
🔌 Real wallet sign-in — connect MetaMask (or any injected wallet) and authenticate with an EIP-191 signature. No custody, no funds moved.
📡 Live odds & scores over WebSocket — in-play prices and scores tick in real time and patch the UI without a refetch.
🧮 Automatic settlement engine — matches finish, markets resolve, winning bets pay out and balances update on their own.
💸 Multi-asset wallet — BTC / ETH / USDT / USDC / SOL with USD conversion, deposits, withdrawals, and transaction history.
🛡️ Responsible-gambling controls — deposit & stake limits enforced in the bet flow, reality-check prompts, session timer, and self-exclusion.
🌍 Real flags & rich imagery — SVG country flags, circular team badges, and stadium photography throughout.
🔁 Mock ↔ live — runs fully on a mocked data layer out of the box, or against the real backend behind a single env flag.

Platform Screenshots

Matches coupon	Match detail

My bets & cash-out	Wallet

Leaderboard	Promotions

Responsive, mobile-first layout

Mobile coupon view

2026 World Cup — Live Tournament

The platform is built around the real 2026 FIFA World Cup — live matches, actual results, and real team lineups. Below is a snapshot of the tournament as it unfolds in 2026, showing the coverage this platform is designed to track and present.

Tournament hub & news

WC2026 kicks off	Fan hub — draw, guide & tickets

England lead Group L after a dominant opening game. Harry Kane doubles, Anthony Gordon scores his first World Cup goal — the kind of drama this platform's live odds engine is built to price in real time.

Live coverage & group standings

Group standings & match previews	Scores, results & betting guides

Betting landscape

Expert betting guide	World Cup free bets & offers

Real match results — the data this platform syncs

England 4–2 Croatia — real WC2026 final score

England 4 – 2 Croatia · Group L, Gameday 1 · AT&T Stadium, Arlington TX (Attendance 70,389 · Referee: Clement Turpin)

This is the kind of result our sync:data adapter pulls directly from football-data.org — real kickoff times, real scores, real team lineups — replacing the generated fixtures with actual World Cup data.

England vs Croatia — lineups, timeline and match stats

England 4-2-3-1: Pickford · R. James, Konsa, Stones, O'Reilly · D. Rice, Anderson · Madueke, Bellingham, Gordon · H. Kane

_{Tournament screenshots sourced from public sports news coverage for
reference/context only. This platform is not affiliated with any media outlet,
FIFA, or tournament operator.}

Tech stack

Frontend — React 18 · TypeScript · Vite 5 · Tailwind CSS 3 · Zustand · TanStack Query v5 · Recharts · React Router v6 · ethers v6 · flag-icons · lucide-react

Backend — Node · Express 4 · TypeScript · Prisma 5 · SQLite (Postgres-ready) · ethers v6 (EIP-191 sig verify) · JWT · zod · ws (WebSocket)

Getting started

Frontend only (mocked, zero setup)

npm install
npm run dev            # http://localhost:5173

Everything works on a mocked data layer — matches, odds, bets, wallet, and leaderboard — with no backend required. Real SVG flags, stadium photos, and coupon layout all work out of the box.

Full stack (live backend)

Run the API in one terminal and the frontend in another:

# terminal 1 — backend
cd server
npm install && cp .env.example .env
npm run db:push && npm run db:seed
npm run dev            # http://localhost:4000

# terminal 2 — frontend pointed at the backend
cp .env.example .env   # then set VITE_DATA_SOURCE=live
npm run dev            # http://localhost:5173

In live mode the app reads matches/markets/leaderboard from the API, settles bets automatically, streams live odds over WebSocket, and signs you in with your real wallet. Mock mode remains the default fallback.

Windows note: kill $PID does not kill tsx's Node child process. Use taskkill //F //IM node.exe to stop a stale server between restarts.

Real wallet & real data

MetaMask sign-in

Click Connect Wallet → choose MetaMask (signs with your keys via personal_sign) or the clearly-labelled Demo wallet for reviewers without an extension. The backend verifies the EIP-191 signature and issues short-lived JWTs — fully non-custodial, no funds touched.

Real 2026 World Cup fixtures

A backend adapter pulls live World Cup data from football-data.org:

# get a free token at football-data.org, then:
# server/.env  →  FOOTBALL_DATA_API_KEY=your_token_here
cd server && npm run sync:data

This replaces generated fixtures with real matches, kickoff times, and scores — including results like England 4–2 Croatia above. Odds remain modeled from team strength ratings; real bookmaker odds require a licensed feed (Sportradar / Genius Sports / The Odds API).

Architecture

.
├── src/                      # React frontend
│   ├── components/           # ui · layout · betting · common
│   ├── pages/                # one file per route
│   ├── store/                # Zustand: auth · user/wallet · bet slip · RG
│   ├── data/                 # API client + mock data layer (same shapes)
│   ├── hooks/                # TanStack Query + live WebSocket feed
│   └── lib/                  # odds math · formatters · images · config
└── server/                   # Express + Prisma backend
    ├── prisma/               # schema · seed · sync (real data)
    └── src/
        ├── routes/           # auth · matches · bets · wallet · leaderboard · admin
        ├── services/         # betting · settlement · wallet · football-data
        ├── domain/           # fixtures · odds · teams · nations
        └── ws/               # live odds/score/settlement broadcaster

The frontend talks to the backend only through src/data/ and src/lib/api.ts. Swapping mock → live is a single env flag — both layers return identical TypeScript shapes, so zero component changes are needed.

Bet placement and settlement are server-authoritative — odds and balances are re-validated on the server and never trusted from the client.

API

Method	Path	Notes
`POST`	`/api/auth/nonce`	Generate single-use sign challenge
`POST`	`/api/auth/verify`	Verify EIP-191 signature → JWT pair
`POST`	`/api/auth/refresh`	Rotate access + refresh tokens
`GET`	`/api/auth/me`	Current user profile
`GET`	`/api/matches`	`?status&group&search` · inline 1X2 odds + market count
`GET`	`/api/matches/:id`	Single match with team detail
`GET`	`/api/matches/:id/markets`	Full market board (5 market types)
`POST`	`/api/bets`	Server-authoritative placement (odds re-validated from DB)
`PUT`	`/api/bets/:id/cashout`	Cash out an open bet
`GET`	`/api/wallet/balance`	Per-asset balances
`GET`	`/api/wallet/transactions`	Transaction history
`POST`	`/api/wallet/deposit`	Credit balance + create transaction record
`POST`	`/api/wallet/withdraw`	Debit balance + create pending transaction
`GET`	`/api/leaderboard/:period`	`daily` · `weekly` · `monthly`
`WS`	`/ws`	`odds` · `score` · `settled` broadcast events

Responsible gambling & legal

Responsible-gambling tooling is a first-class feature, not an afterthought:

Deposit limits (daily / weekly / monthly) enforced at the wallet layer
Single-bet stake cap validated in the bet slip before placement
Reality-check prompts fire on a configurable interval
Session timer visible in the sidebar at all times
Self-exclusion with a hard date — the bet slip rejects placement entirely

Search the codebase for TODO(compliance) to see every boundary that must move server-side and through licensed providers before any real deployment.

This platform does not accept real money. 18+ · Gamble responsibly.

Support resources: GamCare · BeGambleAware · Gamblers Anonymous

Contact

Telegram — @MistKail
X / Twitter — @Mistkail

Roadmap

_{Built as an educational, portfolio-grade project. Not affiliated with FIFA, any football federation, or any licensed gambling operator.}