Local Multiplayer Tic-Tac-Toe game
- 1 Devlogs
- 7 Total hours
A multiplayer tic-tac toe game with biometric face authentication built using Python, HTML, CSS and JavaScript.
Ship #1
Changes requested
@jayanth_raveendra
on
Local Multiplayer Tic-Tac-Toe game
ARENA is a real-time multiplayer game where your face is your login. No passwords, no typing—just split-second biometric verification computed directly on your device’s GPU.
TECHNICAL HIGHLIGHTS:
🔹 Edge ML Biometrics: Uses face-api.js for zero-latency, client-side 128-d facial encoding.
🔹 Real-Time WebSockets: Live asynchronous matchmaking lobby and instant mid-game disconnect handling.
🔹 FIDE-Standard Elo: Mathematically calculates win probabilities and dynamically updates your global ranking.
🔹 Resilient Microservices: Fully containerized stack (FastAPI, Nginx, MySQL, MongoDB) with automated database retry loops.
HOW TO DEMO:
Because ARENA is a full-stack microservice architecture, it is too heavy for a free cloud host. My GitHub repository is the demo! To experience the magic on your own machine:
Clone the repo and add the .env variables.
Run "docker compose up --build -d" in your terminal.
Go to localhost:5500 in your browser and register your face!
(Want to play with friends on your Wi-Fi? The README has instructions on how to use ngrok to securely tunnel the Nginx proxy to their phones!)
@jayanth_raveendra
on
Local Multiplayer Tic-Tac-Toe game
6h 32m 15s logged
What started as a basic software systems course project just got a massive 6-hour architectural overhaul. I wanted to build ARENA, an identity-verified multiplayer Tic-Tac-Toe game where your face is literally your password.Here is the breakdown of the sprint to get to v1.0.0:The Biometric Overhaul (Moving to the Edge)
Originally, the facial recognition was a heavy, monolithic server-side pipeline. It was a dependency nightmare and crushed the server. I completely ripped it out and migrated to Edge ML using face-api.js. Now, the client browser computes 128-d facial encodings directly on the user’s GPU. Server load dropped to near-zero, and the latency is basically gone.The Microservice Migration
I took the original god file and shattered it into a clean microservice architecture. Containerized the whole thing using Docker Compose. It now features a resilient Python backoff/retry loop so the FastAPI backend waits patiently for the databases to initialize before booting.The Local Network “Final Boss”
This was the hardest part of the overhaul. I wanted users to connect via their phones on the same Wi-Fi. But Chrome strictly blocks webcam access on unencrypted HTTP connections unless it is localhost.The Fix: I set up an Nginx reverse proxy to route frontend and API traffic through a single port. Then, I wrote dynamic JavaScript routing and piped the whole thing through an ngrok tunnel. Now, I can spin up the containers, run the tunnel, and send friends a secure HTTPS link to play against me locally! It was a crazy 6 hours of fighting WebSocket race conditions and Nginx regex bugs, but ARENA is finally production-ready (I hope :) ).
