Presentation

UNO

TECHNICAL PROJECT PRESENTATION

WILD CARDS

Browser Multiplayer UNO — Reimagined for the Web

A production-quality, real-time card game playable instantly in any browser — no downloads, no accounts. Powered by a server-authoritative engine and a globally distributed realtime layer.

React 19

TypeScript

TanStack Start

Cloudflare Workers

Durable Objects

WebSockets

D1 SQLite

2–8 players · private rooms · smart bots · cross-device realtime

UNO

MEET THE TEAM

The Team

WILD CARDS · Technical Project Presentation

Sursab Tamang

Introduction & Product Walkthrough

Opens the talk: what WildCards is, the problem it solves, the goals behind it, and why it needed to exist.

Divyansh Singh Patel

Engineering & Technical Deep-Dive

Covers the architecture, the realtime engine, core programming concepts, deployment .

UNO

PRESENTATION OUTLINE

Agenda

WILD CARDS · Technical Project Presentation

01 Overview

What WildCards is and why it exists

02 Problem Statement

The gap in existing browser UNO clones

03 What We Built

Goals, objectives and key features

04 Technology Stack

Every layer, framework and library

05 System Architecture

How the pieces fit together

06 Realtime & Game Engine

Live moves, validated instantly

07 Core Programming Concepts

Variables, loops and game logic

08 Data, Auth & Deployment

Sign-in, persistence and shipping

09 Reliability & Challenges

Engineering under pressure

10 Future Scope

What’s next, then see it live

UNO

WHAT IS WILDCARDS

Project Overview

WILD CARDS · Technical Project Presentation

WildCards is a production-quality, browser-based multiplayer implementation of the classic card game UNO. A single invite link drops players straight into a live game — the room is created instantly, bots fill empty seats, and every move is validated by an authoritative server so the rules can never be cheated.

2–8

players per room

≈30s

turn timers keep games moving

100%

server-authoritative rules

accounts or downloads required

One codebase, three environments

The frontend runs as a static site; TanStack Start powers SSR and type-safe server functions; a Cloudflare Worker + Durable Object hosts each room as a globally addressable relay. The same code deploys across tabs, browsers and devices.

UNO

WHY WE BUILT IT

The problem with existing UNO clones, the goals we set, and what players actually get.

UNO

WHY REBUILD A CLASSIC GAME

Problem Statement

WILD CARDS · Technical Project Presentation

Physical UNO is slow

Setup, shuffling, rule disputes and scorekeeping interrupt the fun. Games can't happen without everyone in the same room.

Real-time multiplayer is hard

State sync, latency, reconnects and fairness are notoriously difficult to get right — most web games cheat by trusting the client.

Most web clones feel broken

Dead lobbies, logins required, ads, slow servers, or single-device demos that fall apart under real concurrent play.

Trusting the client breaks the game

A client-authoritative card game can be modified to draw cards, see hands, or win instantly — fair play demands the server make every decision.

UNO

Goals Into Reality

What We Set Out To Build

WILD CARDS · Technical Project Presentation

Frictionless Play

One click to start against bots, one invite link to gather friends — no signup, no installs.

Server-Authoritative

Cards are dealt, shuffled and validated entirely server-side — clients only ever see their own hand.

Rock-Solid Realtime

WebSockets by default with graceful fallbacks, reconnection handling, and a live state poller.

Complete UNO Ruleset

Draw-2/+4 stacking, missed-UNO penalties, skips, reverses, wild colors, auto turn timeouts.

Full Feature Set

Private rooms, bots, cross-device sync, stats, a global leaderboard, and a polished animated UI.

Professional Engineering

Strict TypeScript, a deterministic engine, and CI enforcing typecheck, build and lint on every commit.

UNO

EVERY LAYER, FRAMEWORK AND LIBRARY

Technology Stack

WILD CARDS · Technical Project Presentation

Frontend

React 19

TypeScript 5

Vite 8

TanStack Router

TanStack Start

TanStack Query

Zustand

Tailwind CSS 4

Framer Motion

Radix UI

Zod

Recharts

Backend & Infrastructure

Cloudflare Workers

Durable Objects

D1 (SQLite)

Hono

WebSockets

Supabase Realtime

BroadcastChannel

JWT auth

Wrangler CLI

GitHub Actions

Game engine: pure, deterministic TypeScript

The core UNO logic (deck building, shuffling, turn order, stacking, scoring) lives in a zero-dependency TypeScript module. Being deterministic, it can run identically on the server for validation and in tests for verification.

UNO

How The Pieces Fit Together

System Architecture

WILD CARDS · Technical Project Presentation

Client

React 19 browser app — reads server-authoritative state only, never computes outcomes itself.

TanStack Start Server

Handles SSR and type-safe server functions; REST-style actions and guest auth.

Room Server

A Cloudflare Worker + Durable Object per room — the WebSocket relay and single source of truth.

D1 (SQLite) & Auth

Persists profiles, history and leaderboard stats; guest sessions and JWTs.

Frontend Design

Typed routing, type-safe server functions, Zustand + React Query, Framer Motion animation.

Backend Design

One Durable Object per room, socket-bound identity, server functions validate every action.

UNO

How Every Move Travels And Gets Validated

Realtime & Game Engine

WILD CARDS · Technical Project Presentation

WebSocket → Durable Object

Primary path — the Worker relays every event to all connected peers instantly.

Supabase Fallback

Used automatically when the WebSocket origin isn't reachable.

