Realtime WebSocketsPhaser 3WebRTC 1:1Next.js App Router

HangoutX — Metaverse 2D Multiplayer Platform

A real-time 2D multiplayer metaverse inspired by Gather, Zep, and Spatial. Walk around spaces, see others moving instantly, chat, and start 1–1 WebRTC video calls with nearby players.

Open Web App →Backend APIWebSocket Server
Tip: Use the demo links above to verify HTTP + WS are live.

Demo

Deployed frontend + backend + realtime server.

Web App
https://www.hangoutx.space/
Backend API
https://api.hangoutx.space
WebSocket
wss://ws.hangoutx.space
Phaser 3
Engine
WebSockets
Realtime
WebRTC 1:1
Calls

What is this?

A realtime 2D multiplayer platform built from scratch with modern full-stack + realtime architecture.

Authentication & Accounts
JWT auth, bcrypt password hashing, protected routes, persistent login via tokens.
Spaces (Rooms)
Create/join spaces with width/height, tilemaps, collision grids, and isolated multiplayer rooms.
Multiplayer Core
Server-authoritative movement, room broadcasts on join/move/leave, and realtime sync via WebSockets.
1–1 Nearby Video Calls
When players are close, start a direct peer-to-peer WebRTC call (offer/answer/ICE relayed via WS).
Avatars
Avatar fetched from DB on join and synced to all players in the room.
Admin System
Admins can create maps, create elements, and control world layout.

Architecture

Monorepo structure with separate web/http/ws apps and a shared Prisma DB package.

metaverse-repo/
├── apps/
│  ├── web/     (Next.js frontend)
│  ├── http/    (Express REST API)
│  └── ws/      (WebSocket realtime server)
│
├── packages/
│  └── db/      (Prisma + DB client)
Web
Next.js (App Router), Tailwind UI, Phaser rendering, WebRTC calls.
HTTP API
Express + Prisma + Postgres for auth, spaces, admin tools, CRUD.
WS Server
Room manager, JWT verification, server-authoritative movement, WebRTC signaling relay.

Tech Stack

Modern full-stack choices optimized for realtime systems.

Frontend
Next.js 16ReactTailwind CSSPhaser 3AxiosZodReact Query
Backend
Node.jsExpressPrismaPostgreSQL (Neon)JWTbcryptws
Infra
TurborepoVercel (Web)Render (HTTP + WS)GitHub

Security

Baseline security for realtime multiplayer apps.

Password hashing
bcrypt hashing for stored passwords.
JWT authentication
JWT verification on HTTP routes and WS join.
Server-authoritative movement
Prevents client-side cheating by validating moves on server.
Room isolation
Messages broadcast only within the active space/room.

How Multiplayer Works (High Level)

The client connects to WS, joins a space with a JWT, and then sends validated move events.

Join
{
  "type": "join",
  "payload": {
    "spaceId": "...",
    "token": "JWT"
  }
}
Move
{
  "type": "move",
  "payload": { "x": 64, "y": 128 }
}
Server validates
Only 32px step moves allowed; invalid moves are rejected.
Broadcast to room
Movement updates are broadcast to all users in the same space.
Presence events
Join/leave triggers immediate updates to other clients.

How to Run Locally

Clone, install dependencies, set env, run dev.

1) Clone
git clone https://github.com/your-username/metaverse-repo.git
cd metaverse-repo
2) Install
npm install
3) Setup env
Create .env in:
apps/httpapps/wspackages/db
4) Run
npm run dev

Future Updates (Roadmap)

Planned features to expand the platform.

Multiple Maps
Themes, map selector, teleport between worlds.
Custom Avatars
Avatar editor, skins, and uploads.
Private Rooms
Invite-only spaces, passwords, team rooms.
Interactions
Object interactions, doors, chairs, mini-games.
Mobile Support
Touch controls, responsive UI, PWA.
Infra improvements
Observability, scaling WS rooms, rate limits.

Author

Built and maintained by:

Hussain Taher Kagalwala
BITS Pilani, Hyderabad Campus
Open DemoHome
© 2026 HangoutX. All rights reserved.