←Work
Gems 4
Full-StackReal-Time MultiplayerGame DevWebGL

Gems 4

Personal Project·2023

A full-stack, real-time multiplayer Connect 4 game built from scratch. A React SPA with PixiJS WebGL rendering talks to a Laravel REST API for accounts, matchmaking, and leaderboards, while a Colyseus game server handles real-time state sync over WebSockets. Features ELO-ranked play, collectible gem cosmetics, 30-second reconnection support, and silky-smooth piece-drop animations powered by GSAP and React Spring.

Role

Full-Stack Developer & Designer

Deliverables

React + PixiJS Frontend

Laravel REST API

Colyseus Game Server

UI / Visual Design

Live gameplay with gold and blue gem pieces on the board
Victory screen with score change and rematch option
Defeat screen with rematch and back to board options
Victory banner with ELO score gain
Defeat banner close-up
Main menu screen with play options and gem collection
Login modal with email and password fields
Player profile showing username, score, and win/loss record
Ranked leaderboard with player scores
Matchmaking search screen with VS animation
First release announcement with social links
Victory screen with rematch request sent