Syeda Mah Noor Asad

Syeda Mah Noor Asad

UNO Multiplayer

Published:

Overview

UNO Multiplayer is a real-time game that seats four players in a shared lobby, synchronises every card play, and broadcasts turn events instantly. The experience combines a TypeScript Socket.IO backend with a React client that renders an animated UNO table, message log, and card overlays.

View Source on GitHub

Gameplay Highlights

  • Instant lobby sync: Players join a shared room, receive seating assignments, and kick off a match as soon as four participants connect.
  • Live turn messaging: A sidebar stream announces whose turn it is, which card was played, color changes, and UNO calls for fast awareness.
  • Wild card overlay: Color selection popups pause the table and broadcast the chosen color to every player before play resumes.
  • Win celebrations: UNO declarations and victory banners animate the board when a player empties their hand.

Tech Stack

  • Backend: Node.js, Express, Socket.IO, TypeScript, ts-node.
  • Frontend: React, TypeScript, React Router, Socket.IO Client (Create React App).
  • Styling: Custom CSS theming of the table, cards, and message overlay.
UNO lobby screen showing four seats
Lobby seats players as they join and launches the match when all four spots fill.
UNO gameplay with four players around the table
Game table displays every player's hand count, active color, and discard pile in real time.
Live message panel announcing turn updates
Animated message panel delivers turn prompts, draw notices, and UNO shouts.
Wild card color selection overlay
Wild card overlay lets the current player pick the next color with instant broadcast to all.
UNO win screen showing banner and confetti
Victory screen highlights the winning player with banner and confetti animation.