05 / Realtime multiplayer · Personal project
3D Target Challenge
One arena. Shared timing. Individual scores.
Create a room, invite friends and compete in a 3D target challenge. Classic, Survival and Blitz modes add variety; the daily challenge offers a solo entry point.
- My role
- Game development, 3D interaction & multiplayer backend
- Technology
- React / TypeScript / Three.js / React Three Fiber / Supabase Realtime / PostgreSQL
The problem
A browser game needs immediate visual feedback, while multiplayer rounds need consistent timing and scores across separate devices. Mobile screens also need a usable view of the same playfield.
What I built
I built the interface with React and TypeScript and the 3D arena with React Three Fiber and Three.js. Supabase anonymous sessions, room codes and realtime subscriptions connect players; PostgreSQL functions manage rounds, hits and scores.
The challenge
Keeping the displayed game responsive while applying streaks, powerups and duplicate-hit handling consistently. Clients also need to align their countdowns with server timestamps.
Implementation approach
The database calculates awarded points and powerup state, checks player identity and hit timing, and locks each player's round row during updates. Unique hit records prevent duplicate scoring. The client estimates server clock offset, while the arena adjusts camera framing for different screen shapes and uses instanced particles for hit effects.
Workflow overview
One arena. Shared timing. Individual scores.
- 01Anonymous session & room
- 02Shared round & targets
- 03Validated hit & score
- 04Realtime results & rematch
A simplified view of the product workflow.
The result