DEV Community

typical pawel
typical pawel

Posted on

How I Built a Virtual Office Platform From Scratch With Claude, LiveKit, and Next.js

Picture this. You're on your third Zoom call before lunch. Someone shares their screen. Half the team is on mute. The other half has cameras off. The meeting could have been a Slack message, but here you are, staring at a grid of rectangles.

This is the moment that made me start building Flat.social. I wanted to create something that feels nothing like a video call. A spatial world where avatars walk around, conversations happen based on proximity, and remote teams actually feel like they're in the same room.

Flat.social is in beta right now, coming soon. I can't wait to show you what it looks like.

But first, the story of how one developer is building it.

Every Video Tool Has the Same Problem

Before writing a single line of code, I did my homework. I dug through Zoom pricing plans to understand what teams were paying for. I studied comparisons like Google Meet vs Zoom to see what people cared about. I tested a long list of free alternatives to Zoom to find what was missing.

The answer was always the same thing. Every tool optimized for structured meetings. None of them solved for the moments between meetings. The spontaneous conversation. The quick whiteboard sketch. The Friday afternoon hangout where people actually relax together.

That's the virtual workplace I set out to build. One where the informal stuff isn't an afterthought.

The Frontend: Next.js and shadcn/ui

Next.js was the natural pick. Half of Flat.social is a content-heavy marketing site with pages like our best internal communication tools roundup. The other half is a real-time interactive application with avatars, spatial audio, and live collaboration. Server components handle the first part. Client components handle the second. One framework, no compromises.

For the interface itself, I went with shadcn/ui. Full ownership of every component without starting from zero. Radix primitives underneath, Tailwind for styling, and a consistent system I could extend as the product grew.

That consistency paid off when I built the online brainstorming canvas. Teams can jump into a shared space and throw ideas around visually. Because shadcn gave me a solid design foundation from the start, building new features like this feels like adding rooms to a house instead of rebuilding the foundation every time.

Choosing LiveKit Over MediaSoup

If there's one decision that saved the entire project, it was switching from MediaSoup to LiveKit.

MediaSoup is powerful. It gives you raw control over WebRTC at the transport level. I started there and quickly found myself drowning in infrastructure work. Setting up the SFU. Handling codec negotiation. Debugging connectivity across firewalls and NATs. Weeks went by and I still didn't have reliable audio for more than a handful of users.

LiveKit compressed all of that into days. Their SDK gave me spatial audio capabilities without building the proximity mixing layer from scratch. In Flat.social, you hear people louder when your avatar is close to them and quieter as you walk away. That's the core experience. With MediaSoup, implementing that would have been a project in itself. With LiveKit, it was configuration on top of a solid foundation.

The real test comes at scale. When 50 people join a virtual happy hour the system needs to handle dozens of simultaneous audio streams intelligently. LiveKit's selective forwarding handles this without me managing media server clusters. For a solo builder, that tradeoff between control and velocity isn't even close.

Building With Claude

Here's the honest truth. A real-time collaborative platform has no business being built by one person. The surface area is massive. WebRTC. State synchronization. Canvas rendering. Avatar systems. Map editors. Auth. Payments. A multilingual content site.

Claude is the reason it's possible.

I don't use it to generate code blindly. I use it to think. When I was designing how real-time state should sync across clients, I talked through the architecture with Claude the way I would with a senior engineer. When I needed to build out use case pages for virtual team building activities or figure out how to position Flat.social as an internal communication tool, it helped me think through both the technical and strategic side.

Debugging is where it saves the most time. Real-time apps produce bugs that are painful to reproduce and harder to reason about. Race conditions. Stale state. Audio loops. Describing the problem to Claude and getting a structured analysis back is faster than staring at logs for hours.

Claude Code in the terminal takes it further. Refactoring across files, writing test coverage, scaffolding new API routes. Having an assistant that understands the full codebase and can reason about it means I'm not just faster. I'm able to take on work I would have skipped entirely as a solo developer.

Where This Is Going

The modern stack makes things possible that weren't five years ago. Next.js handles both the marketing and the app. shadcn/ui gives you a design system without a design team. LiveKit solves real-time media without a DevOps team. Claude fills the gap of not having a full engineering team.

None of that matters without a problem worth solving though. Remote teams don't need another meeting tool. They need a place. Somewhere to share a virtual office that feels real. Where brainstorming, team socials, and daily standups happen in the same space. Where you run into someone and start a conversation you didn't schedule.

That's Flat.social. It's in beta, and I can't wait to show you.

Top comments (0)