✦ Codex AI Code Editor

A full-stack, AI-powered browser-based development platform.

Generate, edit, run, and collaborate on code — all inside your browser.

---

🚀 Overview

Codex AI Code Editor is a powerful, full-stack development environment that runs entirely in the browser. It combines Google Gemini AI for intelligent code generation, WebContainers for real Node.js execution without leaving the browser, and Socket.io for real-time multi-user collaboration — all built on the MERN stack.

Simply describe what you want to build, and the AI generates a complete, runnable project structure for you. Collaborate with teammates in real time, explore the file tree, edit code, and see it run — live.

---

✨ Key Features

🤖 AI-Powered Code Generation

• Integrated with Google Gemini (@google/genai + @google/generative-ai)
• Mention @ai in the project chat to trigger AI assistance
• AI parses natural language prompts and returns a structured file tree with complete code
• Responses are rendered with syntax highlighting (via highlight.js) and Markdown (via markdown-to-jsx)

⚡ Real-Time Collaboration

• Powered by Socket.io (v4) — users in the same project share a real-time room
• Project chat with live message broadcasting
• AI responses are emitted to all connected users simultaneously

🖥️ In-Browser Code Execution

• Uses WebContainers (@webcontainer/api) to run a full Node.js environment in the browser
• Live terminal output and filesystem emulation — no server-side sandbox needed
• Integrated File Explorer and Code Editor components for intuitive navigation

🔐 Secure Authentication

• JWT (JsonWebToken) based stateless auth with bcrypt password hashing
• Persistent sessions via HTTP-only cookies and cookie-parser
• Input validation via express-validator
• Protected API routes and Socket.io middleware

📂 Project Management

• Create and manage multiple coding projects per user
• Each project has its own isolated workspace, file tree, and collaboration room
• Add/remove collaborators to shared projects

🎨 Modern UI/UX

• Built with React 19 + Vite for blazing-fast HMR
• Styled with Tailwind CSS v3 and PostCSS
• Smooth transitions with Framer Motion
• Icons from Remix Icon
• Responsive design with a clean, dark-themed aesthetic

---

🏗️ Technology Stack

Frontend

Technology	Purpose
React 19 + Vite	UI framework & dev server
Tailwind CSS v3	Utility-first styling
Framer Motion	Animations & transitions
Socket.io Client	Real-time communication
WebContainers API	In-browser Node.js runtime
Axios	HTTP requests
React Router DOM v7	Client-side routing
highlight.js	Syntax highlighting
markdown-to-jsx	Markdown rendering
Remix Icon	Icon library

Backend

Technology	Purpose
Node.js + Express 5	REST API server
MongoDB + Mongoose	Database & ODM
Socket.io	WebSocket server for real-time events
Google Generative AI SDK	Gemini AI integration
Redis (ioredis)	Caching layer
jsonwebtoken	JWT authentication
bcrypt	Password hashing
express-validator	Input validation
Morgan	HTTP request logging
dotenv	Environment variable management

---

📂 Project Structure

