Vibe Coding Codex

Choose a level to get started, or begin with Level 1 below.

Product

Solve a real problem for a lot of real users

+Value

Tooling

Master development tools and AI assistants

+Power

Design

Build interfaces people actually want using

+Style

Systems

Build a robust backend engines powering your app

+Scalability

Security

Secure applications for you and your users

+Safety

Shipping

Get your app fast and smooth to users

+Speed

Level 1

Get your idea live: a simple site online, code saved, local setup working, a clear goal, and basic safety.

1.1

Your Idea

Develop an idea into a concept that helps the AI understand the users problem you want to solve

1.2

Local Setup

Install Cursor on your computer and learn to use it so you have a running version of Next.js on

1.3

Landing Page

Work with professional UI libraries like Magic UI so your new landing page starts in style

1.4

Fixing Errors

Learn to deal with the inevitable errors and warnings the AI produces during development

1.5

Safety First

Learn the most important rules to follow that keep you system and web app safe from harm

1.6

Going Live

Save your code on GitHub and host your landing page on Vercel so you can start sharing it

Level 2

Ship your first feature: a tiny plan, clean UI, a clear build workflow, checked inputs, and tidy code.

2.1

First Features

Turn your concept into a PRD which is like a todo list for the AI and a chance for you to review it

2.2

Cursor Agent

Leverage Cursors agent mode and understand which models to use to build your features

2.3

UI Components

Work with UI components from shadcn/ui to make your first feature look professional

2.4

Real Functions

Build real functionality for your users and connect it to the UI components in your frontend

2.5

Zero Trust

Never trust user input - validate and sanitize everything to prevent XSS and SQL injection attacks

2.6

Debugging Flow

Format your code and detect errors and bad practices automatically with Prettier and ESLint

Level 3

Work like a pro: plan features, give AI helpful rules, consistent styles, saved data, safe access, and reviewed changes.

3.1

Feature Planning

Prioritze and the essential features first to avoid distraction and scope them to a realistic size

3.2

Cursor Rules

Create rules for Cursor to give the AI more context about your product and the tech stack

3.3

Style Systems

Use style definitions to give you web app a themed look and understand Tailwind CSS basics

3.4

Saving Data

Store and retrieve data in Supabase using modern database patterns and secure server-side operations

3.5

Database Security

Learn to assess and improve your Supabase database's security using the Security Advisor

3.6

Git Workflow

Build new features in git branches, create pull requests, and merge it into production

Level 4

Run production basics: sign‑in, planned sprints, smooth onboarding, powerful tools, and preview vs. live sites.

4.1

Sprint Planning

Manage a productive week with new features and important bug fixes in Linear.

Coming Soon

4.2

MCP Server

Enhance your AI abilities with external tools through the power of MCP Server for more context

Coming Soon

4.3

User Flow

Design a user experience from onboarding new users to making it easy to use your app

Coming Soon

4.4

Let user signup and login to your app with email + password or Google and manage their profile

Coming Soon

4.5

Auth Security

Make sure a user always is who they say they are and do only what they are allowed to do

Coming Soon

4.6

Preview & Production

Configure domains in Vercel for your preview and production environments to reduce surprises

Coming Soon

Level 5

Harden and learn: mobile‑ready pages, helpful emails, abuse protection, auto tests, real user feedback, and command‑line skills.

5.1

User Research

Interview users and invite them to surveys to understand what they want from your app

Coming Soon

5.2

Terminal Usage

Get comfortable with the terminal and use AI to leverage this very powerful tool

Coming Soon

5.3

Mobile Responsive

Make your app work perfectly on phones and tablets so users can access it anywhere

Coming Soon

5.4

Sending Emails

Send welcome emails and push notifications with Resend so users come back to your app

Coming Soon

5.5

Rate Limiting

Stop bots and abusive users from spamming your API with rate limits and CAPTCHA protection

Coming Soon

5.6

Automated Tests

Set up unit and end-to-end tests so you can ship changes with confidence without breaking things

Coming Soon

Level 6

Operate and earn: payments live, accessible design, safe dependencies, error alerts, tuned setup, and a clear roadmap.

6.1

Product Strategy

Create strategic product roadmaps with measurable goals so your product grows systematically

Coming Soon

6.2

Customized Setup

Explore other coding agents like Claude Code to find the right tools for different jobs

Coming Soon

6.3

Accessibility

Add screen reader support and keyboard navigation so users can enjoy your app regardless of ability

Coming Soon

6.4

Stripe Payments

Accept payments with Stripe so users can pay for your product and you can make money

6.5

Dependency Security

Keep your npm packages and dependencies updated to avoid security vulnerabilities

Coming Soon

6.6

Error Tracking

Set up Sentry to catch crashes and errors so you fix bugs before users complain about them

Coming Soon