Skip to content

DecodeX15/codeeditor

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
backend
backend
 
 
flask
flask
 
 
frontend
frontend
 
 
readme.md
readme.md
 
 

Repository files navigation

🚀 CodeEditor - Collaborative Online Code Editor

A modern, feature-rich web-based code editor with real-time collaboration, AI-powered code assistance, and enterprise-grade security features. Perfect for remote pair programming, team coding sessions, and interactive code learning.

📋 Table of Contents

✨ Features

🎨 Code Editor

  • Syntax Highlighting: Support for 20+ programming languages (JavaScript, Python, Java, C++, Rust, Go, Dart, PHP, Ruby, Haskell, Kotlin, Shell, Swift, XML, YAML, Perl, R, and more)
  • Monaco Editor Integration: Professional-grade editor from VS Code
  • Multiple Themes: Choose from various color schemes for comfortable coding
  • Code Navigation:
    • Word wrap and customizable line numbering
    • Bracket matching with auto-highlighting
    • Automatic indentation
    • File explorer panel for intuitive file navigation
  • Real-time Syntax Validation: Immediate error detection
  • Code Formatting: Built-in code beautification

🤖 AI-Powered Code Assistance

  • Google Gemini AI Integration: Advanced code generation and suggestions
  • Error Quick-Fix: Automatic suggestions for syntax errors
  • Code Snippets: Pre-built snippets for common coding patterns
  • AI Documentation: Auto-generate comprehensive code documentation
  • Code Explanation: Get detailed explanations for complex code blocks
  • Performance Optimization Suggestions: AI-driven performance analysis

🤝 Real-Time Collaboration

  • Multi-User Editing: Multiple users can edit the same file simultaneously
  • Live Cursor Tracking: See other users' cursor positions in real-time
  • Presence Awareness: Visual indicators showing who's currently editing
  • Yjs CRDT: Conflict-free collaborative editing using Yjs protocol
  • In-Editor Comments: Team discussions without leaving the editor
  • Activity Feed: Track all changes and comments in real-time

🔐 Security & Authentication

  • Email-Based Authentication: Secure login system with email verification
  • JWT Tokens: Secure session management with JSON Web Tokens
  • Two-Factor Authentication (2FA):
    • OTP via email
    • TOTP support for authenticator apps
  • Password Management:
    • Secure password hashing with bcrypt
    • Forgot password recovery
    • Password reset functionality
  • Role-Based Access Control: Manage user permissions
  • Private & Public Workspaces: Control collaboration scope
  • Rate Limiting: Protect against brute force attacks

💾 Data Management

  • Cloud Storage: Save and manage your code snippets
  • Version History: Track changes over time
  • Code Export: Download code in multiple formats
  • Session Management: Auto-save functionality

👥 User Features

  • User Profiles: Personalized user dashboard
  • Workspace Management: Create and organize multiple coding spaces
  • User Galleries: Share code with community
  • User Statistics: Track coding activity and progress
  • Email Notifications: Stay updated with important activities

🛠 Tech Stack

