Cloud-Based SaaS Code Editor Inspired by VSCode for Real-Time Collaborative Programming

The growing demand for platform-independent, collaborative software development tools has accelerated the adoption of cloud-hosted Integrated Development Environments (IDEs). This paper presents the design and implementation of a cloud-based Software-as-a-Service (SaaS) code editor modelled on Visual Studio Code (VSCode), utilising the Monaco Editor, Next.js, Node.js, WebSockets via Socket.IO, MongoDB, and GitHub APIs to deliver a fully functional, browser-based programming environment. The proposed system obviates the requirement for local software installation while enabling real-time collaborative code editing across geographically distributed teams. Core features include multi-language syntax highlighting, intelligent auto-completion, secure JWT-based user authentication, GitHub repository integration, and cloud-persistent project storage deployed on Vercel. The system architecture adopts a modular four-layer model comprising the client presentation layer, application service layer, real-time collaboration layer, and cloud data infrastructure layer. Experimental evaluation confirms seamless multi-user synchronisation with low-latency WebSocket communication, stable cross-device accessibility, and successful cloud deployment. Comparative analysis demonstrates that the proposed system surpasses existing solutions in terms of customisability, open-source flexibility, and self-deployment independence.