{"slug": "codesynth-2-0-rebuilding-my-hackathon-prototype-into-a-crdt-powered-coding", "title": "CodeSynth 2.0👩🏽‍💻: Rebuilding My Hackathon Prototype into a CRDT-Powered Coding Playground🚀", "summary": "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.", "body_md": "CodeSynth started as a hackathon experiment.\n\nAt 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:\n\n“What if I could build my own mini multiplayer IDE?”\n\nAs a second-year university student, that sounded both exciting and slightly terrifying — which made it the perfect hackathon project.\n\nAnd that’s how **CodeSynth** was born.\n\nThe 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.\n\nIt worked surprisingly well for a hackathon build.\n\nBut 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.\n\nSo for this GitHub challenge, I decided not to just polish the project.\n\nI decided to rebuild its core.\n\nCodeSynth 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.\n\nMultiple users can simultaneously edit the same workspace with:\n\nUnlike the original Socket.io implementation, edits now merge reliably even during concurrent typing.\n\nCodeSynth automatically compiles workspace files into an isolated iframe sandbox that updates instantly as users type.\n\nThe preview system dynamically aggregates HTML, CSS, and JavaScript across multiple files, creating a lightweight browser-based development environment.\n\nThe workspace now includes:\n\nThe goal was to evolve beyond a simple “CodePen clone” into a more complete collaborative coding playground.\n\n[https://codesynth-frontend-v2.vercel.app/](https://codesynth-frontend-v2.vercel.app/)\n\n[https://github.com/Nupoor10/codesynth-frontend-v2](https://github.com/Nupoor10/codesynth-frontend-v2)\n\n[https://github.com/Nupoor10/codesynth-backend-v2](https://github.com/Nupoor10/codesynth-backend-v2)\n\nWhen 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.\n\nThe biggest weakness of Version 1 was the real-time synchronization model.\n\nOriginally, collaboration worked by broadcasting Monaco editor changes through Socket.io whenever users typed. While this worked during the hackathon, it had a major flaw:\n\nThere was no conflict resolution layer.\n\nIf two users typed simultaneously, changes could overwrite each other unpredictably.\n\nTo solve this, I completely replaced the sync architecture with **Yjs**, a CRDT framework designed specifically for collaborative applications.\n\nThat rewrite fundamentally changed how the entire editor worked.\n\nAt the same time, I wanted to move beyond the limitations of the original project. Version 1 only supported exactly:\n\nCodeSynth 2.0 introduces a virtual file system that allows users to create unlimited files while still maintaining `index.html`\n\nas the primary entry point.\n\nI 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.\n\nGitHub Copilot became much more than an autocomplete tool during this project. Almost all of the complex boilerplate and refactoring was written by Copilot.\n\nIt helped me think through architecture decisions, debug synchronization issues, refactor large sections of the app, and even identify UI problems from screenshots.\n\nImplementing Yjs sounds simple conceptually, but the real complexity comes from edge cases:\n\nCopilot significantly accelerated that process.\n\nSome of the biggest architectural improvements it helped me implement included:\n\nI transitioned from manual Socket.io string synchronization to a proper CRDT-based architecture using Yjs and y-websocket.\n\nThis dramatically improved reliability during simultaneous editing.\n\nI implemented collaborative cursor tracking with dynamic user colors and name tags.\n\nCopilot helped generate CSS dynamically using unique client IDs so every user could be visually distinguished inside the editor.\n\nCopilot 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\n\nCopilot implemented the whiteboard component allowing me to utilize native HTML canvas capabilities and integrating real time sync.\n\nRevisiting 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.\n\nHaving 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.\n\nThank you to GitHub and DEV for hosting this challenge and giving me the motivation to finally push this codebase over the finish line!", "url": "https://wpnews.pro/news/codesynth-2-0-rebuilding-my-hackathon-prototype-into-a-crdt-powered-coding", "canonical_source": "https://dev.to/nupoorshetye/codesynth-20-rebuilding-my-hackathon-prototype-into-a-crdt-powered-collaborative-coding-5pc", "published_at": "2026-06-03 23:18:10+00:00", "updated_at": "2026-06-03 23:41:43.081212+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "ai-startups"], "entities": ["CodeSynth", "Yjs", "Socket.io", "Cohere", "Botpress", "GPT-3.5", "CodePen", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/codesynth-2-0-rebuilding-my-hackathon-prototype-into-a-crdt-powered-coding", "markdown": "https://wpnews.pro/news/codesynth-2-0-rebuilding-my-hackathon-prototype-into-a-crdt-powered-coding.md", "text": "https://wpnews.pro/news/codesynth-2-0-rebuilding-my-hackathon-prototype-into-a-crdt-powered-coding.txt", "jsonld": "https://wpnews.pro/news/codesynth-2-0-rebuilding-my-hackathon-prototype-into-a-crdt-powered-coding.jsonld"}}