🚀 CodeLabs - Cloud-Based IDE in your browser

🔗code-labs.tech

A modern, full-stack cloud IDE that enables developers to create, edit, and run projects directly in the browser with real-time containerized execution environments.

✨ Features

• Multi-Project Support - Create projects with different tech stacks or frameworks (React, Node.js, Express, Next.js)
• File Management - Complete file explorer with create, rename, delete operations
• Integrated Code Editor - Powerful code edior that sync with cloud in real-time
• Browser Terminal - Full terminal access with Docker containerization
• AI Chat Bot - Integrated AI chat bot powered by Gemini for coding queries
• Authentication - Secure login with Auth0 auth library
• Cloud Storage - Projects stored in Google Firebase Cloud Storage
• Real-time Connection - WebSockets for real-time persistent connection with the server
• Contanerization - All user projects run in isolated docker contaiers
• Project Live Preview - Currently in development, will allow users to preview their projects live in the browser

🛠️ Tech Stack

Frontend

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• Socket.IO Client - Real-time communication

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• Socket.IO - WebSocket server
• Docker - Containerization
• TypeScript - Type safety

Database & Storage

• MongoDB - Database
• Firebase Storage - File storage

AI Integration

• Gemini API - AI chat bot for coding queries
• Large Language Model - gemini-2.5-flash

Authentication & Deployment

• Auth0 - Authentication
• Google Cloud - Virtual Machine (VM)
• Docker - Containerized App
• Nginx - Reverse proxy & web server
• GitHub Actions - CI/CD
• Ubuntu OS v24.04 - Operating System
• Docker Hub - Image registry
• SSH - Remote access to VM
• SSL/TLS Encryption - HTTPS

🔄 Application Flow

1. User Authentication

graph LR
    A[User Login] --> B[Auth0 Verification]
    B --> C[JWT Token]
    C --> D[User Session]

Loading

2. Project Creation

graph LR
    A[Select Tech Stack] --> B[Create Project]
    B --> C[Copy Base Template]
    C --> D[Store in Firebase]
    D --> E[Update Database]

Loading

3. IDE Workflow

graph LR
    A[Open Project] --> B[Load File Structure]
    B --> C[Create Docker Container]
    C --> D[Mount Project Files]
    D --> E[Initialize Terminal]
    E --> F[Start Coding]
    F --> G[Real-time Sync]

Loading

4. File Operations

graph LR
    A[File Action] --> B[Frontend Update]
    B --> C[WebSocket Event]
    C --> D[Docker Container]
    D --> E[Firebase Sync]
    E --> F[UI Refresh]

Loading

🚀 Getting Started

Prerequisites

• Node.js
• Docker
• MongoDB
• Firebase account
• Auth0 account
• Gemini API key

Installation

Using Docker Compose

1. Clone the repository

git clone <repository-url>
cd codelabs

2. Configure Environment Variables

# Back-end (.env)
PORT=5000
MONGODB_URI=mongod://127.0.0.1:27017
AUTH0_DOMAIN=#
## Firebase Secrets
apiKey=#
authDomain=#
projectId=#
storageBucket=#
messagingSenderId=#
appId=#
measurementId=#
FB_SECRETS_JSON=#  Firebase service account JSON string

GEMINI_API_KEY=#

# Frontend (.env)
VITE_SERVER_URL=http://localhost:5000
VITE_AUTH0_DOMAIN=#
VITE_AUTH0_CLIENT_ID=#
VITE_REDIRECT_URI=http://localhost:5173/home

3. Run with Docker Compose

docker-compose up --build

Manual Development Setup

1. Setup Backend

cd back-end
npm install

2. Start Backend

cd back-end
npm run dev

3. Setup Frontend

cd front-end
npm install

4. Start Frontend

cd front-end
npm run dev

🌐 Connect

• LinkedIn: Aman Tiwari

• X: @aman_tiwari001

• Email: amananjalitiwari2007@gmail.com

---

Built with ❤️‍🔥 by Aman Tiwari