High-Level Design (HLD) of Online Code Editor
In the High-Level Design (HLD) diagram of the Online Code Editor, the interactions you have described involve a couple of components and services running collectively to facilitate various functionalities, including of analyzing problem, submitting checking, checking the leaderboard, and dealing with code execution. Whole flow of Hld diagram of online code editor is described below:
- Browser Submitting Code:
- User put up their code through the browser. The submission is sent to the system via the “API Gateway,” which acts as a critical access factor for managing and routing requests.
- SSE (Server-Sent Events):
- Server-Sent Events (SSE) are used to push real-time updates to the browser. This is vital for presenting on the spot feedback to users, along with notifying them of changes in the leaderboard, submission status, or some other relevant events. SSE is facilitated by means of the “Submission Server.”
- Submission Server:
- The Submission Server is accountable for handling user submissions. It process incoming code submissions, stores relevant data in the “UserSubmission DB,” and triggers events consisting of the “CodeSubmittedEvent Queue” for asynchronous processing.
- CodeSubmittedEvent Queue:
- The CodeSubmittedEvent Queue is a message queue that holds events associated with code submissions. It enables asynchronous processing of submitted code by dispatching duties to “Code Executor Workers”.
- Code Executor Workers:
- These worker deal with the actual execution of submitted code. They retrieve tasks from the “CodeSubmittedEvent Queue,” execute code in isolated environments, and store the results inside the “UserSubmission DB”.
- UserSubmission DB:
- The UserSubmission DB stores data associated with user code submissions, consisting of the submitted code, execution outcomes, timestamps, and other relevant info. It lets us to track and retrieve user submissions for leaderboard updates and historical analysis.
Designing Online Code Editor | System Design
Online code editors are now a crucial part of modern software development. They allow collaboration, real-time coding, and the ability to access development tools from anywhere in the world. In this article, we’ll explore how to design a system to create a useful and scalable online code editor.
Important Topics for the Online Code Editor System Design
- Requirements for Online Code Editor System Design
- Functional Requirements for Online Code Editor System Design
- Non-Functional Requirements for Online Code Editor System Design
- Capacity Estimations for Online Code Editor System Design
- Usecase Diagram for Online Code Editor System design
- Low-Level Design (LLD) for Online Code Editor System Design
- High-Level Design (HLD) for Online Code Editor System Design
- Database Design of Online Code Editor System Design
- Microservices and APIs for Online Code Editor System Design
- API Code Implementation for Online Code Editor System Design
- Scalability for Online Code Editor System Design