🚀 CipherStudio - Your Browser-Based React IDE

🎯 Objective

Build a browser-based React IDE called CipherStudio where users can:

• ✨ Create and manage multiple files for a React project.
• 📝 Write React code directly in the browser.
• 🔄 Run and preview their project live as they code.
• 💾 Save and reload their projects to continue later.

The goal is to simulate a real online development environment similar to platforms like NextLeap.js or CodeSandbox, while testing your full-stack design thinking, frontend skills, and integration ability.

🛠️ Features to Implement

Core Features (Required):

• 📁 File Management: Users can create, delete, and organize project files.
• 🖥️ Code Editor: A rich code editor for writing React components (consider using Monaco Editor or Sandpack).
• 🌟 Live Preview: Display the React project output in real-time as the code changes.
• 💾 Save & Load Projects: Users can save their project state and reload it later from localStorage with the help of projectId.
• 🎨 UI/UX: A clean and intuitive interface for a seamless user experience.

Technology Stack 🚀

• Frontend Framework: React.js ⚛️
• Build Tool: Vite ⚙️
• Package Manager: npm 📦
• Languages:
  • JavaScript: 84.4% 💻
  • CSS: 12.6% 🎨
  • HTML: 3.0% 📄
• Code Editor: Monaco Editor or Sandpack ✍️
• Storage: localStorage 🗄️
• Deployment: Vercel 🌐

📜 Getting Started

To get started with CipherStudio, clone the repository and follow the setup instructions.

git clone https://github.com/Ash914027/Cipherstudio.git
cd Cipherstudio
npm install
npm start