CipherStudio is a browser-based React code editor that allows developers to write, manage, and preview their code in real-time. It combines a rich file explorer, Monaco Editor, and Babel-powered live preview for a seamless coding experience directly in the browser.

Project Overview: CipherStudio is a React-based code editor that supports file management, theming, and instant preview. Developers can write JSX/JavaScript code and see live results rendered in an iframe using Babel transpilation.

Key Features:

• Monaco Editor Integration: Rich code editing experience with syntax highlighting, autocompletion, and IntelliSense.
• File Explorer: Create, import, export, and reset files easily.
• Live Preview with Babel: Code transpiled in real-time and rendered in an iframe.
• Theming Support: Switch between light and dark editor themes.
• Instant Feedback Loop: Edit code and see changes immediately without page reload.

Technologies Used:

Layer	Tech Stack / Tools
Frontend	React, Tailwind CSS, Monaco Editor
Code Transpilation	Babel (JSX to JS)
Preview Rendering	Iframe Integration
File Management	Custom File System with Import/Export/Reset

Why this project matters: CipherStudio demonstrates front-end development, real-time code execution, and interactive UI design. It showcases practical skills in building a code editor environment, live preview pipelines, and file management features — essential for web-based developer tools.