A scalable, full-stack 2D virtual environment application. This project integrates a robust game engine for spatial navigation with high-performance WebRTC infrastructure for real-time video conferencing, allowing users to interact naturally within custom virtual spaces.
The system utilizes a monorepo structure to manage three distinct application layers, ensuring separation of concerns between stateless data management, real-time game state synchronization, and client-side rendering.
- Role: REST API (Stateless)
- Technology: Node.js, Express, TypeScript
- Function: Serves as the entry point for authentication and resource management. It handles user sign-ups, login (issuing JWTs), and administrative tasks such as creating avatars, map elements, and virtual spaces. It interacts directly with the PostgreSQL database to persist configuration data.
- Role: Game Server & Signaling Server (Stateful)
- Technology: Node.js, ws, Mediasoup
- Function: Manages the real-time lifecycle of the application.
- Game State: Maintains an in-memory representation of all active rooms and user positions. It handles low-latency broadcasting of movement vectors to connected clients.
- WebRTC Signaling: Facilitates the negotiation of connection parameters (SDP offers/answers) between clients and the media server.
- Media Processing: Implements a Selective Forwarding Unit (SFU) architecture using Mediasoup. This aggregates media streams from clients and intelligently routes them to other participants in the same virtual space, significantly optimizing bandwidth compared to mesh networking.
- Role: User Interface & Game Client
- Technology: React, Vite, Phaser.js, Mediasoup-client
- Function: Combines standard web UI with a canvas-based game loop.
- UI Layer: Manages authentication views, video grids, and settings overlays using React.
- Game Engine: Utilizes Phaser.js to render 2D tilemaps and character sprites. It captures input for movement and synchronizes the local visual state with updates received from the WebSocket server.
- Media: Captures local audio/video devices and consumes remote streams provided by the SFU.
- Technology: PostgreSQL, Prisma ORM
- Function: Relational storage for persistent data including user credentials, map hierarchies, available avatars, and space configurations.
- Authentication: The client authenticates via the HTTP API to retrieve a session token.
- Connection: The client establishes a WebSocket connection to the game server using the token.
- Synchronization: Upon joining a space, the server subscribes the client to a specific
Roomand synchronizes the coordinates of existing users. - Interaction:
- Movement: Position updates are sent to the WebSocket server, which validates and broadcasts them to neighbors.
- Video: The client initiates a WebRTC transport request. The server allocates resources on a Mediasoup worker, and the client begins publishing its media stream for distribution.
- Language: TypeScript
- Frontend: React, Vite, TailwindCSS, Phaser.js
- Backend: Node.js, Express, ws (WebSocket library)
- Database: PostgreSQL, Prisma ORM
- Real-time Media: Mediasoup (SFU)
- Monorepo Tooling: TurboRepo