TinyFloor

A lightweight, top-down 2D virtual office experience for real-time presence and communication.

TinyFloor creates immersive virtual office environments where team members can interact naturally through proximity-based communication. Walk around pixel-art office spaces, engage in real-time conversations when near colleagues, and collaborate in shared digital rooms with persistent user profiles and customizable avatars.

• Real-time Multiplayer Presence: See colleagues moving around shared office maps in real-time with smooth animations
• Proximity-Based Communication: Voice, video, and text chat automatically activate when users are nearby, with automatic call termination when moving apart
• Multiple Rooms: Create public or private rooms with customizable settings, passwords, and media permissions
• Avatar Customization: Choose from various character appearances, outfits, and accessories for personalized presence
• User Authentication: Secure login system with persistent user profiles stored in MongoDB
• Pixel Art Aesthetic: Nostalgic 2D graphics inspired by classic office environments with tile-based movement
• Cross-Platform Support: Works on desktop and mobile browsers with WebRTC calls

This monorepo contains:

• apps/frontend-nextjs/: Next.js frontend with Phaser.js for 2D game rendering, real-time interactions, and WebRTC handling
• apps/backend-springboot/: Spring Boot backend handling WebSocket connections, user authentication, room management, and MongoDB persistence

• Frontend: Next.js, React, TypeScript, Phaser.js, Tailwind CSS
• Backend: Spring Boot, Java, WebSocket, MongoDB
• Real-time Communication: WebRTC audio/video through Cloudflare Realtime (TURN relay for one-to-one calls, SFU for group meetings), WebSocket for signaling and game state
• Database: MongoDB for user profiles, room metadata, and persistent data
• Deployment: Cloudflare Workers (frontend), Railway (backend)

The frontend is translated into 18 languages with next-intl: English (source), German, French, Spanish, Italian, Dutch, Swedish, Danish, Norwegian, Finnish, Portuguese, Polish, Japanese, Korean, Chinese, Russian, Hebrew and Arabic (the last two render right-to-left).

• Messages live in frontend-nextjs/messages/<locale>.json. Every locale is deep-merged over en.json, so a missing key falls back to English instead of rendering blank.
• Routing: all pages sit under src/app/[locale]. English is served unprefixed (/rooms), other languages are prefixed (/de/rooms). src/proxy.ts detects the language from the cookie, then Accept-Language, so a shared /join?roomId=… link opens in the recipient's language.
• Config: src/lib/i18n/routing.ts is the source of truth for the locale list and text direction; request.ts loads messages; navigation.ts exports the locale-aware Link and router hooks to use instead of next/link and next/navigation.
• In code: useTranslations() in components, getTranslations() in metadata. Phaser canvas labels are passed in through src/lib/sceneText.ts.
• SEO: src/lib/seo.ts emits the canonical URL and hreflang alternates for each page, and sitemap.ts lists every route in every locale.
• Adding a language: add it to routing.ts, add its Open Graph code in seo.ts, and create messages/<code>.json.

TinyFloor requires Node.js 18+, Java 17+, Maven 3.6+, and MongoDB. The application consists of a Next.js frontend and Spring Boot backend that communicate via WebSocket and REST APIs for real-time multiplayer functionality.