Vibe coding is a development approach where you describe what you want to an AI tool (like Cursor, Lovable, or Claude) in natural language, and the AI generates the code. You iterate by giving feedback and refining prompts rather than writing code line by line. It lets non-developers and sysadmins build working applications rapidly.

Can you build a real app with vibe coding in 24 hours?

Yes. AI coding tools can generate a functional web application with a database, authentication, and API in hours rather than weeks. The key is defining the problem clearly in the first hour, iterating through prompts in hours 1-8, then stopping AI generation and manually refining the code in hours 8-24. The result is a working MVP, not a production system.

What AI tools are best for vibe coding in 2026?

Lovable is the best starting point for web apps as it generates full-stack React applications from descriptions. Cursor adds AI assistance to VS Code for more control. Claude and ChatGPT work well for specific code generation and debugging. For sysadmins, the combination of Lovable for the frontend and AI-assisted Docker/deployment for the backend is the fastest path.

Is vibe coding relevant for sysadmins and DevOps engineers?

Very. Vibe coding lets sysadmins build internal tools, dashboards, and utilities without depending on a development team. More importantly, it teaches you the development workflow (git, package managers, build tools, deployment) from the consumption side, making you a more effective infrastructure engineer who understands what developers need.

Vibe Coding: Build a Working App in 24 Hours with AI Tools

I built a maths tutor app for my kids in an evening. Not a prototype. Not a mockup. A working application that they actually use.

No, I didn’t become a React expert overnight. I used AI tools to do the heavy lifting, then made it mine.

This isn’t about building a SaaS empire or making $10k MRR. It’s about solving problems for yourself, learning real skills in the process, and owning what you build.

DevOps Skills Demonstrated

Rapid prototyping with AI-assisted development tools
Full-stack application development (React, TypeScript)
Modern development workflows (Git, CI/CD)

Market Value: These skills translate directly to DevOps and Platform Engineering roles at £50-70k+

What You’ll Learn

What vibe coding actually is
Tools that work (Lovable, v0, Bolt)
The realistic 24-hour workflow
When to stop prompting and start coding
Getting your code into Git (you own it)

What Is Vibe Coding?

The Concept

Vibe coding is using AI tools to build applications through conversation rather than traditional coding. You describe what you want, the AI generates code, you refine through iteration.

It’s not:

No-code (you get real code you can modify)
Outsourcing (you’re driving the process)
Magic (you still need to understand what’s happening)

It is:

Rapid prototyping at extreme speed
Leveraging AI for boilerplate and scaffolding
Getting to “working” fast, then refining

Why It Matters for Sysadmins

You’re not trying to become a frontend developer. You’re trying to:

Build internal tools quickly
Solve specific problems
Prototype ideas
Learn modern development patterns

Vibe coding gets you there without years of React tutorials.

Lovable (Recommended Starting Point)

What it is: AI app builder that generates full-stack applications from prompts.

Why it works:

Free tier is genuinely usable
Generates clean, modern code (React + TypeScript)
Direct GitHub integration
Hosted preview while building

URL: lovable.dev

Alternatives

v0 by Vercel: Great for UI components, more design-focused, generates React/Tailwind.

Bolt.new: Full-stack like Lovable, different AI model, good for comparison.

Cursor/Continue: AI-assisted IDE, better for existing codebases, more developer-focused.

My Recommendation: Start with Lovable. It’s the fastest path from “idea” to “working app in GitHub.”

The 24-Hour Workflow

Hour 0-1: Define the Problem

Before touching any tool, write down:

What problem am I solving?
- “My kid needs maths practice”
- “I want to track home inventory”
- “We need a family calendar”
What’s the minimum viable version? Not every feature. The core thing that makes it useful.
Who’s using it? Just me? Family? Team?

Example: “A simple app where my 8-year-old can practice multiplication tables. Shows a problem, they type the answer, tells them if they’re right. Tracks progress over time.”

Hour 1-4: Initial Prompting

Open Lovable and start describing your app. Key prompting tips:

Be specific about features – Vague prompts get vague results
Describe the user – “For an 8-year-old” changes design decisions
Mention constraints – “Simple,” “minimal,” “focused”
Iterate in conversation – “Make the buttons bigger,” “Add a timer option”

Hour 4-8: Refinement Loop

You’ll go through cycles of:

Review – Does this work? Does it make sense?
Prompt – “Change X,” “Add Y,” “Remove Z”
Test – Click through, try edge cases
Repeat

Common refinements:

“The text is too small for a kid”
“Add a way to configure difficulty”
“Show the last 10 scores”
“Make it work offline”

Hour 8-12: Stop Prompting

There’s a point where prompting becomes less efficient than coding.

Signs to stop:

You’re fighting the AI
Small changes take many prompts
You understand the code structure now
You want specific behavior the AI can’t quite get

This is normal. The AI got you 80%. The last 20% is yours.

Hour 12-24: Make It Yours

