🌩️ Cloud IDE

A lightweight online coding environment with real-time collaboration and revolutionary Visual Code Flow & Dependency Mapping. Built with Next.js, MongoDB, and Socket.io.

✨ Features

🎯 Core Features

• Live Code Editor: Write HTML, CSS, and JavaScript with Monaco Editor
• Instant Preview: Real-time sandboxed preview with auto-refresh
• Real-time Collaboration: Up to 2 users can code together simultaneously
• Project Management: Save, load, and share your projects
• Responsive Design: Works seamlessly on desktop, tablet, and mobile

🚀 Unique Features

• Visual Code Flow Mapping: Interactive dependency visualization showing how HTML, CSS, and JS interconnect
• Impact Visualization: See which elements are affected by your code changes
• Secure Execution: Sandboxed iframe environment with CSP protection
• Dark/Light Themes: Beautiful themes for comfortable coding

🔐 Authentication

• Email/Password registration and login
• Social login with Google and GitHub
• JWT-based secure authentication
• User dashboard and project management

🛠️ Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Backend: Next.js API Routes, Express.js
• Database: MongoDB with Mongoose
• Real-time: Socket.io for collaboration
• Editor: Monaco Editor (VS Code editor)
• Styling: Tailwind CSS
• Authentication: NextAuth.js + JWT
• Deployment: Docker, Docker Compose

🚀 Quick Start

Prerequisites

• Node.js 18+
• MongoDB (local or Atlas)
• Docker (optional)

1. Clone the Repository

git clone <repository-url>
cd cloud-ide

2. Install Dependencies

npm install

3. Environment Setup

cp .env.example .env.local
# Configure your environment variables in .env.local

4. Start Development Server

npm run dev

The application will be available at http://localhost:3000.

🐳 Docker

# Development with Docker Compose
docker-compose up -d

# Production build
docker build -t cloud-ide .

📁 Project Structure

cloud-ide/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── globals.css     # Global styles
│   │   ├── layout.tsx      # Root layout
│   │   ├── page.tsx        # Homepage
│   │   └── editor/         # Editor pages
│   ├── components/         # React components
│   │   └── CodeEditor.tsx  # Main editor component
│   ├── lib/                # Utilities and configurations
│   │   ├── mongodb.ts      # Database connection
│   │   └── models/         # Mongoose models
│   └── types/              # TypeScript type definitions
├── docker-compose.yml      # Docker services
├── Dockerfile             # Production Docker image
├── tailwind.config.js     # Tailwind CSS configuration
└── README.md              # This file

🎨 Key Components

CodeEditor Component

The heart of the application featuring:

• Monaco Editor with syntax highlighting
• Three-pane layout (HTML, CSS, JS)
• Live preview with sandboxed iframe
• Real-time collaboration cursors
• Visual code flow toggle

Authentication System

• Secure JWT-based authentication
• Social login integration
• Protected routes and API endpoints
• User session management

Database Models

• User: Authentication and profile data
• Project: Code storage and metadata
• Collaboration: Real-time session data

🔒 Security Features

• Sandboxed Execution: Code runs in isolated iframe
• Input Validation: All user inputs are validated
• JWT Authentication: Secure stateless authentication
• Environment Variables: Sensitive data protection

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

MIT License - see the LICENSE file for details.