luismori.

Vibe Coding Practice

Vibe Coding Lovable Claude Code Cloudflare AI

How to Create Your Vibe Coding App

A practical guide to building and shipping a full-stack app using Lovable for UI, Claude Code for logic, and Cloudflare for deployment.

5 min read

The barrier to shipping software has never been lower. With the right combination of AI-powered tools and modern infrastructure, you can go from idea to production in a single weekend. This is what I call vibe coding — you describe the vibe, the tools handle the rest.

Here’s the stack: Lovable for generating a beautiful UI, Claude Code for writing the backend logic and gluing everything together, and Cloudflare for deploying it to the edge with zero config headaches.

Why This Stack?

Each tool excels at a different layer of the problem:

  • Lovable turns natural-language prompts into polished React components with Tailwind CSS and shadcn/ui. You focus on what it should look like and how it should feel.
  • Claude Code is your pair-programmer in the terminal. It reads your codebase, writes functions, fixes bugs, and refactors — all through conversation.
  • Cloudflare Pages + Workers give you global deployment, serverless functions, KV storage, and D1 databases — all on a generous free tier.

Together, they cover the full loop: design, implement, deploy.

Step 1: Scaffold the UI with Lovable

Start a new project in Lovable and describe what you want to build. Be specific about layout, interactions, and style.

For example: “A habit tracker app with a dark theme, a sidebar listing habits, and a main area showing a weekly grid. Each cell is toggleable.”

Lovable generates a working React project with routing, components, and styling. Export the repo to GitHub and clone it locally.

At this point you have a good-looking frontend with placeholder logic. That’s exactly what you need.

Step 2: Add Logic with Claude Code

Open the cloned project in your terminal and start Claude Code. Let it read the codebase first — it will understand the component tree, the data flow, and where the gaps are.

Now you can start prompting:

  • “Add a Cloudflare D1 database schema for habits and daily completions.”
  • “Create a Worker API with endpoints to list habits, toggle a day, and get weekly stats.”
  • “Connect the frontend to the API using fetch with proper error handling.”

Claude Code writes the implementation, creates the files, and even runs the linter. You review, tweak, and move on.

The key insight: Lovable gives you the shape, Claude Code fills in the substance.

Step 3: Deploy to Cloudflare

Cloudflare makes deployment almost trivial:

  1. Connect your GitHub repo to Cloudflare Pages. Every push triggers a build.
  2. Add a Worker for your API. Use wrangler to develop locally and deploy.
  3. Provision a D1 database with wrangler d1 create and run your migrations.
  4. Bind the database to your Worker in wrangler.toml.

Your app is now live on a .pages.dev domain with automatic HTTPS, global CDN, and edge-computed API responses.

Tips for Effective Vibe Coding

Iterate in small loops. Don’t try to describe the entire app at once. Build one feature end-to-end, then move to the next. Each loop should be: prompt, review, test, commit.

Use Lovable for UI-heavy changes. Whenever you need a new page layout or a complex component, go back to Lovable. It’s faster than writing JSX by hand when the design is still evolving.

Use Claude Code for everything else. API routes, database queries, auth logic, data transformations, testing — this is where Claude Code shines. It has full context of your project and can make changes across multiple files at once.

Keep Cloudflare config simple. Start with Pages for the frontend, a single Worker for the API, and D1 for the database. You can add KV, R2, or Queues later when you actually need them.

Commit often. AI tools can sometimes take you in a wrong direction. Frequent commits let you roll back to a known good state without losing progress.

What You Can Build This Way

This stack isn’t limited to toy projects. Here are some real examples:

  • A personal finance dashboard that pulls data from Plaid and visualizes spending trends
  • A team standup bot with a web UI, Slack integration, and historical reports
  • A link shortener with analytics, custom domains, and QR code generation
  • A content CMS for your blog with a markdown editor and image uploads to R2

The pattern is always the same: Lovable for the interface, Claude Code for the logic, Cloudflare for the infra.

The Mindset Shift

Vibe coding isn’t about writing less code. It’s about spending your time on decisions instead of syntax. You’re the architect — you decide what to build, how it should work, and what trade-offs to make. The tools handle the translation from intent to implementation.

The developers who ship the fastest aren’t necessarily the ones who type the fastest. They’re the ones who communicate their intent most clearly — to humans and to AI alike.

Start with a vibe. Ship the app.