How to Build a Full App with Cursor in 30 Minutes (Step-by-Step)

You do not need to be a senior developer to ship a working app anymore. With Cursor’s AI-native IDE and its Composer mode, you can describe what you want in plain English and watch it build multi-file applications in real time. This tutorial walks you through building a fully functional task manager web app — from zero to deployed — in about 30 minutes. No prior framework experience required, just a willingness to describe what you want clearly.

By the end, you will understand how to set up Cursor, use Composer mode effectively, iterate with AI chat, debug issues, and deploy your app.

---

What You Will Need

• A computer with Node.js 18+ installed
• Cursor IDE (free tier works for this tutorial)
• A Vercel account (free) for deployment — optional but recommended
• About 30 minutes

---

Step 1: Install and Set Up Cursor (3 minutes)

Download Cursor from cursor.com. The free tier gives you 2,000 code completions and 50 premium requests per month, which is plenty for this tutorial.

Once installed, open Cursor and sign in. You will land in a VS Code-like interface. If you are coming from VS Code, you can import your existing settings and extensions in one click.

Open the integrated terminal with Ctrl+` and create your project directory:

mkdir task-manager && cd task-manager

---

Step 2: Scaffold the Project with Composer (5 minutes)

Press Cmd+I (macOS) or Ctrl+I (Windows/Linux) to open Composer mode. This is where the magic happens. Composer can create and edit multiple files from a single prompt.

Type this into Composer:

Create a Next.js 14 task manager app with TypeScript and Tailwind CSS.
Use the App Router. Include:
- A home page that shows a list of tasks
- Each task has a title, description, priority (low/medium/high), and status (todo/in-progress/done)
- A form to add new tasks
- Ability to change task status by clicking
- Tasks stored in localStorage for persistence
- Clean, modern UI with a sidebar showing task counts by status

Hit Enter. Cursor will generate the project structure, create package.json, layout files, components, and styles. This usually takes 30-60 seconds for the full scaffold.

When Composer finishes, run the generated install command in your terminal:

npm install
npm run dev

Open http://localhost:3000 in your browser. You should see a working task manager.

---

Step 3: Iterate and Refine with AI (10 minutes)

The first generation gets you 80% of the way. Now you refine. Here is where Cursor shines — you describe changes in natural language and Composer applies them across all relevant files.

Open Composer again (Cmd+I) and add follow-up instructions one at a time:

Add drag-and-drop reordering to the task list using the @dnd-kit library.
Tasks should be sortable within each status column.

Add a dark mode toggle in the header. Store the preference in localStorage.
Use Tailwind's dark mode with the 'class' strategy.

Add a search bar that filters tasks by title in real-time.
Show a "no results" state when nothing matches.

Each prompt modifies multiple files simultaneously. After each change, check your browser to verify it works. If something breaks, that is what the next step is for.

Pro tip: Be specific about what you want. “Make it look better” is too vague. “Increase the card padding to 24px, add a subtle shadow, and use the Inter font” gives Cursor precise instructions to work with.

---

Step 4: Debug Issues with AI Chat (5 minutes)

Sometimes the generated code has bugs. This is normal. Instead of staring at error messages, use Cursor’s chat panel (Cmd+L) to debug.

Paste the error message and ask:

I'm getting this error when I drag a task to a different column:
[paste error here]

Fix the drag-and-drop handler so tasks update their status when
moved between columns. Make sure localStorage syncs after the change.

Cursor will analyze the error, identify the root cause, and suggest fixes. You can apply the fix directly from the chat panel by clicking the “Apply” button on the code block.

Another powerful debugging pattern: select problematic code in the editor, then press Cmd+L to ask about it. Cursor automatically includes the selected code as context.

This drag handler isn't updating the task status correctly.
What's wrong and how do I fix it?

---

Step 5: Add a Backend with API Routes (5 minutes)

Let us add a proper backend. Open Composer and describe what you need:

Convert the localStorage storage to an in-memory backend using
Next.js API routes under /api/tasks. The routes should support:
- GET /api/tasks - list all tasks
- POST /api/tasks - create a task
- PATCH /api/tasks/[id] - update a task
- DELETE /api/tasks/[id] - delete a task

Update all components to fetch from these API endpoints using
React hooks (useState + useEffect). Add loading states and
error handling.

Cursor will create the API routes and refactor all your components to use fetch instead of direct localStorage access. Check your browser to make sure everything still works.

---

Step 6: Deploy to Vercel (2 minutes)

Your app is ready. Push it to GitHub and deploy:

git init
git add -A
git commit -m "initial task manager"

Create a new repository on GitHub, then:

git remote add origin https://github.com/yourusername/task-manager.git
git push -u origin main

Go to vercel.com, import the repository, and click Deploy. Your app will be live in about 60 seconds.

---

Pro Tips for Building with Cursor

Start with a clear architecture description. Your first Composer prompt should describe the tech stack, data model, and main features. The more context Cursor has upfront, the better the generated code.

Use @ file references. In Composer, type @ to reference specific files. For example: @components/TaskCard.tsx add a priority badge with color coding targets exactly one file.

Break complex features into prompts. Instead of one massive prompt describing everything, chain smaller, focused prompts. Each one builds on the last.

Use “Agent mode” for complex tasks. Toggle agent mode in Composer for tasks that need terminal commands, like installing packages or running migrations. Agent mode lets Cursor execute commands autonomously.

Review before accepting. Cursor shows you diffs before applying changes. Read them. Understanding what changed teaches you the framework and catches mistakes early.

---

Common Mistakes to Avoid

Vague prompts. “Build me an app” gives you generic code. Describe the specific features, UI layout, and behavior you want.

Not testing after each change. Always check your browser after a Composer round. Catching issues immediately is easier than debugging ten changes at once.

Ignoring TypeScript errors. If Cursor generates code with type errors, fix them right away. They compound quickly in larger projects.

Over-relying on one prompt. A single Composer session has a context limit. For large features, split across multiple sessions and use @ to reference existing files.

Skipping the review step. Click through the diff view before accepting changes. Sometimes Cursor removes code you wanted to keep.

---

Summary

Building a full app with Cursor in 30 minutes is realistic once you know the workflow. The key pattern is: describe the architecture in Composer, iterate with targeted prompts, debug with AI chat, and deploy with standard tools. Cursor handles the code generation; you handle the product thinking.

The task manager you built includes multi-column views, drag-and-drop, dark mode, search, API routes, and deployment — a legitimate application that would take hours to build manually. The same workflow scales to larger projects: replace the task manager description with your actual product requirements and follow the same prompt-iterate-debug cycle.