Politron - Build a Cursor AI Alternative

This is the repository for a comprehensive YouTube tutorial series where we build a fully-featured cloud IDE from scratch.

Note: This is Part 1 of 2 of the tutorial series. The codebase is functional but incomplete - Part 2 will add the AI Agent, WebContainer preview, and GitHub integration.

What We're Building

Politron is a browser-based IDE inspired by Cursor AI, featuring:

Real-time collaborative code editing
AI-powered code suggestions and quick edit (Cmd+K)
Conversation-based AI assistant
In-browser code execution with WebContainer
GitHub import/export integration
Multi-file project management

Tech Stack

Category	Technologies
Frontend	Next.js 16, React 19, TypeScript, Tailwind CSS 4
Editor	CodeMirror 6, Custom Extensions, One Dark Theme
Backend	Convex (Real-time DB), Inngest (Background Jobs)
AI	GLM-4.7 (Zhipu AI)
Auth	Supabase (with GitHub OAuth)
Execution	WebContainer API, xterm.js
UI	shadcn/ui, Radix UI

Part 1 Contents (Chapters 1-12)

Phase 1: Foundation & Sponsor Technologies

Chapter 1: Project Setup, UI Library & Theme
Chapter 2: Clerk Authentication & Protected Routes
Chapter 3: Convex Database & Real-time Setup
Chapter 4: Inngest - Background Jobs & Non-Blocking UI
Chapter 5: Firecrawl - Teaching AI with Live Documentation
Chapter 6: Sentry - Error Tracking & LLM Monitoring
Chapter 7: Projects Dashboard & Landing Page

Phase 2: File System & Editor

Chapter 8: Project IDE Layout & Resizable Panes
Chapter 9: File Explorer - Full Implementation
Chapter 10: Code Editor & State Management

Phase 3: AI Features (Partial)

Chapter 11: AI Suggestions & Quick Edit
Chapter 12: Conversation System

Part 2 Contents (Chapters 13-16) - Coming Soon

Chapter 13: AI Agent & Tools (AgentKit, file management tools)
Chapter 14: WebContainer, Terminal & Preview
Chapter 15: GitHub Import & Export
Chapter 16: AI Project Creation & Final Polish

Getting Started

Prerequisites

Node.js 20.09+
npm or pnpm
Accounts needed:
- Supabase - Authentication
- Convex - Database
- Inngest - Background jobs (optional)
- Zhipu AI - AI API (GLM-4.7)

Installation

Clone the repository:

git clone https://github.com/code-with-antonio/polaris.git
cd politron

Install dependencies:
```
npm install
```
Set up environment variables:
```
cp .env.example .env.local
```

Configure your .env.local with the required keys:

# Supabase
NEXT_SUPABASE_URL=your_supabase_project_url
NEXT_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key

# Convex
NEXT_PUBLIC_CONVEX_URL=your_convex_deploy_url
POLARIS_CONVEX_INTERNAL_KEY=  # Generate a random string

# GLM AI
GLM_KEY=your_glm_api_key

# Inngest (optional - for background jobs)
INNGEST_EVENT_KEY=your_inngest_event_key
INNGEST_SIGNING_KEY=your_inngest_signing_key

Start the Convex development server:
```
npx convex dev
```
In a new terminal, start the Next.js development server:
```
npm run dev
```
In another terminal, start the Inngest dev server (optional):
```
npx inngest-cli@latest dev
```
Open http://localhost:3000

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── messages/      # Conversation API
│   │   ├── suggestion/    # AI suggestions
│   │   └── quick-edit/    # Cmd+K editing
│   └── projects/          # Project pages
├── components/            # Shared components
│   ├── ui/               # shadcn/ui components
│   └── ai-elements/      # AI conversation components
├── features/
│   ├── auth/             # Authentication
│   ├── conversations/    # AI chat system
│   ├── editor/           # CodeMirror setup
│   │   └── extensions/   # Custom extensions
│   ├── preview/          # WebContainer (Part 2)
│   └── projects/         # Project management
├── inngest/              # Inngest client
└── lib/                  # Utilities

convex/
├── schema.ts             # Database schema
├── projects.ts           # Project queries/mutations
├── files.ts              # File operations
├── conversations.ts      # Conversation operations
└── system.ts             # Internal API for Inngest

Features Implemented (Part 1)

Editor

Syntax highlighting for JS, TS, CSS, HTML, JSON, Markdown, Python
Line numbers and code folding
Minimap overview
Bracket matching and indentation guides
Multi-cursor editing

AI Features

Real-time code suggestions with GLM-4.7
Quick edit with Cmd+K (select code + natural language instruction)
Selection tooltip for quick actions
Conversation sidebar with message history

File Management

File explorer with folder hierarchy
Create, rename, delete files and folders
VSCode-style file icons
Tab-based file navigation
Auto-save with debouncing

Real-time

Convex-powered instant updates
Optimistic UI updates
Background job processing with Inngest

Current Limitations (Part 1)

These features are planned for Part 2:

AI agent cannot yet modify files (mock response only)
No message cancellation
No past conversations dialog
No code preview/execution
No GitHub integration
No AI project generation

Scripts

npm run dev       # Start development server
npm run build     # Build for production
npm run start     # Start production server
npm run lint      # Run ESLint

Tutorial Links

YouTube Playlist: [Coming Soon]
Part 1: Chapters 1-12
Part 2: Chapters 13-16

Acknowledgments

Cursor - Inspiration for the project
Orchids - Inspiration for the project
shadcn/ui - UI components
CodeMirror - Code editor

Name	frontend-design
Description	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

frontend-design

SKILL.md