PTENES
Skip to content
🔵 Level 2

Creating Tools with Lovable and Bolt.new

Build MVPs, landing pages, and functional applications using only natural language.

~120 minutes • Updated in April 2026

💜 Lovable — The Platform for Non-Programmers

O Lovable (formerly GPT Engineer) is the most recommended platform for anyone who has never written a line of code. It combines natural language with visual design tools to generate complete applications—code + interface—in minutes.

🏆 Why Lovable Stands Out

  • ✅ Visual interface — see the result in real time as you describe it
  • ✅ Code + UI — generates both the frontend and the logic
  • ✅ Supabase Integration — database and authentication ready to use
  • ✅ One-click deploy — publish to the web instantly
  • ✅ Ideal for MVPs — functional prototypes in hours, not weeks
  • ✅ Visual editing — adjust colors, layout, and components without code

How Lovable Works

  1. You describe what you want to build in natural language
  2. AI generates a first version with an interface and code
  3. You see the result in real time in the preview
  4. Refine via chat: "change the button color to blue", "add an email field"
  5. When you're satisfied, publish with 1 click

⚡ Bolt.new — Open source and full control

O Bolt.new, created by StackBlitz, is a vibe coding platform with an open-source engine. Unlike Lovable, Bolt offers more transparency into the generated code and supports both cloud-based and local AI models.

⚙️ What sets Bolt.new apart

  • ✅ Open-source engine — engine code available on GitHub
  • ✅ Local and cloud models — use Claude, GPT-4, or local models
  • ✅ Transparent code — view and edit every generated file
  • ✅ WebContainers — runs Node.js directly in the browser
  • ✅ Popular among technical creators — anyone who wants to understand and control the result
  • ✅ Support for multiple frameworks — React, Vue, Svelte, etc.

📊 Comparison: Lovable vs Bolt.new

Feature Lovable Bolt.new
Required technical level None Basic (helps you understand code)
Visual editing Yes, integrated Limited (code-focused)
Database Supabase integrated Manual configuration
Open source No Yes (engine)
AI Models Owners (Claude) Multiple (cloud + local)
Deploy 1 click (included) Netlify/Vercel (manual)
Price Limited free tier / $20+/month Limited free tier / $20+/month
Best for Non-programmers, rapid MVPs Technical creators, custom projects

🛠️ Step by step: Content scheduler with Lovable

We'll build a simple content scheduling app using Lovable. The app will have a visual calendar, fields for title/description/platform, and a list of scheduled posts.

📝 Step 1: Create the Project

Access lovable.dev, sign in and click "New Project." In the prompt field, describe your app:

"Create a social media content scheduling app. I need: a visual monthly calendar, a form for creating posts (title, description, platform: YouTube/Instagram/TikTok, date/time), a list of scheduled posts with status, and a platform filter. Modern design, dark colors."

📝 Step 2: Review the first version

Lovable will generate a first version in 30-60 seconds. Review the preview and identify any adjustments. Don’t worry about getting everything right the first time — iteration is part of the process.

📝 Step 3: Iterate based on feedback

Use the chat to refine it: "Add a hashtag field", "The calendar should show posts as colored dots by platform", "Add a button to duplicate a post to another platform".

📝 Step 4: Connect the database

To make the data persist, connect Supabase: "Connect this app to a Supabase database to save the posts. I need email authentication so that only I can access my data."

📝 Step 5: Publish

Click "Deploy" to publish. You’ll receive a public link (lovable.app/seu-projeto) that you can access from any device. For a custom domain, configure it in the deploy options.

🛠️ Step by step: Landing page with Bolt.new

Now let’s create a professional landing page using Bolt.new. Landing pages are perfect for promoting your courses, products, or services.

📝 Step 1: Go to Bolt.new

Access bolt.new and log in. In the initial prompt, describe your landing page:

"Create a modern landing page for an AI content creation course. I need: a hero section with a compelling title and CTA, a benefits section with icons, a course modules grid, student testimonials, a pricing section with 3 plans, FAQ, and footer. Use React + Tailwind. Colors: blue-to-purple gradient."

📝 Step 2: Explore the code

Unlike Lovable, Bolt shows you all the generated files. Explore the structure: React components, Tailwind styles, and the logic. Even if you don’t understand everything, get familiar with how it’s organized.

📝 Step 3: Customize via chat

"Replace the placeholder text with real content about my AI video editing course. The basic plan costs R$97, the professional plan R$197, and the VIP plan R$397." The AI updates the code and preview in real time.

📝 Step 4: Deploy

Export the project and deploy it to Netlify or Vercel (both are free for simple projects). Bolt makes exporting easier with platform-specific instructions.

💡 Tips for Effective Prompts in Vibe Coding

🎯 Principles of Good Prompts

  • 1. Be specific: "I want a 200px-wide blue button" is better than "I want a pretty button"
  • 2. Describe the behavior: "When the button is clicked, a modal with a contact form should open"
  • 3. Provide context: "This app is for content creators who need to schedule posts across 3 platforms"
  • 4. Iterate in parts: Don't ask for everything at once. Start with the basic structure and add features incrementally
  • 5. Use references: "I want an interface similar to Notion" or "The layout should feel like Trello"
  • 6. Specify technologies: "Use React + Tailwind + shadcn/ui for the interface"

🏗️ "Functional Prototype" vs. "Production-Ready"

A crucial distinction in vibe coding: what you build in minutes is a working prototype, not necessarily a finished product for thousands of users. Understanding this difference helps avoid frustration.

Aspect Functional prototype Production-ready
Does it work? Yes, for the main scenario Yes, for all scenarios
Safety Basic or none Robust, tested
Scalability 1–10 users Thousands of users
Error handling Minimum Complete
Creation time Hours Weeks/months
Ideal for Personal use, idea validation Commercial product, SaaS

📌 Practical Tip

For content creators, functional prototypes are enough in most cases. You’re building tools for your own use (1–5 users), not to sell as SaaS. Don’t worry about having “perfect” code — if it works for you, it’s ready.

✅ Lesson checklist

  • ☐ Create an account on Lovable and explore the interface
  • ☐ Create an account on Bolt.new and explore the interface
  • ☐ Build the content scheduler in Lovable
  • ☐ Build the landing page in Bolt.new
  • ☐ Practice chat-based iteration on both platforms
  • ☐ Publish at least one project on the web
  • ☐ Identify a tool you need and plan how to build it
← Previous lesson Next lesson →