How I Built an AI App in 2 Minutes

A practical introduction to vibe coding for people who want to build without a tech background

A couple of days ago, I built a simple AI app in under two minutes.

It lets you paste in plaintext and instantly download it as a Markdown file. Nothing fancy. Just clean, functional, and fast.

I used a tool called Lovable. I didn’t write any code. I didn’t touch GitHub. I didn’t create the backend myself.

And still—it worked exactly how I wanted.

That’s when I realized something: this wasn’t traditional coding. It wasn’t no-code either. It was something else. A new kind of building that focuses less on technical perfection and more on user flow, clarity, and tone.

People are calling vibe coding.

This is a beginner’s look at what that means, why it matters, and how you can start building small, useful tools with AI—even if you don’t have a technical background.

What Even Is Vibe Coding?

When I built that Markdown app, I didn’t write any code.

Markdown App

I mapped out the logic, told the tool what I wanted it to do, and hit publish. It worked-fast.

That's vibe coding.

It's not about writing software from scratch. And it's not just prompting ChatGPT and hoping for the best. It's the middle layer-where you design how a tool behaves and what the user experiences.

You're still using logic:

• If this happens, then do that

• Show this message when someone clicks

• Save this response in the background

• Connect this API to pull in external data

• Deploy these components to a hosting service

But you're also thinking about clarity and flow:

• Is this easy to follow?

• Does the response sound helpful?

• Will the user know what to do next?

• Does the system architecture make sense?

Vibe coding is building tools that make sense to real people, ranging from simple utilities to complex applications with multiple components. You can create anything from basic automations to full-stack applications with databases, authentication, and cloud deployment.

You don't need to be a traditional developer, though some technical understanding helps as projects scale. You need a goal, AI-friendly tools, and a way of thinking in logical steps. The AI handles much of the implementation while you focus on architecture, user experience, and business logic.

Curious about the app? Check it out here.

What Vibe Coding Isn’t

Vibe coding can be used for full-stack development, though it offers a different approach than traditional coding.

It's not just writing prompts into ChatGPT. And it's more than drag-and-drop tools like Notion or Canva.

It sits in between traditional development and no-code tools, offering a conversational interface to technical implementation.

If you've ever:

• Created a smart form that responds to user input

• Designed a flow in Airtable, Typeform, or Notion

• Written an onboarding email that explains what happens next

You've already done some version of this thinking.

Vibe coding extends these concepts, giving you more control. More logic. More ability to shape what happens-and how it feels-without needing to become a traditional developer.

With vibe coding, you can build complete applications by describing your intentions to AI tools that generate the necessary code across frontend, backend, and even infrastructure layers.

You're likely closer than you think to leveraging this approach for your projects.

My Tools, Projects & Learning Curve

The first time I built something with vibe coding, it wasn’t planned.

I wanted a simple way to drop in some text, preview it in Markdown, and download it for use with CustomGPT. GPT understands Markdown really well, so this gave me a fast, clean workflow. I opened Lovable, set up a basic textbox flow, and let users preview and download the result. That was it.

It was honestly one of the easiest things I’ve ever built and I did it while my espresso was brewing.

Since then, I’ve created a few more tools—each one small, intentional, and designed to solve a real need:

• A link-in-bio page that collects emails and automatically sends PDF resources as freebies. It’s a lightweight lead magnet system and even website replacement.

• My website, which is simple, clear, and intentionally not overbuilt

• A free prompt library, built as a community resource and email opt-in. People get a clean, categorized list of prompts that are easy to copy.

Here’s what they have in common:

• I didn’t build from scratch

• I didn’t use traditional code editors (though I did use Cursor, which blends coding with AI support)

• I didn’t ask a developer for help

Instead, I used tools like:

• Lovable for building logic and user flows

• Cursor for shaping AI logic and editing inline

• Make.com and n8n to automate tasks behind the scenes

• Supabase, which connects directly to Lovable for storing and retrieving data

What surprised me most was the thoughtfulness. Sometimes the AI will add things you didn’t ask for, like a subtle button state change, or a layout tweak that improves clarity.

Other times, entire pages will just disappear with no warning. So… not perfect.

Also? The designs are a bit lackluster. You’ll get decent layouts, but if you want a high-end, cutting-edge design, you’ll still want a real designer involved.

How to Start Vibe Coding (Even If You’re New)

You don’t need to learn a whole new programming language to start vibe coding.
You just need the right entry point—and a clear use case.

Here’s how I’d recommend getting started based on your experience:

Front-End Tools (User Interface & Experience)

These help you design the experience users will interact with. Pick one and go, they all do similar things:

• Lovable – beginner-friendly builder with natural language prompts and logic flows. Great for quick MVPs.

  

• Bolt.new – browser-based full-stack builder with more dev-like flexibility.

  

• Replit – best if you like full code control with built-in AI assistance.

  

• Cursor – a code editor powered by GPT that acts like a smart, context-aware assistant.

  

Back-End Tools (Data & Automations)

These power what happens behind the scenes:

• Supabase – stores user data and connects easily with Lovable.

• Direct APIs – like OpenAI for AI responses, or other services you want to plug into.

• Make.com – visually build automations to send emails, upload files, or move data.

• n8n – similar to Make, but more developer-friendly with advanced customization.

Try something like:

• Lovable for the interface

• Supabase for your data (directly integrated with Lovable)

• Make to automate what happens next

Start small. Add complexity when you’re ready.

How I Built a Custom Link-in-Bio Site (to Replace a $30/Month Tool)

A friend of mine was paying $30/month for a link-in-bio site—and about to start selling digital products.

The problem?

Her platform not only charged a subscription fee but also took a cut of every sale on top of Stripe’s transaction fees.

