I'm always excited to take on new projects and collaborate with innovative minds.

Social Links

Project

CodeCraft — My Advanced Online Code Editor

CodeCraft is a sophisticated, browser-based integrated development environment (IDE) that brings the power of desktop coding tools directly to the web. Built with modern React and featuring VS Code's Monaco editor, it provides a professional-grade coding experience without any installation requirements.

Client

University Project

Start Date

Oct 15, 2025
CodeCraft — My Advanced Online Code Editor

💻 CodeCraft — My Advanced Online 

Code Editor

A complete web-based IDE that rivals desktop development environments

When I started working on CodeCraft, I wanted to create a powerful web-based IDE that could rival desktop coding environments. What began as a simple browser editor evolved into a full-featured development platform that supports HTML, CSS, JavaScript, PHP, and Python — all running directly in your browser.

✨ What Makes CodeCraft Special

🚀 Monaco Editor

The same editor that powers VS Code, with IntelliSense, syntax highlighting, and auto-completion

📁 Multi-File Projects

Create and manage entire projects with folders and multiple files in a VS Code-style explorer

⚡ Real-Time Execution

Run HTML, CSS, JavaScript, PHP, and Python code with live preview and console output

🛠️ Tech Stack

React 19+Chakra UI v2Monaco EditorViteFramer Motion 

📁 Project Architecture

online_code_editor/
├── src/
├── api/
├── components/
├── ModernOutput.jsx
├── PreviewMode.jsx
├── ProjectEditor.jsx
└── StackBlitzExplorer.jsx
├── hooks/
├── styles/
├── utils/
├── fileSystem.js
└── storage.js
├── public/
└── package.json

🎯 Key Features

📝

Tab Management

Work with multiple files simultaneously using intuitive tab system

💾

Auto-Save

Automatic saving of files and project state to local storage

🎨

Theme Support

Light and dark mode themes for comfortable coding

🚀

Rocket Mode

Turbo execution mode for faster code processing

⚡ Quick Start

# Clone and run CodeCraft:
git clone https://github.com/smshagor-dev/codecraft.git
cd online_code_editor
yarn install
yarn dev

Then open http://localhost:5173 in your browser

Ready to Start Coding?

Experience the power of browser-based development with CodeCraft

🚀 Try CodeCraft Live
Share

Leave a comment

Your email address will not be published. Required fields are marked *