{"id":28046435,"url":"https://github.com/geekyash10/remote-realm","last_synced_at":"2026-04-11T09:44:39.485Z","repository":{"id":291752021,"uuid":"922864288","full_name":"Geekyash10/Remote-Realm","owner":"Geekyash10","description":"Remote Realm recreates the social and functional dynamics of a physical office in a fully browser-based virtual environment. Users enter public or password-protected private rooms as avatars on a tiled map, move around with keyboard or joystick controls, and see each other’s webcam feeds in real time. Integrated collaborative tools—task management.","archived":false,"fork":false,"pushed_at":"2025-05-28T16:34:34.000Z","size":8116,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-28T16:52:36.535Z","etag":null,"topics":["colyseus","mongodb","nodejs","peerjs","phaser","phaserjs","reactjs","screen-share","tiled-map-editor","virtual-joystick","webrtc","websoket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Geekyash10.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-27T08:15:16.000Z","updated_at":"2025-05-28T16:34:37.000Z","dependencies_parsed_at":"2025-05-11T19:33:15.590Z","dependency_job_id":null,"html_url":"https://github.com/Geekyash10/Remote-Realm","commit_stats":null,"previous_names":["geekyash10/remote-realm"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Geekyash10/Remote-Realm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geekyash10%2FRemote-Realm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geekyash10%2FRemote-Realm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geekyash10%2FRemote-Realm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geekyash10%2FRemote-Realm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Geekyash10","download_url":"https://codeload.github.com/Geekyash10/Remote-Realm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geekyash10%2FRemote-Realm/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261771147,"owners_count":23207221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["colyseus","mongodb","nodejs","peerjs","phaser","phaserjs","reactjs","screen-share","tiled-map-editor","virtual-joystick","webrtc","websoket"],"created_at":"2025-05-11T19:27:27.445Z","updated_at":"2026-04-11T09:44:39.477Z","avatar_url":"https://github.com/Geekyash10.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Remote Realm\n\n**A browser-based 2D metaverse for collaborative remote work**\n\n---\n\n## Table of Contents\n1. [Project Overview](#project-overview)\n2. [Features](#features)\n3. [Technology Stack](#technology-stack)\n4. [Architecture](#architecture)\n5. [Output Screenshots](#output-screenshots)\n6. [Installation \u0026 Setup](#installation--setup)\n7. [Usage](#usage)\n8. [Configuration](#configuration)\n9. [Future Work](#future-work)\n\n\n---\n\n## Project Overview\nRemote Realm recreates the social and functional dynamics of a physical office in a fully browser-based virtual environment. Users enter public or password-protected private rooms as avatars on a tiled map, move around with keyboard or joystick controls, and see each other’s webcam feeds in real time. Integrated collaborative tools—task management, whiteboard, and screen sharing—are accessible via simple keyboard shortcuts, eliminating context-switching and fostering natural interaction.\n\n## Features\n- **Room Management**\n  - Join public rooms with just a name.\n  - Create and join private rooms (name, title, description, password).\n  - Automatic deletion of empty private rooms.\n- **Spatial Presence**\n  - 2D tile-based office maps created in Tiled and rendered by Phaser.\n  - Avatar movement via arrow keys or joystick.\n- **Real-Time Media**\n  - Peer-to-peer video/audio and screen sharing with PeerJS.\n  - Display of each participant’s webcam feed on-screen.\n- **Collaborative Tools**\n  - **Tasks Pane** (key `Shift + T`): full CRUD on tasks with instant notifications.\n  - **Whiteboard** (key `Shift + W`): shared drawing canvas powered by Whitebophir.\n  - **Screen Share** (key `Shift + S`): broadcast your screen to all room members.\n- **Notifications**\n  - Real-time updates for task and whiteboard actions across all clients.\n\n## Technology Stack\n- **Backend**: Node.js, Express, Colyseus, Mongoose (MongoDB)\n- **Frontend**: React, TypeScript, React Router\n- **Game Engine**: Phaser for rendering and input\n- **Map Editor**: Tiled for custom tilemaps\n- **Media**: PeerJS for WebRTC streaming\n- **Whiteboard**: Whitebophir\n\n## Architecture\nRemote Realm uses a modular, event-driven design:\n1. **Room Management**: Colyseus rooms handle player state, task and whiteboard events, and automatic cleanup.\n2. **Media Streaming**: PeerJS establishes direct streams for video, audio, and screen share.\n3. **Rendering**: Phaser loads Tiled JSON maps and manages avatar sprites and input.\n4. **Sync \u0026 Persistence**: MongoDB stores room metadata and tasks; Mongoose defines schemas; Express exposes REST endpoints for room lifecycle.\n5. **Frontend**: React/TypeScript components subscribe to Colyseus state, render UI panels, and handle user input and API calls.\n\n## Output Screenshots\n\n\u003cdiv style=\"display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;\"\u003e\n    \u003cimg src=\"assets/map.png\" alt=\"Map\" width=\"350\"\u003e\n    \u003cimg src=\"assets/home_screen.png\" alt=\"Home Screen\" width=\"350\"\u003e\n    \u003cimg src=\"assets/2_participants.png\" alt=\"Inside Room\" width=\"350\"\u003e\n    \u003cimg src=\"assets/task_manager.png\" alt=\"Task Manager\" width=\"350\"\u003e\n    \u003cimg src=\"assets/whiteboard.png\" alt=\"Whiteboard\" width=\"350\"\u003e\n    \u003cimg src=\"assets/share_screen.png\" alt=\"Screen Share\" width=\"350\"\u003e\n    \u003cimg src=\"assets/public_room_join_form.png\" alt=\"Public Room Join\" width=\"350\"\u003e\n    \u003cimg src=\"assets/private_room_creation_form.png\" alt=\"Private Room Creation\" width=\"350\"\u003e\n    \u003cimg src=\"assets/private_room_list.png\" alt=\"Available Private Rooms\" width=\"350\"\u003e\n    \u003cimg src=\"assets/private_room_join_form.png\" alt=\"Private Room Join\" width=\"350\"\u003e\n\u003c/div\u003e\n\n## Installation \u0026 Setup\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/yourusername/remote-realm.git\n   cd remote-realm\n   ```\n\n2. Install Dependencies\n    ```bash\n    npm install \u0026\u0026 npm run install-all\n    ```\n\n3. Environment Variables:\n    Create a ```.env``` file in ```/server```\n    ```javascript\n    PORT=3000\n    MONGODB_URI=your_mongo_connection_string\n    JWT_SECRET=your_secret_key\n    ```\n\n4. Run\n    ```bash\n    npm run start-all\n    ```\n\n5. Access the app: Open ```http://localhost:5173/``` in your browser.\n\n\n## Usage\n1. Home Page: choose “Join Public Room”, “Create Private Room”, or “Join Private Room”.\n2. In-Room Controls:\n    - Move avatar: arrow keys or joystick.\n    - Open tasks pane: press Shift + T.\n    - Open whiteboard: press  Shift + W.\n    - Start screen share: press  Shift + S.\n3. Tasks Pane: create, edit, delete tasks; updates broadcast to all users.\n4. Whiteboard: draw collaboratively; strokes sync in real time.\n5. Exit: close the browser tab or press the “Leave Room” button to disconnect.\n\n## Configuration\n- Room settings: edit default spawn points and map assets in ```/server/config/rooms.json```.\n- Phaser settings: adjust canvas size and physics in ```/client/src/game/config.ts```.\n- Whiteboard: customize toolbar options in ```/client/src/components/Whiteboard.tsx```.\n\n## Future Work\n- Responsive layouts and mobile support.\n- In-app map editor for user-generated environments.\n- Avatar customization and proximity-based audio.\n- Versioned history for tasks and whiteboard sessions.\n- Enhanced scalability with container orchestration.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekyash10%2Fremote-realm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeekyash10%2Fremote-realm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekyash10%2Fremote-realm/lists"}