Frontend

  • Framework: React 18.3.1
  • Build Tool: Vite
  • Editor: Monaco Editor (VS Code's editor)
  • Styling: Tailwind CSS 4.0.1
  • Real-time Sync:
    • Socket.io-client 4.8.1
    • Yjs 0.x (CRDT for collaborative editing)
  • Authentication:
    • Google OAuth 2.0 (React OAuth)
    • AppWrite
  • UI Libraries:
    • React Icons
    • React Toastify (notifications)
    • GSAP (animations)
  • Routing: React Router DOM 7.1.4
  • HTTP Client: Axios

Backend

  • Runtime: Node.js
  • Framework: Express.js 4.21.2
  • WebSocket: Socket.io 4.8.1
  • Database: MongoDB with Mongoose 8.9.5
  • Authentication:
    • JWT (jsonwebtoken 9.0.2)
    • OTP (otp-generator 4.0.1)
    • Bcrypt 6.0.0 for password hashing
  • Email Service:
    • Nodemailer 8.0.4
    • Resend 6.4.2
    • Twilio 5.4.3
  • Validation: Joi 17.13.3
  • CORS: Express CORS 2.8.5
  • Environment: dotenv 16.4.7

AI/ML Backend (Python/Flask)

  • Framework: Flask
  • AI Model: Google Gemini 1.5 Flash
  • API Integration: google-generativeai
  • CORS Support: Flask-CORS

Development Tools

  • Code Quality: ESLint, Prettier
  • Package Manager: npm/pnpm (for frontend and backend)
  • Task Runner: Trunk (for workflow automation)
  • Monorepo Support: Yarn workspaces compatible

📁 Project Structure

codeEditor/
├── frontend/                          # React frontend application
│   ├── src/
│   │   ├── components/               # Reusable React components
│   │   │   ├── aiSupport/           # AI assistance component
│   │   │   ├── auth/                # Authentication components (login, signup, OTP, 2FA)
│   │   │   ├── dropdown/            # Dropdown menu component
│   │   │   ├── errorSuggetion/      # Error suggestion display
│   │   │   ├── live chat/           # Real-time chat feature
│   │   │   ├── mousePointer/        # Shared mouse cursor tracking
│   │   │   └── navbar/              # Navigation bar
│   │   ├── languages/               # Language support configurations
│   │   │   ├── c/, cpp/, dart/, go/, haskell/, java/
│   │   │   ├── kotlin/, perl/, php/, python/, r/
│   │   │   ├── Ruby/, rust/, shell/, swift/, xml/, yaml/
│   │   ├── pages/                   # Page components
│   │   │   ├── about/              # About page
│   │   │   ├── editor/             # Main editor page
│   │   │   ├── home/               # Landing page
│   │   │   └── UserProfile/        # User profile pages
│   │   ├── themes/                 # Editor theme configurations
│   │   ├── syntax/                 # Syntax highlighting rules
│   │   ├── App.jsx                 # Main app component
│   │   └── main.jsx                # Entry point
│   ├── package.json                # Frontend dependencies
│   ├── vite.config.js              # Vite configuration
│   ├── tailwind.config.js          # Tailwind CSS config
│   ├── eslint.config.js            # ESLint configuration
│   └── vercel.json                 # Vercel deployment config
│
├── backend/                         # Node.js/Express backend
│   ├── src/
│   │   ├── controller/             # Business logic controllers
│   │   │   └── user.controller.js  # User management logic
│   │   ├── routes/                 # API routes
│   │   │   └── user.routes.js      # User endpoints
│   │   ├── Models/                 # MongoDB schemas
│   │   │   ├── User.model.js       # User schema
│   │   │   ├── OTP.model.js        # OTP storage schema
│   │   │   ├── RoomSession.model.js    # Collaborative room data
│   │   │   └── codeSave.model.js   # Code storage schema
│   │   ├── DB/
│   │   │   └── db.js               # Database connection
│   │   ├── Middleware/
│   │   │   ├── Auth.js             # JWT authentication middleware
│   │   │   └── checking_parameters.js  # Request validation
│   │   ├── app.js                  # Express app setup
│   │   ├── index.js                # Server entry point
│   │   └── sockethandel.js         # WebSocket handlers for real-time collaboration
│   ├── package.json                # Backend dependencies
│   ├── .env                        # Environment variables (create this)
│   └── Procfile                    # Heroku deployment config
│
├── flask/                          # Python AI/ML backend
│   ├── app.py                      # Flask application
│   ├── requirements.txt            # Python dependencies
│   ├── Procfile                    # Deployment config
│   └── pyvenv.cfg                  # Python virtual environment config
│
├── .trunk/                         # Trunk development tools
│   ├── configs/                    # Tool configurations
│   │   ├── .isort.cfg             # Import sorting
│   │   ├── .markdownlint.yaml     # Markdown linting
│   │   ├── ruff.toml              # Python linting
│   │   └── svgo.config.mjs        # SVG optimization
│   ├── tools.yaml                 # Tool definitions
│   └── plugins/                   # Custom plugins
│
├── .github/                        # GitHub configuration (if present)
├── .gitignore                      # Git ignore rules
├── trunk.yaml                      # Trunk workflow config
├── package.json                    # Monorepo root (if applicable)
├── pnpm-lock.yaml                 # Lock file for pnpm
├── README.md                       # This file
└── vercel.json                     # Vercel deployment config

📋 Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v16.x or higher) - Download
  • npm (v7.x or higher) or yarn/pnpm
  • Python (3.8 or higher) - Download
  • MongoDB (local or cloud instance like MongoDB Atlas)
  • Git
  • VS Code or any code editor

Required APIs

  • Google Generative AI API Key (for AI features) - Get here
  • AppWrite Account (for authentication) - Get here
  • Twilio Account (optional, for SMS) - Get here

📦 Installation

Step 1: Clone the Repository

git clone https://github.com/Vaibhaviitian/codeeditor
cd codeEditor

Step 2: Install Frontend Dependencies

cd frontend
npm install
# or
pnpm install

Step 3: Install Backend Dependencies

cd ../backend
npm install
# or
pnpm install

Step 4: Set Up Python Environment

cd ../flask

