Introduction
You have an app idea. Maybe an internal dashboard, maybe a productivity tool, maybe an MVP you want to test with real customers. Normally, you would start by planning the architecture, choosing frameworks, configuring Docker, Kubernetes, microservices — and three weeks later you still do not have a functional page.
There is an alternative. It is called vibe coding — a term popularised by Andrej Karpathy (co-founder of OpenAI) describing a development style where you describe what you want, and AI writes the code. You are the director; AI is the production team.
In this article I show you a concrete workflow to go from idea to deployed app in production within 24 hours. Not theoretical. Practical. With clear steps, concrete tools, and lessons learned from direct experience.
Hour 0–1: Install and configure Cursor
What is Cursor?
Cursor is a code editor based on VS Code, but built from scratch for working with AI. It is not a plugin added on top — it is an IDE where AI is a first-class citizen. It can read your entire project, edit multiple files simultaneously, run commands in the terminal, and do refactoring across the whole codebase.
Installation
- Go to cursor.com and download the app for your operating system.
- Install it like any other app. If you have used VS Code, you will feel at home — extensions and settings can be imported.
Subscription
Cursor has a free (Hobby) plan with limited functionality, but for serious vibe coding you need the Pro plan ($20/month). What you get:
- Unlimited tab completions — real-time code suggestions
- Unlimited auto mode — AI automatically chooses the best model for each task
- Agent mode — AI can edit multiple files, run commands, and implement complete features
- Access to top models — Claude, GPT, Gemini — everything that is best
If you discover that $20/month is not enough (unlikely at the beginning), you can upgrade to Pro+ ($60/month) or Ultra ($200/month) later.
Tip: Start with Pro. Monitor your usage for a week. Upgrade only if you constantly hit limits.
First steps in Cursor
After installation:
- Open Cursor and connect your GitHub account.
- Familiarise yourself with the three main modes:
- Ask Mode (Ctrl/Cmd + L) — ask AI, get answers and suggestions without automatic modifications
- Agent Mode (Ctrl/Cmd + I) — AI implements autonomously: creates files, edits code, runs commands
- Tab completions — inline suggestions as you type, accept with Tab
- Configure Cursor Rules — permanent instructions that AI follows in your project. Create a
.cursorrulesfile in the project root.
Hour 1–3: Choose a simple tech stack (and do not overcomplicate!)
The golden rule: monolith beats microservices
This is probably the most important decision you will make. And the most common mistake developers (and AI) make is to over-engineer the architecture.
You do not need:
- Docker (not for an MVP)
- Kubernetes (absolutely not)
- Microservices (maybe in 2 years)
- Distributed databases
- Message queues
- 15 services communicating with each other
You need:
- A full-stack framework
- A database
- A simple hosting service
Recommended stacks for vibe coding
Here is what works best with AI — stacks that the models know very well from training data:
Option 1: Next.js + Supabase (most AI-friendly)
- Next.js — React framework with server-side rendering, API routes, and built-in routing
- Supabase — PostgreSQL database with authentication, storage, and automatic API
- Tailwind CSS — utility-first styling (AI generates Tailwind excellently)
- Vercel — one-click deploy, free for personal projects
Option 2: Laravel + Inertia.js + React (ideal if you prefer PHP)
- Laravel — mature PHP framework, excellent documentation
- Inertia.js — bridge between Laravel backend and React/Vue frontend
- SQLite or PostgreSQL — simple database
- Laravel Forge or Railway — simple deploy
Option 3: SvelteKit + Prisma + SQLite (minimalist)
- SvelteKit — modern framework, fast, minimal code
- Prisma — intuitive ORM for databases
- SQLite — zero configuration for development
- Vercel or Netlify — automatic deploy
Why does simplicity matter?
AI generates better code when the stack is simple. The fewer dependencies and abstraction layers you have, the more:
- AI makes fewer mistakes
- Debugging is faster
- Cursor context stays focused
- You can ship faster
Practical rule: If you cannot explain your stack in 30 seconds, it is too complicated for vibe coding.
Project initialization
Open the terminal in Cursor and create the project. Example with Next.js:
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
cd my-app
Initialize Git immediately:
git init
git add .
git commit -m "initial setup"
Connect to a GitHub repo:
gh repo create my-app --public --source=. --push
From this moment, every significant progress = one commit. You will need this history.
Hour 3–12: Write good prompts and split them strategically
This is the heart of vibe coding. You do not write code — you write instructions. And the quality of your instructions determines the quality of the generated code.
Principle #1: Do not ask for everything at once
The biggest mistake:
❌ "Build me a task management app with authentication, dashboard, complete CRUD, notifications, and PDF export."
This is "draw the rest of the owl". AI will generate something, but it will be fragile, full of shortcuts, and hard to debug.
Instead, split into small logical steps:
✅ Step 1: "Create the data model for a task management app. I need: User (name, email, password), Project (name, description, owner), Task (title, description, status, priority, assignee, project). Use Prisma as ORM with SQLite."
✅ Step 2: "Create the authentication page with login and register, using NextAuth.js with credentials provider. Styling with Tailwind, minimal and clean design."
✅ Step 3: "Create a dashboard that displays the logged-in user's projects. Each project is a card with name, short description, and number of tasks. Add a 'New Project' button."
Each step must be small enough for AI to hold in context (context is limited!) and clear enough so there is no ambiguity.
Principle #2: Use Ask Mode for planning, Agent Mode for execution
A powerful workflow:
- Ask Mode — describe what you want to build and ask AI for a step-by-step plan
- Review the plan, adjust if necessary
- Agent Mode — give each step from the plan, one by one
- Test after each step
- Commit after each completed feature
Principle #3: Provide explicit context
AI does not read minds. The more specific you are, the better the result. Concrete techniques:
References with @:
@filename— reference to a specific file in the project@codebase— AI analyzes the entire project@docs— reference to external documentation
Structure of a good prompt:
Context: I am working on a Next.js task management app.
I already have functional authentication and configured data models.
Task: Create the detail page for an individual project.
Requirements:
- Route: /projects/[id]
- Display project name and description
- List tasks as a Kanban board (columns: To Do, In Progress, Done)
- Each task is a draggable card between columns
- Use @dnd-kit for drag and drop
- Styling with Tailwind, clean design
Relevant files: @schema.prisma @layout.tsx
Do not use additional libraries without asking.
Principle #4: When something does not work, give context to the error
Do not just say "it does not work". Do this:
"I get this error when trying to access /projects/1: [paste full error]. I checked and project with id 1 exists in the database. I think the problem is server component vs client component. Can you investigate?"
If it is a visual problem, take a screenshot and paste it directly into Cursor's chat (yes, it understands images).
Principle #5: Configure Cursor Rules
Create a .cursorrules file in the project root:
You are a senior developer specialized in Next.js 14+ with App Router.
Rules:
- Use strict TypeScript, no any
- Server components by default, client only when necessary
- Tailwind for styling, no separate CSS
- Naming convention: camelCase for variables, PascalCase for components
- Error handling with try/catch in all async operations
- Comments in Romanian
- Commit messages in English, conventional commits format
Stack: Next.js 14, TypeScript, Tailwind CSS, Prisma, SQLite, NextAuth.js
These rules are automatically included in every prompt, ensuring consistency across the entire project.
Principle #6: Split your working sessions
AI context degrades as the conversation grows. After every 15-20 messages (or when you radically change functionality), open a new chat (Cmd/Ctrl + T). Cursor keeps access to the entire project, but the conversation is fresh.
Hour 12–18: Iteration, testing, polishing
Vibe coding development cycle
This is the natural rhythm:
Prompt → Generation → Testing → Feedback → Adjustment → Commit → Repeat
A few tips for this phase:
Test in browser after each major change. Do not let AI generate 5 features without checking any of them. If it does not work, rollback is painful.
Use checkpoints. Cursor has a "Restore checkpoint" button next to each chat message. If AI broke something, you can return to the previous state with one click.
Refactor on the go. Periodically ask AI:
"Analyze current code from @codebase. Identify duplicates, inconsistencies, or patterns that should be refactored. Do not make changes, just list them."
Then address them one by one.
Do not ignore warnings. If AI generates code that "works but has warnings", fix the warnings now. They become bugs later.
Hour 18–24: Deploy with GitHub and CI/CD
Why GitHub + CI/CD?
You have local code, it works on your machine. Now it needs to get online, accessible to everyone. And you do not want to do this manually every time. You want a pipeline: push to GitHub → automatic testing → automatic deploy.
Step 1: Structure the repo on GitHub
If you have not done so already, connect the project to GitHub:
# If you have not created the repo yet
gh repo create my-app --public --source=. --push
# Make sure you have a good .gitignore
# (Next.js creates it automatically, but check)
Create two main branches:
main— production code, always stabledevelop— development code
git checkout -b develop
git push -u origin develop
Workflow: you work on develop (or feature branches), make PRs to main, on merge it deploys automatically.
Step 2: Configure deploy on Vercel
Vercel is the simplest option for Next.js (but also works with React, Svelte, etc.):
- Go to vercel.com and create an account with GitHub.
- Click "Import Project" and select your repo.
- Vercel automatically detects the framework and configures the build.
- Click "Deploy". In 60 seconds, your app is live on the internet.
From now on, every push to main deploys automatically to production. Every PR gets a preview deployment with unique URL — perfect for testing before merge.
Step 3: Add GitHub Actions for CI
Even with Vercel doing automatic deploy, you want a CI layer that checks code before deploy. Create the .github/workflows/ci.yml file:
name: CI Pipeline
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
quality-check:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run linter
run: npm run lint
- name: Type check
run: npx tsc --noEmit
- name: Build
run: npm run build
What this workflow does:
- On every push to
mainordevelop, and on every Pull Request:- Installs dependencies
- Runs linter (checks code style)
- Checks TypeScript types
- Attempts a full build
If any of these steps fail, the PR is marked with ❌ and does not deploy.
Step 4: The complete workflow
Here is how the workflow looks from commit to production:
You write code in Cursor
↓
git add . && git commit -m "feat: add task board"
↓
git push origin develop
↓
GitHub Actions runs CI (lint, types, build)
↓
Create Pull Request: develop → main
↓
Vercel creates Preview Deployment (unique URL for testing)
↓
You check preview, merge PR
↓
Vercel deploys automatically to production
↓
App is live! 🚀
Bonus: Environment variables
If your app uses API keys, database credentials, or other secrets:
- Local:
.env.localfile (added to.gitignore, not uploaded to GitHub) - Vercel: Settings → Environment Variables → add each variable
- GitHub Actions: Settings → Secrets and variables → Actions → add necessary secrets
Important: Never put API keys or passwords directly in code. Always use environment variables.
Recap: 24-hour timeline
| Interval | Activity | Output | |----------|-----------|--------| | Hour 0–1 | Install Cursor, Pro subscription, familiarization | Configured IDE, active account | | Hour 1–3 | Choose tech stack, initialize project, GitHub repo | Functional local project, connected repo | | Hour 3–12 | Development with strategic prompts (data models → authentication → UI → logic) | Main features implemented | | Hour 12–18 | Iteration, debugging, polishing, refactoring | Stable and tested local app | | Hour 18–24 | Configure CI/CD, deploy Vercel, production testing | Live app on internet with automatic deploy |
Final lessons
Vibe coding does not mean bad code. It means intelligently generated code, guided by a developer who knows what they want. AI writes, you think, review and decide.
Small prompts beat large prompts. A 3-line prompt that asks for a clear feature produces better code than a 30-line prompt asking for a complete app.
Commit often, test often. Git is your safety net. Every working feature = one commit. Do not accumulate 4 hours of work without committing.
Do not get attached to code. If AI generated something that does not work after 2-3 fix attempts, rollback and rephrase the prompt. It is faster than fixing infinitely.
Simple stack wins. A monolith on Next.js with Supabase or SQLite beats a microservices architecture any day of the week — at least for an MVP. You can complicate later when you have real users and real scaling issues.
AI is your assistant, not your boss. Review generated code. Ask why it made certain choices. Learn from what it generates. The best vibe coder is not the one who blindly accepts, but the one who guides intelligently.
This article is part of the technical publication series on the TEN INVENT blog. If you have an app idea and want to turn it into reality, let us talk.