Hey DEV community! 👋
I just hit a massive milestone on a side project I've been grinding on: I officially published 51 fully playable browser games on my arcade site, 7x.games.
To celebrate, I wanted game #51 to be special, so I built a Real-Time 1v1 2048 Multiplayer Battle.
Here is how I pulled off real-time multiplayer state syncing using a serverless frontend architecture:
The Stack:
Framework: Next.js (App Router)
Styling: Tailwind CSS (heavy use of neon box-shadows!)
Hosting: Vercel
Multiplayer Backend: Firebase Realtime Database
The Matchmaking Architecture Trick:
Vercel serverless functions aren't built for persistent WebSockets, so I offloaded the game state syncing entirely to Firebase.
The biggest risk with this setup is "Ghost Rooms"—players closing their tabs while waiting in a lobby, leaving junk data that clutters the database over time. To fix this, I used Firebase's onDisconnect().remove() rule. It attaches a heartbeat to the user's browser, and the moment they close the tab or lose connection, Firebase automatically deletes their lobby from the database. It keeps the matchmaking pool pristine without needing a dedicated backend cron job to clean up!
You can play the multiplayer mode here: 2048 Multiplayer
Let me know what you think of the UI, or if you have any questions about setting up Next.js with Firebase!
Top comments (0)