# Create virtual environment
python -m venv venv

# Activate virtual environment
# On Windows:
.\venv\Scripts\activate
# On macOS/Linux:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

⚙️ Configuration

Backend Configuration (.env)

Create a .env file in the backend directory:

# Server Configuration
PORT=3000
NODE_ENV=development

# Database
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/codeeditor

# JWT
JWT_SECRET=your_jwt_secret_key_here
JWT_EXPIRE=7d

# Mail Service
MAIL_SERVICE=gmail
MAIL_USER=your-email@gmail.com
MAIL_PASSWORD=your-app-password

# OTP Configuration
OTP_EXPIRE=10m
OTP_RESEND_TIME=1m

# Resend Email Service
RESEND_API_KEY=your_resend_api_key

# Twilio Configuration
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_PHONE_NUMBER=+1234567890

# AppWrite
APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
APPWRITE_PROJECT_ID=your_project_id
APPWRITE_API_KEY=your_api_key

# CORS
FRONTEND_URL=http://localhost:5173

# Socket.io Configuration
SOCKET_IO_PORT=3001
SOCKET_IO_CORS_ORIGIN=*

# Client Configuration
VITE_BACKEND_URL=http://localhost:3000
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=your_project_id
VITE_GOOGLE_OAUTH_CLIENT_ID=your_google_client_id.apps.googleusercontent.com

Frontend Configuration (.env)

Create a .env file in the frontend directory:

VITE_BACKEND_URL=http://localhost:3000
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=your_project_id
VITE_GOOGLE_OAUTH_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
VITE_API_BASE_URL=http://localhost:3000/api

Flask Configuration

Create a .env file in the flask directory or update app.py:

GEMINI_API_KEY=your_google_gemini_api_key
FLASK_ENV=development
FLASK_PORT=5000

🚀 Running the Application

You need three terminal windows to run all services:

Terminal 1: Frontend (React)

cd frontend
npm run dev

The frontend will start at http://localhost:5173

Terminal 2: Backend (Node.js/Express)

cd backend
npm run dev

The backend will start at http://localhost:3000

Terminal 3: Flask (AI Service)

cd flask

# Activate virtual environment (if not already activated)
# Windows:
.\venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate

# Run Flask
python app.py

The Flask service will start at http://localhost:5000

Access the Application

Open your browser and navigate to: http://localhost:5173/

📖 Usage Guide

Creating an Account

  1. Click on Sign Up on the landing page
  2. Enter your email and create a strong password
  3. Verify your email with the OTP sent to your inbox
  4. Set up 2FA (optional but recommended)

Creating a Coding Session

  1. Navigate to the Editor page
  2. Click New Session to create a new coding workspace
  3. Choose your programming language
  4. Start coding!

Inviting Collaborators

  1. Create or open an existing session
  2. Click Share button
  3. Copy the session link or room ID
  4. Share with team members
  5. Collaborators can join in real-time

Using AI Assistance

  1. Write or paste code in the editor
  2. Click the AI Assistant icon
  3. Choose from options:
    • Explain Code: Get explanation of selected code
    • Generate from Prompt: Ask AI to generate code
    • Fix Errors: Get suggestions for syntax errors
    • Optimize: Get performance optimization tips

Adding Comments

  1. Highlight code with your mouse
  2. Click Add Comment
  3. Type your comment
  4. Hit Enter to post
  5. Team members will see real-time updates

Saving Your Code

  1. Click Save button
  2. Give your code snippet a name
  3. Choose privacy level (Private/Public)
  4. Code is automatically backed up

🔌 API Documentation

Authentication Endpoints

Register User

POST /api/haxplore/user/register
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "secure_password",
  "name": "John Doe"
}

Login

POST /api/haxplore/user/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "secure_password"
}

Response: { token: "jwt_token", user: {...} }

Request OTP

POST /api/haxplore/user/request-otp
Content-Type: application/json

{
  "email": "user@example.com"
}

Verify OTP

POST /api/haxplore/user/verify-otp
Content-Type: application/json

{
  "email": "user@example.com",
  "otp": "123456"
}

Forgot Password

POST /api/haxplore/user/forgot-password
Content-Type: application/json

{
  "email": "user@example.com"
}

WebSocket Events (Socket.io)

Join Room

socket.emit('joinRoom', { roomID: 'room_123' });
socket.on('init', (state) => { /* Initialize editor state */ });

Collaborative Editing

// Send code updates
socket.emit('yjs-update', { roomID: 'room_123', update: [...], username: 'user' });

// Receive updates
socket.on('yjs-update', (update) => { /* Apply changes */ });

