Arnab-Afk/monaco
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update README and EditorArea components with project description and functionalities

Browse Source
This commit is contained in:
ishikabhoyar
2025-03-30 00:45:05 +05:30
parent 3a75000e12
commit 648391e6ba
2 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Frontend/README.md
View File

@@ -1,13 +1,24 @@
# VSCode Clone with React and Vite # VS Code Clone Project
This project is a VSCode-like code editor built with React and Vite. It features a customizable UI with an activity bar, sidebar, editor area, panel, and status bar, mimicking the look and feel of Visual Studio Code. ## Authors
- Arnab Bhowmik
- Ishika Bhoyar
## Features ## Description
This project is a VS Code Clone built with React and Monaco Editor. It features a file tree navigation, tab management, code editing with syntax highlighting, and a terminal panel for running code. It mimics the core functionalities of Visual Studio Code in a browser-based environment.
- **Activity Bar**: Switch between different views like Explorer, Search, Source Control, etc. ## Frontend Functionalities
- **Sidebar**: Displays file explorer, search results, and source control information. - Built with React and Monaco Editor.
- **Editor Area**: Code editor with syntax highlighting and multiple tabs. - File tree navigation for managing files and folders.
- **Panel**: Terminal, Problems, and Output views. - Tab management for opening multiple files simultaneously.
- **Status Bar**: Displays status information and provides quick actions. - Code editing with syntax highlighting and language support.
- Terminal panel for running code and viewing output.
- Persistent file structure and content using localStorage.
## Project Structure ## Backend Functionalities
- Built with Go and Docker for secure code execution.
- Supports multiple programming languages (Python, Java, C/C++).
- Executes code in isolated Docker containers with resource limits.
- RESTful API for submitting code, checking status, and retrieving results.
- Job queue system for managing concurrent executions.
- Enforces timeouts and resource limits for security and performance.

34
Frontend/src/components/EditorArea.jsx
View File

@@ -515,21 +515,31 @@ const EditorArea = ({
case "README.md": case "README.md":
return `# VS Code Clone Project return `# VS Code Clone Project
## Overview ## Authors
This is a simple VS Code clone built with React and Monaco Editor. - Arnab Bhowmik
- Ishika Bhoyar
## Features ## Description
- File tree navigation This project is a VS Code Clone built with React and Monaco Editor. It features a file tree navigation, tab management, code editing with syntax highlighting, and a terminal panel for running code. It mimics the core functionalities of Visual Studio Code in a browser-based environment.
- Tab management
- Code editing with Monaco Editor ## Frontend Functionalities
- Syntax highlighting - Built with React and Monaco Editor.
- File tree navigation for managing files and folders.
- Tab management for opening multiple files simultaneously.
- Code editing with syntax highlighting and language support.
- Terminal panel for running code and viewing output.
- Persistent file structure and content using localStorage.
## Backend Functionalities
- Built with Go and Docker for secure code execution.
- Supports multiple programming languages (Python, Java, C/C++).
- Executes code in isolated Docker containers with resource limits.
- RESTful API for submitting code, checking status, and retrieving results.
- Job queue system for managing concurrent executions.
- Enforces timeouts and resource limits for security and performance.
`;
## Getting Started
1. Create a new file using the + button in the sidebar
2. Edit your code in the editor
3. Save changes using the save button
Happy coding!`;
default: default:
return ""; return "";
} }