Codex/
├── backend/
│   ├── src/
│   │   ├── config/              # Database & Cache connection (db.js, cache.js)
│   │   ├── controllers/
│   │   │   ├── ai.controller.js       # AI prompt handler
│   │   │   ├── auth.controller.js     # Register / Login / Logout / Profile
│   │   │   └── project.controller.js  # CRUD + collaborator management
│   │   ├── middleware/          # JWT auth & Redis Blacklist middleware
│   │   ├── models/
│   │   │   ├── user.model.js          # User schema (Mongoose)
│   │   │   └── project.model.js       # Project schema with collaborators
│   │   ├── routes/
│   │   │   ├── auth.routes.js         # /api/auth/*
│   │   │   ├── project.routes.js      # /projects/*
│   │   │   └── ai.routes.js           # /ai/*
│   │   ├── services/
│   │   │   ├── ai.service.js          # Gemini AI generation logic
│   │   │   ├── auth.service.js        # Auth business logic
│   │   │   └── project.service.js     # Project business logic
│   │   ├── validators/          # express-validator rule sets
│   │   └── app.js               # Express app setup & middleware
│   ├── server.js                # HTTP server + Socket.io setup
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── app/                 # Application Entry and Routing
│   │   │   ├── routes/          # React Router route definitions (AppRoutes.jsx)
│   │   │   ├── App.jsx          # Main application wrapper
│   │   │   └── index.css        # Global Tailwind CSS
│   │   ├── features/            # 4-Layer Architecture Implementation
│   │   │   ├── components/      # UI Layer: Reusable UI (Protected, CodeEditor)
│   │   │   ├── context/         # State Layer: Global state (UserContext)
│   │   │   ├── hooks/           # Hooks Layer: Logic orchestration (useAuth, useProject)
│   │   │   ├── pages/           # UI Layer: Main route pages
│   │   │   │   ├── auth/        # Login.jsx, Register.jsx
│   │   │   │   └── project/     # Home.jsx, Project.jsx
│   │   │   ├── services/        # API Layer: Backend communication (auth.api.js, project.api.js)
│   │   │   └── config/          # Socket.io, WebContainers, and Axios configs
│   │   └── main.jsx             # React DOM entry point
│   ├── public/                  # Static assets
│   ├── index.html
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── package.json
│
└── Readme.md

---

⚙️ Installation & Setup

Prerequisites

Make sure you have the following installed:

• Node.js v18 or higher (node -v)
• npm v8+ (bundled with Node.js)
• MongoDB (local installation or MongoDB Atlas free tier)
• Redis (local installation or Upstash cloud instance)
• A Google Gemini API Key — get one free at ai.google.dev

---

1. Clone the Repository

git clone <repository-url>
cd saas

---

2. Backend Setup

cd backend
npm install

Create a .env file inside the backend/ directory:

# Server
PORT=3000

# Database
MONGO_URI=mongodb://localhost:27017/codex-ai-db

# Auth
JWT_SECRET=your_super_secret_jwt_key

# Google Gemini AI
GOOGLE_AI_KEY=your_gemini_api_key

# Redis
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=your_redis_password

Start the backend server:

# Development (with auto-reload via nodemon)
npm run dev

# Production
node server.js

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

---

3. Frontend Setup

Open a new terminal and run:

cd frontend
npm install
npm run dev

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

---

4. Open the App

Navigate to http://localhost:5173 in your browser.

1. Register a new account
2. Create a project from the Home dashboard
3. In the project workspace, type @ai <your prompt> in the chat to generate code
4. Browse the generated file tree, open files in the code editor, and run the project in the WebContainer terminal

---

🔌 API Endpoints

Auth Routes — /api/auth

Method	Endpoint	Description
POST	/register	Register a new user
POST	/login	Log in and receive a JWT cookie
GET	/logout	Clear the auth cookie and log out
GET	/profile	Get the logged-in user's profile

Project Routes — /api/project

Method	Endpoint	Description
POST	/create	Create a new project
GET	/all	Get all projects for the current user
GET	/:projectId	Get a single project by ID
PUT	/add-user	Add a collaborator to a project

AI Routes — /api/ai

Method	Endpoint	Description
GET	/get-result	Send a prompt and receive an AI-generated file tree

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature-name
3. Commit your changes: git commit -m "feat: add your feature"
4. Push to the branch: git push origin feature/your-feature-name
5. Open a Pull Request

Please follow conventional commit messages and ensure your code passes linting before submitting.

---

⚠️ Disclaimer

This project is a personal/educational implementation of an AI-powered code editor, inspired by similar SaaS development tools. It uses Google Gemini API for AI features — a valid API key is required for the AI functionality to work. Usage of the Gemini API is subject to Google's Terms of Service and data usage policies.

---

Made with ❤️ using the MERN Stack + Google Gemini AI