What You'll Build in 30 Minutes
Remember when spinning up a new full-stack project meant an entire afternoon of boilerplate, config files, and Stack Overflow tabs? Those days are over.
Cursor — the AI-first code editor that saw 56% user growth in late 2025 — lets you go from an empty folder to a deployed application in the time it takes to watch a TV episode. In this tutorial, you'll do exactly that: build a complete task management app with a polished UI, REST API, and database in under 30 minutes.
No prior Cursor experience needed. Just follow along, step by step.
- Time Required: ~30 minutes
- Difficulty: Beginner to Intermediate
- Tech Stack: Next.js 15, Tailwind CSS, SQLite (via Prisma)
- What You'll Build: Full-stack task manager with CRUD operations
- Prerequisites: Node.js 18+, basic JavaScript/TypeScript knowledge
- Cursor Plan: Free tier works (Pro recommended for best experience)
By the end, you'll have a deployed, working application — and a solid understanding of how to use Cursor's Agent Mode to build anything faster.
Core Concepts: What Makes Cursor Different
Before we start building, let's quickly cover the Cursor features we'll rely on throughout this tutorial.
Cursor is an AI-first code editor built as a fork of VS Code. It looks and feels familiar, but it embeds AI deeply into every part of the development workflow. With the release of Cursor 2.0 and its new Composer model — a purpose-built coding model that runs at 250 tokens per second, 4x faster than comparable models — AI-assisted development has reached a new level of speed and reliability.
Agent Mode — The star of this tutorial. Agent Mode can autonomously navigate your codebase, create and edit multiple files, run terminal commands, and verify that changes work. Think of it as a tireless coding partner who understands your entire project.
Tab Completion — Intelligent autocomplete that predicts multi-line edits based on your recent changes and linter errors. Press Tab to accept, Esc to dismiss, or Ctrl/⌘ + → to accept word by word.
Cursor Rules — Persistent instructions (stored in .cursor/rules/ as .mdc files) that tell the AI your coding conventions, preferred libraries, and project patterns. We'll set these up to get consistent, high-quality output.
With those concepts in mind, let's get your environment ready.
Preparation: Setting Up Your Environment
This setup takes about 5 minutes. Once it's done, we'll start the real clock.
Head to cursor.com and download the latest version for your operating system (macOS, Windows, or Linux). The installation is straightforward — if you've installed VS Code before, this is identical.
Once installed, launch Cursor. If you're coming from VS Code, you can import your existing extensions and settings during the initial setup wizard.
Sign up for a free account or log in. The free Hobby plan includes limited AI requests — enough for this tutorial. If you plan to use Cursor regularly, the Pro plan ($20/month) gives you approximately 225 Sonnet requests per month.
You get a 14-day free trial of Pro when you first sign up. Perfect for following along with this tutorial.
Open Cursor's integrated terminal (Ctrl/⌘ + ~) and check your Node.js version:
node --version # Should be v18.0.0 or higher
npm --version # Should be v9.0.0 or higher
If you don't have Node.js installed, download it from nodejs.org. We recommend the LTS version.
Create and open a new folder for your project:
mkdir cursor-task-app && cd cursor-task-app
Then open it in Cursor: File → Open Folder or run cursor . from the terminal.
Your environment is ready. Let's start building.
Step-by-Step: Building the Full-Stack App
This is the core of the tutorial. We'll use Cursor's Agent Mode to build a task management app with Next.js, Tailwind CSS, and a SQLite database. Each step follows a simple pattern: give the Agent a clear prompt, watch it work, and verify the result.
Step 1: Initialize the Project with Agent Mode
Open the Chat panel with ⌘+L (Mac) or Ctrl+L (Windows/Linux). Make sure Agent mode is selected in the dropdown at the top of the chat panel.
Type the following prompt:
Create a new Next.js 15 project with TypeScript, Tailwind CSS, and the App Router.
Use `npx create-next-app@latest .` with these options:
- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
- src/ directory: Yes
- App Router: Yes
- Import alias: @/*
After creating the project, verify it works by running the dev server.
Agent Mode will:
- Run the
create-next-appcommand in your terminal - Select the correct options automatically
- Start the dev server to verify everything works
The first time Agent Mode tries to run a terminal command, Cursor will ask for your permission. Click "Allow" to let the agent execute commands. You can also enable auto-run for trusted commands in Settings.
Expected result: A fresh Next.js project running at http://localhost:3000 with the default landing page.
Step 2: Set Up Cursor Rules
Before we generate more code, let's tell Cursor about our project conventions. This step takes 30 seconds but dramatically improves output quality.
Give the Agent this prompt:
Create a .cursor/rules/project.mdc file with these project rules:
- Use TypeScript with strict types, avoid `any`
- Use Next.js App Router conventions (server components by default)
- Style with Tailwind CSS utility classes, no custom CSS
- Use Prisma for database access
- Keep components small and focused (under 100 lines)
- Use descriptive variable names
- Add error handling to all async operations
The Agent will create the rules file. From now on, every piece of code it generates will follow these conventions — no need to repeat yourself.
Step 3: Build the UI with Agent Mode
Now for the fun part — creating the task management interface. Give the Agent this prompt:
Build a task management UI with these requirements:
1. A main page at src/app/page.tsx that shows:
- A header with the app title "TaskFlow"
- An input field to add new tasks
- A list of tasks, each showing:
- Task title
- Completion status (checkbox)
- Delete button
- Filter buttons: All, Active, Completed
2. Create a reusable TaskItem component at src/components/task-item.tsx
3. Use a clean, modern design with Tailwind CSS:
- Centered layout, max-width 2xl
- Subtle shadows and rounded corners
- Smooth hover transitions
- Responsive on mobile
For now, use local state (useState) to manage tasks. We'll add the database later.
Watch as Agent Mode creates multiple files simultaneously — the page component, the TaskItem component, and any utility types needed. It will follow the Cursor Rules we set up, using TypeScript strict types and Tailwind CSS throughout.
Expected result: A working task management UI at http://localhost:3000 where you can add, complete, and delete tasks (stored in local state for now).
Step 4: Add the Database with Prisma
Time to make our data persistent. Prompt the Agent:
Add a SQLite database using Prisma:
1. Install Prisma and initialize it with SQLite
2. Create a Task model in prisma/schema.prisma with fields:
- id (String, cuid)
- title (String)
- completed (Boolean, default false)
- createdAt (DateTime, default now)
- updatedAt (DateTime, auto-update)
3. Run prisma generate and prisma db push
4. Create a Prisma client singleton at src/lib/prisma.ts
The Agent will handle the entire setup: installing packages, creating the schema, generating the client, and setting up the singleton pattern to prevent connection issues in development.
SQLite is perfect for tutorials and prototypes — zero configuration, no external database server needed. For production, you can easily switch to PostgreSQL by changing one line in your Prisma schema.
Step 5: Create API Routes
Now let's wire up the backend. Prompt the Agent:
Create Next.js API routes for task CRUD operations:
1. GET /api/tasks - Fetch all tasks (sorted by createdAt desc)
2. POST /api/tasks - Create a new task (body: { title: string })
3. PATCH /api/tasks/[id] - Toggle task completion
4. DELETE /api/tasks/[id] - Delete a task
Use the Prisma client from src/lib/prisma.ts.
Add proper error handling and input validation.
Return appropriate HTTP status codes.
Agent Mode will create the route files under src/app/api/tasks/ following Next.js App Router conventions. It handles the [id] dynamic route parameter and includes try-catch blocks with meaningful error messages — all without you writing a single line manually.
Step 6: Connect Frontend to API
The final coding step — connect the UI to the real backend:
Update the task management page to use the API routes instead of local state:
1. Fetch tasks from GET /api/tasks on page load
2. Add new tasks via POST /api/tasks
3. Toggle completion via PATCH /api/tasks/[id]
4. Delete tasks via DELETE /api/tasks/[id]
Use React hooks (useState, useEffect) and add loading states.
Convert the page to a client component ("use client") since it needs interactivity.
Add optimistic updates for a snappy UX.
The Agent will refactor the page component, replacing mock data with real API calls. It adds loading spinners, error handling, and optimistic updates so the UI feels instant even while waiting for the server.
Expected result: A fully functional task manager backed by a real database. Add a task, refresh the page — it persists.
- Next.js 15 with App Router
- TypeScript throughout
- Tailwind CSS styling
- SQLite database via Prisma
- RESTful API routes
- Responsive, modern UI
- Project setup: ~3 min
- Cursor Rules: ~1 min
- UI components: ~5 min
- Database setup: ~3 min
- API routes: ~5 min
- Frontend integration: ~5 min
- Total: ~22 minutes
Not bad for a complete full-stack application. Now let's look at some techniques to take your Cursor workflow even further.
Pro Tips: Getting More from Cursor
Add your framework's documentation to Cursor: go to Settings → Features → Docs and add URLs like https://nextjs.org/docs or https://www.prisma.io/docs. Then reference them in prompts with @docs for more accurate, up-to-date code generation.
When your project grows, help the Agent understand context by referencing specific files: "Update @src/components/task-item.tsx to add a due date field, matching the style of the existing completion checkbox." The @ symbol tells Cursor to read that file's contents before responding.
Visit cursor.directory for community-contributed rule templates. There are ready-made rules for React, Next.js, Python, Go, and dozens of other stacks. Drop them into your .cursor/rules/ folder and the AI instantly adapts to your conventions.
Agent Mode excels at cross-file refactoring. Try: "Rename the Task type to TodoItem across the entire codebase, updating all imports and references." The Agent will scan every file, make consistent changes, and verify nothing breaks.
Common Issues and Troubleshooting
| Problem | Solution |
|---|---|
| Agent generates code with bugs | Be more specific in your prompt. Include expected behavior, edge cases, and error handling requirements. Break complex tasks into smaller steps. |
| Agent Mode seems stuck or slow | Check your internet connection. If using the free plan, you may have hit your request limit. Try switching to a different AI model in settings. |
| Generated code doesn't match project style | Set up Cursor Rules (.cursor/rules/) before generating code. Use /Generate Cursor Rules to auto-create rules from your existing codebase. |
| Terminal commands fail | Make sure you've granted terminal permissions. Check that Node.js and npm are properly installed and accessible from Cursor's terminal. |
| Database errors after schema changes | Run npx prisma db push to sync your schema. For development, you can also delete the prisma/dev.db file and re-push to start fresh. |
| "use client" errors | Next.js App Router uses server components by default. Add "use client" at the top of any component that uses hooks (useState, useEffect) or browser APIs. |
Treat Agent Mode like a talented junior developer. Always review the code it generates before committing. It's fast and capable, but it's not infallible — especially for security-sensitive code like authentication and data validation.
FAQ
Can I build a full-stack app with Cursor for free?
Yes. Cursor's free Hobby plan includes limited AI requests, which is enough to follow this tutorial. For heavier usage, the Pro plan at $20/month provides approximately 225 Sonnet requests per month.
What programming languages does Cursor support?
Cursor supports all languages that VS Code supports, since it's built as a fork of VS Code. This includes JavaScript, TypeScript, Python, Go, Rust, Java, and many more.
How is Cursor different from [GitHub Copilot](/p/openai-codex-coding-agent)?
Cursor is a standalone AI-first code editor (a VS Code fork) with built-in Agent Mode that can autonomously execute multi-file edits and terminal commands. GitHub Copilot is an extension that adds AI capabilities to existing editors. Cursor offers deeper IDE integration and more autonomous coding workflows. For a detailed comparison, check out our Cursor vs GitHub Copilot article.
Does Cursor Agent Mode work with any framework?
Yes. Agent Mode is framework-agnostic. It works with React, Next.js, Vue, Svelte, Django, Rails, Express, and virtually any web framework. This tutorial uses Next.js as an example, but the workflow applies to any stack.
Is my code safe with Cursor?
Cursor holds SOC 2 Type II certification and uses AES-256 encryption at rest and TLS 1.2+ in transit. With Privacy Mode enabled (default for Business plans), your code is not stored or used for training. You can also use .cursorignore to exclude sensitive files.
What's Next
You just built a full-stack app in under 30 minutes — something that would have taken hours of manual coding. Here's where to go from here:
- Add authentication: Prompt the Agent to integrate NextAuth.js or Clerk for user login
- Deploy to production: Use Vercel for one-click deployment — the Agent can help set this up too
- Explore more AI coding tools: Check out our Best AI Coding Tools in 2026 roundup to see how Cursor compares to Windsurf, GitHub Copilot, and other options
- Browse AI Coding tools: Visit our AI Coding category to discover more developer tools
The key takeaway? AI-assisted development isn't about replacing developers — it's about removing the tedious parts so you can focus on what matters: designing systems, solving problems, and shipping products faster.
References & Sources
- Cursor Official Website — Features, pricing, and documentation
- Cursor 2.0 Changelog — Composer model and agent-first architecture details
- Cursor 2.0: Agent-First Architecture Complete Guide — In-depth analysis of Cursor 2.0 capabilities
- The Perfect Cursor AI Setup for React and Next.js — Builder.io's comprehensive setup guide
- How to Use Cursor AI Agents — Step-by-step agent tutorial
- Next.js Documentation — Official Next.js App Router documentation
- Prisma Documentation — Official Prisma ORM documentation
- Cursor Directory — Community-contributed Cursor Rules
This article was last updated in February 2026. Cursor features and pricing may change — visit cursor.com for the latest information.