Export to GitHub (Lovable does this natively)
Clone locally
Make direct changes
Continue development traditionally

We’ll cover this in detail in the next post.

Initial Prompt Example

Build a multiplication practice app for kids.

Features:
- Shows multiplication problems (configurable difficulty)
- User types answer
- Immediate feedback (correct/incorrect)
- Score tracking per session
- Simple, kid-friendly interface
- Progress saved between sessions

Design:
- Colorful but not distracting
- Large buttons for touch screens
- Celebration animation for correct answers

Real Example: Maths Tutor App

Here’s an actual session (condensed):

Initial prompt:

“Build a multiplication practice app for my 8-year-old. Simple interface, shows problems, accepts answers, tracks score. Kid-friendly colors, large touch targets.”

First iteration feedback:

“Good start. Make the numbers bigger. Add sound effects for correct/incorrect. Show a streak counter.”

Second iteration:

“Add difficulty levels – easy (1-5), medium (1-10), hard (1-12). Remember the selected difficulty.”

Third iteration:

“Add a parent dashboard that shows practice history – which problems they got wrong most often.”

Fourth iteration:

“The celebration animation is too long. Make it 1 second. Also add a ‘next problem’ button instead of auto-advancing.”

Total time: About 3 hours of active prompting.

Result: Working app, deployed preview, ready for GitHub export.

Connecting to GitHub

Why This Matters

The code in Lovable is yours. But it’s IN Lovable. You want it:

Version controlled
Locally accessible
Independent of the platform

Lovable GitHub Integration

In Lovable, click “Connect to GitHub”
Authorize the connection
Choose repository name
Click “Push to GitHub”

Your code is now in YOUR GitHub repository.

What You Get

A typical Lovable export includes:

my-maths-app/
├── src/
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   └── App.tsx
├── public/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Real, readable, modifiable code. React + TypeScript + Vite. Modern stack.

What You’ve Built (And Own)

After 24 hours:

Working application – Not a mockup
Modern tech stack – React, TypeScript, Vite
Your GitHub repository – Version controlled
Deployable – Could host it anywhere
Modifiable – Real code you can change

And you didn’t:

Spend months learning React
Pay for expensive tools
Build a SaaS empire
Promise anyone $10k MRR

You solved a problem. That’s it. That’s the win.

What This Won’t Do

Vibe coding limitations:

Complex backend logic – AI struggles with intricate business rules
Database design – You’ll need to understand data modeling
Security – AI-generated auth is often sketchy
Scale – Fine for personal use, think harder for production
Maintenance – You need to understand the code eventually

When to use traditional development:

High security requirements
Complex data relationships
Team collaboration from day one
Enterprise/production systems

The sweet spot: Personal tools, family apps, internal utilities, prototypes, learning projects. That’s where vibe coding shines.

How to Talk About This in Interviews

This isn’t just about building apps. It’s demonstrable skill:

On your resume:

“Rapid prototyping with AI-assisted development tools”
“Full-stack application development (React, TypeScript)”
“Modern development workflows (Git, CI/CD)”

In interviews:

“I use AI tools for rapid prototyping – I built a working application in 24 hours. But I also understand the code, can modify it, and deploy it to my own infrastructure. The AI is a tool, not a replacement for understanding.”

That’s a mature take that interviewers respect.

The Journey So Far

Step 1: Built app with AI tools (You are here)
Step 2: Set up local development environment
Step 3: Containerize with Docker
Step 4: Push to private registry
Step 5: Automate with CI/CD
Step 6: Deploy to your infrastructure

Practical Exercise

This week:

Sign up for Lovable (free tier)
Think of a simple problem you want to solve
Spend 2-3 hours prompting
Export to GitHub
You now have a working app you own

Don’t overthink it. Build something small. A timer. A todo list. A quiz for your kids.

The goal isn’t perfection. It’s completion.

Next in Series: Part 2: From Cloud IDE to Local Dev

Own your development environment and understand the code

The best way to learn is to build. AI tools let you build faster. But building is still the point.

ReadTheManualTech

ReadTheManual is run, written and curated by Eric Lonsdale.

Eric has over 20 years of professional experience in IT infrastructure, cloud architecture, and cybersecurity, but started with PCs long before that.

He built his first machine from parts bought off tables at the local college campus, hoping they worked. He learned on BBC Micros and Atari units in the early 90s, and has built almost every PC he’s used between 1995 and now.

From helpdesk to infrastructure architect, Eric has worked across enterprise datacentres, Azure environments, and security operations. He’s managed teams, trained engineers, and spent two decades solving the problems this site teaches you to solve.

ReadTheManual exists because Eric believes the best way to learn IT is to build things, break things, and actually read the manual. Every guide on this site runs on infrastructure he owns and maintains.

Enjoyed this guide?

New articles on Linux, homelab, cloud, and automation every 2 days. No spam, unsubscribe anytime.