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.

Polaris 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

• 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

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

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

• 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

• Node.js 20.09+
• npm or pnpm
• Accounts needed:
  • Clerk - Authentication
  • Convex - Database
  • Inngest - Background jobs
  • Anthropic or Google AI Studio - AI API (one required)
  • Firecrawl - Web scraping (optional)
  • Sentry - Error tracking (optional)

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env.local

4. Configure your .env.local with the required keys:

   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   
   # Convex
   NEXT_PUBLIC_CONVEX_URL=
   CONVEX_DEPLOYMENT=
   POLARIS_CONVEX_INTERNAL_KEY=  # Generate a random string
   
   # AI Provider (choose one)
   ANTHROPIC_API_KEY=        # Preferred - Claude Sonnet 4
   GOOGLE_GENERATIVE_AI_API_KEY=  # Free alternative - Gemini 2.0 Flash
   
   # Firecrawl (optional)
   FIRECRAWL_API_KEY=
   
   # Sentry (optional)
   SENTRY_DSN=

5. Start the Convex development server:

   npx convex dev

6. In a new terminal, start the Next.js development server:

   npm run dev

7. In another terminal, start the Inngest dev server:

   npx inngest-cli@latest dev

8. Open http://localhost:3000

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

• 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

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

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

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

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

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

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

A huge thank you to the sponsors who made this tutorial possible. Consider checking them out - they offer generous free tiers perfect for learning!

Clerk - Add authentication to your app in minutes, not days.

Convex - The real-time database that makes building collaborative apps a breeze.

Inngest - Reliable background jobs and event-driven workflows.

Firecrawl - Turn any website into LLM-ready data.

Sentry - See what's broken and fix it fast.

CodeRabbit - AI-powered code reviews that catch bugs before your users do.

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