BroadcastChannel

Same-browser, cross-tab fallback with zero network — great for local demos.

Deterministic Core

Pure TypeScript functions create games, apply actions and score rounds — one source of truth.

Strict Move Validation

Every play is checked: right turn, legal card, correct wild color, respected +2/+4 stack.

Full UNO Ruleset

Skip, reverse, stacking, wild colors, missed-UNO penalty, and automatic turn timeouts.

UNO

EXPLAINING THE CODE FUNDAMENTALS

Core Programming Concepts

WILD CARDS · Technical Project Presentation

Variables

GameState, currentPlayer, direction and the deck are strongly-typed variables the engine reads and updates every turn.

Loops

for loops deal 7 cards per seat, walk the turn order, and drive the Fisher–Shuffle that randomizes the deck.

Functions

createGame(), applyAction(), canPlay() and legalCards() are small pure functions the server calls every turn.

Collision Detection

Every action is checked against live state before it applies — wrong turn, illegal card or a stacking conflict is rejected.

Event Handling

React onClick handlers dispatch plays; WebSocket message, join and leave events keep every client in sync.

Game Logic

Skip, reverse, draw-2/+4 stacking, wild color choice, missed-UNO penalties and scoring all live in the engine.

UNO

From Sign-In To Shipping

Data, Auth & Deployment

WILD CARDS · Technical Project Presentation

Guest-First Identity

No signup — a local profile is created instantly, with a JWT issued per room.

Privacy By Design

Clients only ever receive their own hand — opponents' cards never leave the server.

D1 Persistence

Profiles, game history, wins and leaderboard stats all persist in SQLite.

Deployment Targets

Cloudflare Pages for the frontend, Cloudflare Workers for the backend room server.

CI Pipeline

GitHub Actions runs typecheck, build and lint automatically on every single commit.

One Command to Deploy

wrangler deploy ships the backend; frontend and backend deploy fully independently.

UNO

Engineering Under Pressure

Reliability & Challenges

WILD CARDS · Technical Project Presentation

Edge Performance

Durable Objects run close to players; a slim realtime protocol keeps games fast.

Airtight Security

Fully server-authoritative with socket-bound identity — impersonation is impossible.

Self-Healing Reliability

Three-layer transport fallback plus instant reconnect snapshots for late joiners.

Fragile Realtime, Solved

One flaky WebSocket channel became three auto-selecting fallback layers.

Cheat-Proofing, Solved

Every rule decision moved server-side — clients can never see or alter hidden state.

Concurrency, Solved

Room sequence numbers and re-fetch-on-nudge logic make every action race-proof.

UNO

WHERE WILDCARDS GOES NEXT

Future Scope

WILD CARDS · Technical Project Presentation

Accounts & OAuth

Let players claim their guest profile with email or social login and sync stats across devices.

Matchmaking & ladder

Ranked queues, ELO-style ratings and seasonal leaderboards for competitive play.

AI difficulty tiers

Smarter bots with personality: aggressive, defensive and classic-strategy models.

Mobile-first & PWA

Installable offline shell, touch-optimized controls, and push-friendly room invites.

Tournaments

Brackets, timed events and custom house rules for organized play.

Spectator mode

Watch live rooms with a full move history and commentary.

UNO

FROM MATCH SETUP TO THE WINNING CARD

Gameplay Experience

WILD CARDS · Technical Project Presentation

Choose your challenge — bots or a private room

Live board — opponents, deck, discard pile, turn timer and move log

UNO

GATHER THE CREW IN SECONDS

Private Rooms & Lobby

WILD CARDS · Technical Project Presentation

Create or join a room by 6-letter code

Room lobby — copy invite link, host starts when ready

How it works: Host opens a room → gets a code + link → shares it → players join from any device → the host deals the first round.

UNO

EVERY GAME COUNTS

Stats & Progression

WILD CARDS · Technical Project Presentation

Global leaderboard — win streaks and totals

Personal profile — games, wins and history

No accounts: a guest profile follows the player across sessions via local storage; leaderboard stats are server-persisted in D1.

UNO

AI-ASSISTED DEVELOPMENT

Our AI-Powered Development Workflow

WILD CARDS · Technical Project Presentation

AI was integrated throughout our process — planning, architecture, coding, debugging, UI refinement, and testing.

Custom AI Agent

Our own AI coding agent, inspired by Claude Code™, customized around our development workflow. Currently in beta and not publicly released.

Multi-Model Engineering

We worked with multiple AI models for different workloads, including NVIDIA Nemotron 3 Ultra, NVIDIA Nemotron Nano 12B v2 VL, Cohere North Mini Code, Kimi K2.7 Code, MiniMax M3, and ChatGPT.

Automated Review Workflow

A workflow that visually inspects the UI and analyzes application logs to catch errors, inconsistencies, and design imperfections — continuously refining both functionality and user experience.

AI With Human Oversight

We did not use AI blindly. We reviewed, tested, verified, and understood its outputs before integrating them into the project.“The skill is not just using AI — it is knowing how to use it correctly, efficiently, and ethically.”AI accelerated our development. Human judgment remained responsible for the final decisions.

UNO

THANK YOU

Questions welcome

WildCards — browser multiplayer UNO, reimagined for the web.

React 19 · TypeScript · TanStack Start · Cloudflare Workers · Durable Objects · D1 · WebSockets

wildcards.itzbyteglitch.qzz.io

Live and playable right now — open the link, start a game against bots, or create a private room to play with friends.