PIXELCODE IDE is a browser-based collaborative coding platform that supports 10+ languages, 15+ themes, and flexible input handling. It offers project management with isolated file systems, allowing users to create, edit, and organize files and folders per project.
Users can generate sharable code links with custom titles and descriptions, and access Nebula, an AI assistant powered by Gemini 1.5 Flash, for debugging and code suggestions. Both Guest and Authenticated modes are supported, with real-time collaboration available via coding rooms.

Operating Modes

Guest Mode

Built a frictionless Guest Mode for instant code execution and code sharing

Authenticated Mode

Implemented JWT-based authentication with email verification and password reset functionality to ensure secure access and account protection.

Key Features

Project Management

Built a project-based structure allowing authenticated users to manage multiple coding projects, each with its own isolated environment.

File Management

Built a complete file system from scratch for authenticated users, enabling them to create, update, delete, and rename files and folders.

Real-Time Room Collaboration

Developed a room-based live collaboration system where users can code together in real-time. Room creators can block participants to maintain control.

Code Sharing

Built a robust link sharing system that allows users to generate shareable links for code snippets, with update capabilities restricted to the admin.

AI Code Assistant - Nebula

Integrated Google's Gemini 1.5 Flash API to power Nebula, an intelligent coding assistant that provides debugging assistance and code explanations.

Multi-Language Code Execution

Integrated the Monaco Editor with support for 10+ programming languages, syntax highlighting, and code execution using a one compiler API.

Multiple Themes

Integrated 15+ themes from a Monaco themes GitHub repo to enhance the coding experience, allowing users to personalize their environment and reduce eye strain.

Tech Stacks

Frontend

React.js
Monaco Editor for code editing
Tailwind CSS for styling
Redux Toolkit for global state management
Acernity UI
Lucide React for icons
Frame motion
Socket.IO Client for real-time collaboration

Backend & Services

Node.js with Express.js
MongoDB with mongoose
JWT authentication system
Google Gemini 1.5 Flash API
Nodemailer for email verifaction and password reset
Socket.IO for real-time collaboration

Achievements

PIXELCODE secured 3rd place in DA-IICT Microsoft Clubs Winter of Code 7.0 competition
Proof

Pixelcode