# Build and Deploy a Cursor Clone | Next.js 16, React, Convex | Full Course 2026

Source: https://www.youtube.com/watch?v=Xf9rHPNBMyQ
Recap page: https://rapidrecap.app/video/Xf9rHPNBMyQ
Generated: 2026-01-05T14:30:47.906+00:00

---
## Quick Overview

The tutorial successfully builds Polaris, a complete AI-powered IDE clone using Next.js 16, TypeScript, and Convex, integrating features like Ghost Text Suggestions, an AI agent with file modification capabilities, live preview via Web Containers, and full GitHub integration.

**Key Points:**
- The project initiates by generating the entire structure in real-time, storing files and folders in the Convex database using its sync engine for true real-time reactivity.
- The editor utilizes CodeMirror 6 and displays context-aware AI suggestions as ghost text, accepted by hitting tab, while Firecrawl scrapes external URLs to feed context directly to the AI.
- The AI agent executes complex changes via a chat sidebar, utilizing Ingest for reliable background processing, retries, and managing agent execution.
- Authentication and billing are managed entirely by Clerk, which handles signup flows, OAuth providers (including GitHub for repository access), and tiered billing plans.
- The initial setup requires installing Next.js 16.1.1, TypeScript, ESLint, Tailwind, and the App Router, followed by installing and configuring Shadcn UI components (version 3.6.2).
- Dark mode is hardcoded by installing Next Themes (0.4.6) and wrapping the application with the ThemeProvider in layout.tsx, setting the default theme to 'dark'.
- The tutorial emphasizes a proper Git workflow, committing setup changes, creating a branch named '02 authentication', and utilizing Code Rabbit for automated, teachable pull request reviews.

**Context:** This video serves as a comprehensive tutorial for building Polaris, a functional clone of modern AI coding editors like Cursor, leveraging a full modern web stack. The core technologies discussed include Next.js 16 and TypeScript for the foundation, Convex for a real-time database backend, Clerk for user management (authentication and payments), and various specialized tools like CodeMirror 6, Web Containers, Firecrawl, Ingest, Sentry, and Code Rabbit to achieve advanced IDE features.

## Detailed Analysis

The tutorial guides the user through setting up Polaris, starting with project initialization via Next.js 16.1.1, ensuring specific versions are used to prevent breaking changes, and configuring TypeScript, Tailwind CSS, and the App Router. Next, Shadcn UI components are installed (version 3.6.2), which are emphasized as primitives rather than a standard library, allowing deep source code modification, demonstrated by creating a custom 'purple' button variant. The environment is immediately set to dark mode by installing Next Themes and wrapping the root layout with a ThemeProvider configured for the dark theme, alongside setting custom fonts (Inter and IBM Plex Mono) via a custom globals.css file. Authentication is integrated using Clerk, requiring specific configurations for email and GitHub OAuth in the dashboard, installing the SDK (version 6.36.5), setting environment keys, and implementing the new Next.js proxy file for middleware protection, wrapping the app with the ClerkProvider to show authenticated (UserButton) or unauthenticated (SignIn/SignUp buttons) views. The tutorial stresses using the exact versions provided to maintain parity. Finally, the setup phase concludes with committing all changes, pushing to a new GitHub branch ('02 authentication'), creating a pull request, and demonstrating the power of Code Rabbit for automated reviews, including its ability to learn from user corrections regarding Next.js 16's middleware naming convention change to 'proxy'. The next major step outlined is integrating Convex as the real-time database to handle file storage and state synchronization, which is shown to instantly propagate changes across multiple browser instances.

### Project Initialization & Editor Setup

- Generating project structure via AI description
- Using CodeMirror 6 for the editor
- Ghost text suggestions accepted via tab
- Web Containers enable in-browser NodeJS execution
- Firecrawl scrapes URLs for AI context.

### Styling and Theming

- Installing Shadcn UI (v3.6.2) and demonstrating source code modification for custom variants
- Forcing dark mode using Next Themes (v0.4.6) and ThemeProvider in layout.tsx
- Replacing default fonts with Inter and IBM Plex Mono via custom globals.css.

### Authentication Integration with Clerk

- Creating a Clerk application, enabling email and GitHub OAuth
- Installing Clerk SDK (v6.36.5) and setting environment keys
- Implementing Next.js proxy middleware and wrapping the app with ClerkProvider in layout.tsx
- Showing authenticated (UserButton) vs. unauthenticated (SignIn/SignUp buttons) views.

### Workflow and Review Process

- Committing setup changes and creating a dedicated Git branch ('02 authentication') for each chapter
- Merging completed features back into main after review
- Utilizing Code Rabbit for automated PR reviews, showcasing its ability to learn from user corrections regarding Next.js 16 proxy/middleware naming.

### Database Foundation with Convex

- Setting up a Convex project and installing the SDK (v1.31.2)
- Running npx convex dev to sync backend functions and configure environment variables
- Previewing Convex's key feature: automatic, real-time sync engine that makes the cloud IDE feel native, demonstrated by instant file/folder renaming across two browser windows.