ReactComplier-

⚛️ ReactComplier — CipherStudio

A Real-Time React Live Code Editor & Compiler

CipherStudio is a real-time React code editor and compiler featuring live preview, file management, and cloud storage support — designed for developers who love to code on the go 🚀

---

🌟 Key Features

✅ Live React Compilation — Real-time code execution with instant preview ✅ Multi-File Management — Create, edit, and manage multiple files easily ✅ Auto-Save — Automatic local saving every 2 seconds ✅ Cloud Storage — Sync your projects via MongoDB ✅ Theme Modes — Switch between Light 🌞 and Dark 🌙 ✅ Error Detection — Built-in syntax and runtime error tracking ✅ Project Management — Rename, navigate, and organize your projects

---

🧠 Tech Stack

⚙️ Frontend

• React (Vite) – Fast and modular UI
• SandPack – Powerful live code editor
• Axios – API communication
• Lodash – Utility functions

🧩 Backend

• Node.js + Express – RESTful API framework
• MongoDB + Mongoose – Cloud data storage
• CORS – Secure cross-origin requests
• dotenv – Environment configuration

---

🧰 Installation Guide

🔹 Frontend Setup

cd client
npm install
npm run dev

🔹 Backend Setup

cd server
npm install

Create a .env file in the server directory:

MONGODB_URI=your_mongodb_connection_string
PORT=5000

Start the backend server:

node server.js

---

🗂️ Project Structure

📦 ReactComplier/
├── client/                 # Frontend
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── services/       # API and autosave logic
│   │   ├── assets/         # Images & static files
│   │   └── App.jsx         # Main App component
│   └── package.json
└── server/                 # Backend
    ├── models/             # MongoDB schemas
    ├── server.js           # Express setup
    └── package.json

---

⚡ Detailed Highlights

💾 Auto-Save System

• Saves locally every 2 seconds
• Manual cloud save to MongoDB
• Prevents save conflicts between local and cloud

🧑‍💻 Code Editor

• Syntax highlighting
• Error feedback in real time
• Live React preview
• Multiple files + closable tabs

🗃️ Project Management

• Unique Project IDs
• Rename and navigate files easily
• Theme and layout customization

---

🔌 API Endpoints

Method	Endpoint	Description
POST	/api/projects	Create or update a project
GET	/api/projects/:projectId	Retrieve a project by its ID

---

🤝 Contributing

1. Fork the repo
2. Create a branch — git checkout -b feature/YourFeature
3. Commit your changes — git commit -m "Add YourFeature"
4. Push to your branch — git push origin feature/YourFeature
5. Submit a Pull Request 🎉

---

📜 License

Licensed under the ISC License — free to use, modify, and share.