Awareness (Cursor Tracking)

socket.emit('awareness-update', { roomID: 'room_123', update: {...} });
socket.on('awareness-update', (data) => { /* Update user cursors */ });

AI Assistant Endpoint (Flask)

Generate Code

POST http://localhost:5000/generate_code
Content-Type: application/json

{
  "code_prompt": "Create a function to reverse a string in Python"
}

Response: { generated_code: "def reverse_string..." }

🔧 Development

Project Setup for Development

# Install all dependencies
npm install

# Format code across all packages
npm run format

# Run linting
npm run lint

# Build for production
npm run build

# Run tests (if available)
npm run test

Development Workflow

  1. Create a feature branch: git checkout -b feature/your-feature
  2. Make your changes: Follow the code style guidelines
  3. Test locally: Ensure all three services run correctly
  4. Commit changes: git commit -m "feat: add your feature"
  5. Push to GitHub: git push origin feature/your-feature
  6. Create a Pull Request: Describe your changes clearly

Key Commands

Command Description
npm run dev Start development server
npm run build Build for production
npm run preview Preview production build
npm run lint Run ESLint
npm run format Format code with Prettier
pm2 start backend/src/index.js Production server (with PM2)

Code Style

  • Use Prettier for formatting: npm run format
  • Follow ESLint rules: npm run lint
  • Use meaningful variable names
  • Add comments for complex logic
  • Keep functions small and focused

🤝 Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Contribution Guidelines

  • Follow the existing code style
  • Write meaningful commit messages
  • Add tests for new features
  • Update documentation as needed
  • Be respectful and constructive in discussions

🌐 Deployment

Deploy to Vercel (Frontend)

# Install Vercel CLI
npm i -g vercel

# Deploy
cd frontend
vercel

Deploy to Heroku (Backend)

# Install Heroku CLI
# Visit: https://devcenter.heroku.com/articles/heroku-cli

# Login to Heroku
heroku login

# Create app
heroku create your-app-name

# Set environment variables
heroku config:set MONGODB_URI=your_mongodb_uri

# Deploy
git push heroku main

Deploy to Railway (Flask)

# Push to Railway
railway up

🆘 Troubleshooting

Frontend won't connect to backend

Problem: CORS error or connection refused

  • Check if backend is running on http://localhost:3000
  • Verify VITE_BACKEND_URL in .env
  • Check browser console for specific errors

Real-time collaboration not working

Problem: Changes not syncing between users

  • Ensure all users are in the same room ID
  • Check Socket.io connection in browser DevTools
  • Verify firewall isn't blocking WebSocket connections

AI Assistant not working

Problem: AI suggestions not appearing

  • Verify Google Gemini API key in Flask .env
  • Check Flask server is running on port 5000
  • Check Flask logs for API errors

Authentication issues

Problem: Login/OTP not working

  • Verify MongoDB is running
  • Check email service credentials in .env
  • Check browser console for error messages

Database connection failed

Problem: MongoDB connection error

  • Verify MongoDB is running locally or Atlas URL is correct
  • Check network connectivity
  • Verify credentials in MONGODB_URI

📚 Resources

Documentation

Video Demo

📹 Demo Video: Watch on Google Drive

Source Code

🔗 GitHub Repository: View on GitHub

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

👨‍💻 Author

Vaibhav Aryan

🙏 Acknowledgments

  • Thank you to all contributors
  • Google Gemini AI for AI features
  • Monaco Editor team
  • Socket.io community
  • All open-source projects used

✅ Checklist for First-Time Setup

  • Installed Node.js and Python
  • Cloned the repository
  • Created MongoDB database
  • Set up all .env files
  • Installed frontend dependencies
  • Installed backend dependencies
  • Set up Flask virtual environment
  • Started all three services
  • Successfully accessed http://localhost:5173
  • Created an account
  • Created your first coding session

📞 Support

If you have any questions or issues:

  1. Check the Troubleshooting section
  2. Search existing GitHub issues
  3. Create a new GitHub issue with detailed description
  4. Connect on LinkedIn/Twitter for discussions

Last Updated: April 2026 Version: 1.0.0

  • Dark and light mode toggle.
  • Customizable color themes.
  • Collapsible sidebar for maximizing workspace.
  • Simple and intuitive user interface for seamless interaction.

Demo

You can view a live demo of the editor - https://codeeditor-ten-zeta.vercel.app/

You can view a submitted ppt demo of this editor here.

Future Updates

  • AI-driven auto-completion for function names and variables.
  • Activity log to track recent edits and user actions.
  • Password reset functionality.

About

codeeditor-ten-zeta.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages