Hello Dev.to community!
We all love the flexibility of remote work, but many of us deeply miss one thing: the natural, spontaneous interaction of a real office. Walking up to a colleague's desk to ask a quick question, chatting by the coffee machine, or gathering around a whiteboard for a brainstorming session...
Standard Zoom, Google Meet, or Discord rooms unfortunately fail to capture this feeling of "working together." Endless calendar invites, cold meetings staring at black screens, and the never-ending "Zoom fatigue" are exhausting for all of us.
To bring back this lost "real office" feel for remote teams and make communication fun again, I developed an open-source project: Locmind.
Locmind is a web-based 2D virtual universe where your teammates can interact with their avatars, chat via real-time voice and video, and build collaborative workspaces. Plus, it runs entirely on HTML5 Canvas without needing to install anything!
Live Demo **(Test your own office): https://www.locmind.com/
**GitHub Repo: https://github.com/furkiak/locmind (If you find the project useful, don't forget to drop a star! )
Locmind's Highlighted Features as a "Virtual Office"
While developing Locmind, I focused on translating natural behaviors from a physical office into a digital environment. Here are the features that separate this project from a standard meeting tool:
Proximity Voice Chat: Want to talk to a coworker? Just walk up to them! Voice volume changes dynamically based on the distance between avatars, just like in real life.
Meeting Rooms and Door Mechanics: Need a private conversation with your team? You can create password-protected conference areas and use door mechanics to close the room to the outside.
Collaboration and Meeting Tools: It has everything a real meeting room should have:
A Shared Whiteboard for a real-time synchronized drawing board.
A collaborative Shared Notepad where you can take meeting notes and export them as .txt files.
Low-latency Screen and Camera Sharing (via PeerJS/WebRTC).
Break Areas (Mini-Games & Music): When taking a break, you can watch YouTube videos synchronized with everyone in the room or blow off some steam in a football stadium with physics-based ball mechanics and scoring.
AFK System: Users who are inactive (falling asleep in the office) for 30 minutes are automatically disconnected to maintain server performance.
What's Under the Hood? (Tech Stack)
To run such an interactive environment smoothly on the browser, I used the following technologies:
Frontend: HTML5, CSS3, Vanilla JavaScript, and the Canvas API for smooth movement mechanics.
Backend: Node.js and Express.js.
Real-time Communication (WebSocket): Socket.io for real-time data flow between the client and server.
P2P Media Transfer: PeerJS (WebRTC) for peer-to-peer video, audio, and screen sharing without overloading the server.
How to Set Up Your Own Server?
It is super easy to spin up your own private Locmind server for your team. Just clone the repo and follow these steps:
Bash
npm init -y
npm install express socket.io
node server.js
Then, go to http://localhost:3000 in your browser and step into your virtual office!
I believe the future of remote work should be more interactive and less exhausting. I am continuing to develop Locmind and am open to any Pull Requests or ideas from the open-source world.
What do you do to keep team communication alive while working remotely? Let’s meet in the comments !
Top comments (0)