CipherStudio

A modern, browser-based React IDE with real-time preview, project management, and cloud storage.

---

🏗️ Project Structure

This project is separated into frontend and backend:

CompletedProject/
├── reactCode/          # Frontend (React + Vite)
│   ├── src/
│   ├── package.json
│   └── vercel.json
│
└── backend/            # Backend (Express + Prisma + MongoDB)
    ├── src/
    ├── prisma/
    ├── package.json
    └── README.md

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• MongoDB database (MongoDB Atlas recommended)
• npm or yarn

1. Setup Backend

cd backend
npm install
cp .env.example .env
# Edit .env with your DATABASE_URL and JWT_SECRET
npm run prisma:generate
npm run dev

Backend runs on: http://localhost:5000

2. Setup Frontend

cd reactCode
npm install
cp .env.example .env
# Edit .env with VITE_API_URL=http://localhost:5000/api
npm run dev

Frontend runs on: http://localhost:5173

---

✨ Features

• ✅ Browser-based IDE - Code React components instantly
• ✅ Real-time Preview - See changes as you type
• ✅ Project Management - Create, save, and organize projects
• ✅ Authentication - Secure user accounts with JWT
• ✅ Cloud Storage - Projects saved to MongoDB
• ✅ Responsive UI - Works on desktop and mobile
• ✅ Dark/Light Theme - Toggle between themes
• ✅ File Explorer - Manage multiple files per project

---

🛠️ Tech Stack

Frontend:

• React 18
• TypeScript
• Vite
• TailwindCSS
• React Router
• Sandpack (CodeSandbox)
• Axios

Backend:

• Express.js
• Prisma ORM
• MongoDB
• JWT Authentication
• bcryptjs
• TypeScript

---

📝 Environment Variables

Backend (.env)

DATABASE_URL=mongodb+srv://...
JWT_SECRET=your-secret-key
PORT=5000
NODE_ENV=development
FRONTEND_URL=http://localhost:5173

Frontend (.env)

VITE_API_URL=http://localhost:5000/api

---

🧪 Development

Backend

cd backend
npm run dev          # Start development server
npm run build        # Build for production
npm run prisma:studio # Open Prisma Studio

Frontend

cd reactCode
npm run dev          # Start Vite dev server
npm run build        # Build for production
npm run preview      # Preview production build

---

📄 License

MIT

---