So we built her a custom version using Lovable.

It now hosts her links, collects emails, delivers freebies, and will eventually handle Stripe payments—all without extra platform fees.

Here’s how I did it:

Step 1: Write a prompt (with help from GPT, Claude, or Perplexity)

I asked Claude to help me write a prompt specifically for Lovable. I told it:

• I wanted to build a link-in-bio page

• It should include links to her website and socials

• It should collect emails and deliver lead magnets

• The backend should store email signups in Supabase and tag them for Substack

• I also attached a screenshot of her existing page

That gave me a clean, detailed prompt ready for Lovable.

Build a modern, visually engaging link-in-bio site for me, inspired by the attached screenshot. The site should be optimized for creators and entrepreneurs and must include:

Profile Section: My name, photo, and a short tagline about automating content, clients, and growth with AI.

Key Links:

My main website

A prominent newsletter signup form that collects emails (integrate with Supabase for storage and connect to my email system for automated welcome sequences)

Featured products or resources (with image, short description, and “Download” or “Learn More” buttons)

Freebies/Lead Magnets:

Showcase 2-3 lead magnets (PDFs, guides, playbooks, etc.)

When someone signs up, their email is added to Supabase and triggers an automated email sequence delivering the freebie

Each freebie should have a clear CTA and description

Work With Me:

Section to book a strategy call or chat (with image and button)

Social Links:

Icons for my social media profiles

Design:

Use a friendly, approachable color palette (like in the screenshot)

Clean, card-based layout

Responsive for mobile and desktop

Integrations:

Email collection and freebie delivery must use Supabase for backend storage

Connect email signups to my newsletter system for automated onboarding

Please generate the site structure, recommended copy, and technical integration notes for Supabase and my email system. Suggest any additional best practices for maximizing signups and engagement.

Step 2: Paste the prompt into Lovable and upload a screenshot

Inside Lovable, I pasted the prompt and uploaded the image of her current link-in-bio layout.

Lovable generated a working page layout in about 5 minutes.

It wasn’t perfect, but it gave me a great starting point—with a real UI, button actions, and connected logic blocks.

Step 3: Upload images and adjust the layout

I saved the individual images from her existing site and uploaded them to Lovable. I asked it to place them where they belonged.

Some things needed manual tweaking:

• Swapping in real URLs

• Moving a few image elements around

• Renaming buttons or sections

What still needed to be done:

• Backend setup: I connected Supabase to store emails and trigger automated PDF delivery for her lead magnets

• Email sync: I set up Make to pass those signups into her newsletter platform

• Security: We needed to secure the database and hide the API keys to protect email data

• Ecommerce prep: We plan to integrate Stripe next, so the site can handle direct digital product sales—without paying a platform fee

What You Need to Know About Security (Yes, Even as a Beginner)

When you're building with tools like Lovable, Supabase, or Make, it’s easy to forget that you’re the developer now.

That means you're also responsible for keeping things safe.

Here are a few basics that can save you headaches later:

1. Never expose API keys in the frontend

If you paste a key (like OpenAI or Stripe) directly into your project, anyone can view it in their browser. They could use it, abuse it, or run up your bill.

2. Set rate limits on anything public

If you create a form or webhook that’s open to the internet, someone could spam it. That could crash your app or flood your inbox.

3. Use Row-Level Security in your database

Supabase makes this easy—but it’s not turned on by default. Without it, anyone with the right URL could view or change your data.

4. Check the developer tools in your browser

Open your app, go to dev tools, and look at what’s being sent and exposed. It’ll show you if tokens, emails, or data are showing up where they shouldn’t.

5. Don’t trust frontend-only logic

Hiding a button doesn’t protect it. Always make sure sensitive actions are also locked down on the backend.

You don’t need to over-engineer everything.
But it should be solid enough that a curious person can’t break it—or find something they’re not supposed to.

The Human Layer: What Not to Automate

Just because you can automate something doesn’t mean you should.

When you’re vibe coding, you’re shaping how people interact with your tool. That comes with some responsibility—especially if your app handles personal data, sensitive topics, or decisions people might rely on.

Here’s what I try to keep in mind:

1. Always get consent

If you're collecting info, storing data, or using AI to respond—make that clear. People should never be confused about what's happening.

2. Avoid automating serious decisions

Don’t use AI to give advice on things like legal, medical, or emotional issues. If your tool touches those areas, add disclaimers or make sure a human reviews the output.

3. Say when it’s AI-generated

Be transparent. If a message, recommendation, or summary came from an AI model, say so. Most users won’t mind—they’ll just appreciate the clarity.

4. Don’t design for manipulation

Avoid dark patterns, fake urgency, or interfaces that trick people into taking actions they didn’t mean to.

If something feels a little off while you’re building, trust that instinct. It usually means something needs to be rethought.

Vibe coding isn’t just about making things work. It’s about making things feel right—for the people using them.

Final Thought: Share Your Vibe

If you’ve built something—even a tiny test—I’d love to see it.

It doesn’t need to be polished. It doesn’t even need to be public. But if you tried out any of the tools I mentioned, I want to hear how it went.

What worked? What didn’t? What would you do differently next time?

We need more people sharing the messy middle—not just the highlight reel.

So if you’ve been experimenting:

• Drop a comment and tell me what you made

• DM me if you want to talk through it or get feedback

• And if you want a walkthrough of how I built the backend for my link-in-bio tool, let me know. I’ll share that in a future post.

You don’t need to be technical to build something real.
You just need to start.

P.S. If you’re a woman learning how to build with AI and want to be around others figuring it out too, I’ve got a community for that. No pressure to be technical. Just curiosity, support, and space to experiment. Let me know if you want in or check it out here.