CodeSynth 2.0👩🏽‍💻: Rebuilding My Hackathon Prototype into a CRDT-Powered Coding Playground🚀

Developer Nupoor rebuilt the hackathon prototype CodeSynth into a CRDT-powered collaborative coding playground, replacing the original Socket.io sync engine with Yjs to enable reliable conflict-free concurrent editing. The new version introduces a virtual file system, a native collaborative whiteboard, and an iframe sandbox that compiles and previews workspace files in real time.

CodeSynth started as a hackathon experiment. At the time, I wanted to build something that genuinely used real-time systems instead of making yet another chat app. While exploring WebSockets, I came across collaborative coding environments and thought: “What if I could build my own mini multiplayer IDE?” As a second-year university student, that sounded both exciting and slightly terrifying — which made it the perfect hackathon project. And that’s how CodeSynth was born. The original version was heavily inspired by platforms like CodePen. Users could join shared rooms and code together in real time using Socket.io. I also experimented with AI-powered tooling using Cohere, Botpress, and GPT-3.5 for documentation generation and chatbot support. It worked surprisingly well for a hackathon build. But under the hood, the collaboration system was fragile. Concurrent edits could overwrite each other, scaling the editor was difficult, and the architecture was nowhere near production-ready. So for this GitHub challenge, I decided not to just polish the project. I decided to rebuild its core. CodeSynth 2.0 completely replaces the original sync engine with Yjs-powered CRDT collaboration , introduces a full virtual file system, adds a native collaborative whiteboard, and redesigns the entire UI/UX into a much more polished developer workspace. Multiple users can simultaneously edit the same workspace with: Unlike the original Socket.io implementation, edits now merge reliably even during concurrent typing. CodeSynth automatically compiles workspace files into an isolated iframe sandbox that updates instantly as users type. The preview system dynamically aggregates HTML, CSS, and JavaScript across multiple files, creating a lightweight browser-based development environment. The workspace now includes: The goal was to evolve beyond a simple “CodePen clone” into a more complete collaborative coding playground. https://codesynth-frontend-v2.vercel.app/ https://codesynth-frontend-v2.vercel.app/ https://github.com/Nupoor10/codesynth-frontend-v2 https://github.com/Nupoor10/codesynth-frontend-v2 https://github.com/Nupoor10/codesynth-backend-v2 https://github.com/Nupoor10/codesynth-backend-v2 When revisiting CodeSynth, I had to be ruthless about technical debt. The original version had some half-baked AI features that had already become outdated in 2026. I decided not to force half-baked AI features into the project and instead focused entirely on the core: the real-time coding engine. The biggest weakness of Version 1 was the real-time synchronization model. Originally, collaboration worked by broadcasting Monaco editor changes through Socket.io whenever users typed. While this worked during the hackathon, it had a major flaw: There was no conflict resolution layer. If two users typed simultaneously, changes could overwrite each other unpredictably. To solve this, I completely replaced the sync architecture with Yjs , a CRDT framework designed specifically for collaborative applications. That rewrite fundamentally changed how the entire editor worked. At the same time, I wanted to move beyond the limitations of the original project. Version 1 only supported exactly: CodeSynth 2.0 introduces a virtual file system that allows users to create unlimited files while still maintaining index.html as the primary entry point. I also replaced the original brainstorming solution, which relied on a third-party sketching library. Instead, I built a custom HTML5 Canvas whiteboard synchronized through Yjs arrays so users can collaboratively sketch wireframes in real time. GitHub Copilot became much more than an autocomplete tool during this project. Almost all of the complex boilerplate and refactoring was written by Copilot. It helped me think through architecture decisions, debug synchronization issues, refactor large sections of the app, and even identify UI problems from screenshots. Implementing Yjs sounds simple conceptually, but the real complexity comes from edge cases: Copilot significantly accelerated that process. Some of the biggest architectural improvements it helped me implement included: I transitioned from manual Socket.io string synchronization to a proper CRDT-based architecture using Yjs and y-websocket. This dramatically improved reliability during simultaneous editing. I implemented collaborative cursor tracking with dynamic user colors and name tags. Copilot helped generate CSS dynamically using unique client IDs so every user could be visually distinguished inside the editor. Copilot whipped up an entire virtual file system that worked not only in a user's individual playground but also in shared 'rooms' where changes to the file system were instantly broadcasted to all users Copilot implemented the whiteboard component allowing me to utilize native HTML canvas capabilities and integrating real time sync. Revisiting CodeSynth has been an incredible level-up for me as an engineer. Moving from a scrappy hackathon prototype to a fully-fledged, CRDT-powered system taught me invaluable lessons about distributed state management, React lifecycle optimizations, and the sheer power of modern WebSockets. Having an AI pair programmer by my side didn't just speed up my output—it acted as a sounding board that helped me understand why certain architectural patterns work better than others. Thank you to GitHub and DEV for hosting this challenge and giving me the motivation to finally push this codebase over the finish line