Insights From Vibe-Coding A Family App With Lovable
- Harshal
- Aug 17
- 5 min read
How We Built An App Using AI To Chose Our Baby Name
I recently used an AI prototyping tool called Lovable to build an app. It let me build a brand new app in a few hours without any hired help or coding.
I’m not a full-time developer, but as a Product Manager, Lovable caught my attention with its promise of a 10x faster prototype than traditional software dev time.
I share my experience and my beginner's learnings from it.
Who this is for: Beginners curious about AI-assisted app building, PMs exploring rapid prototyping, and anyone with a side-project idea but limited coding skills.
I spent 1 hour and 15 minutes writing this. You need 4 minutes to read this.
Related:
TL;DR: Learnings For Lovable
Here are my key takeaways. I share the detailed notes in later sections.
Daily credits habit: Lovable gives you 5 free credits a day. Return daily to complete a few tasks, and jot down prompts for tasks you can’t finish so you can continue the next day.
Component library: Many YouTube creators recommend creating a component library and remixing it for new projects. This works well for repeat use, but for your very first project, it may feel like extra work you won’t value yet—and that’s okay.
Connect to a database early: Multiple videos suggested linking to a database like Supabase in your second prompt, right after creating your prototype. In my tests, connecting to Supabase early saved time and avoided rework. In another project where I connected later, it was less efficient.
Authentication hinders testing. If your app requires login for all features, testing inside Lovable’s iframe will be difficult. Add a developer bypass mode early in development.
Supabase’s AI assistant. Use the AI assistant as it can help with row-level security and troubleshooting database issues.
Craft your prompts: Leverage other AI tools before prompting Lovable. Tools like Perplexity and ChatGPT can help refine prompts, find example projects, or identify correct technical terms. This reduces costs, improves accuracy, and prevents errors.
Provide visual examples: Search online for screenshots or mock up visuals in ChatGPT to show Lovable what you want. For example, if you need a dashboard, find relevant examples or generate a mockup first.
What Problem Did I Solve?
My wife and I spent weeks discussing names for our baby girl, due in 2025. Reviewing our spreadsheet of potential names became tedious. Even when we printed it as a checklist or researched each name, deciding which ones we liked — and which we didn’t — was slow and repetitive.
The challenge was bigger as we had 90 names on the list. How could we compare them effectively? We needed a clear relative ranking — or stack ranking — to see not only which names we liked, but which ones we liked the most. Without that, it was hard to feel confident in our final choice.
With Lovable's app, my wife and I shortlisted down to our final name quickly, and had a lot of fun playing with the app.
Why Build? Why Lovable?
At the same time, colleagues at my startup were using Lovable to build a web UI prototype, rapidly accelerating what we could show customers.
A former colleague, who had also tried Replit and Bolt.new, praised Lovable the most. I had tried Replit a few months earlier through Leni’s community, but didn’t find it intuitive then. He mentioned that Lovable had become a daily habit for him because it allowed five 5 changes each day. As a Product Manager, I wanted to experience such a strong habit loop.
My wife and I enjoy trying new AI products and tools to expand our understanding of the ecosystem. This project gave us the perfect chance to build something ourselves, especially with Lovable’s free tier.
Tools Used
Built AI webapp on Lovable.dev
Connected it to a GitHub repository for version control.
Used Supabase for authentication, database storage, and edge functions.
Integrated Google Cloud Platform (GCP) Text-to-Speech (TTS) APIs.
Integrated OpenAI Text-to-Speech (TTS) APIs.
Functionality and Screens
I started by creating authentication with Supabase so the app would work securely. I did this early because I was on the free plan, and I worried anyone could remix my project, gaining access to all our shortlisted names and personal details. Putting everything behind a login screen felt necessary. Later, I discovered that connecting a Lovable project to Supabase prevents others from remixing it — a useful workaround.
After adding the login screen, development became harder. I couldn’t see any page without logging in, and logging in repeatedly inside Lovable’s development portal iframe was tedious. To solve this, I added a “developer bypass login” button.
Our main screen used a Tinder-style interface to choose between two options, A or B. Based on the choice, the app updated each option’s cumulative score. This “head-to-head” format appears in products like Facemash (Facebook’s predecessor by Mark Zuckerberg), StatScore, FootyStats, GoodGuide, and Consumer Reports.
I also built a “Skip this pair” button for when I liked both names equally, and an “Undo last vote” button for accidental clicks. Implementing “Undo” was challenging in Lovable, as it had to restore the previous state and reload the correct name pair.
I then added a pronunciation feature so users could hear names spoken in accents from the United Kingdom, United States, India, France, and Spain.
Next, I created a dedicated accent explorer, letting users hear any word in 10 different accents, using both OpenAI and Google Cloud TTS integrations.
Since I wanted an Indian-sounding name, I focused on Indian accents. But I also considered that our child might live in the UK, US, or other places where Spanish or French are common, so I tested names in those accents too. OpenAI’s TTS interface offered “personalities” instead of specific countries or languages, providing a different exploration approach.
We also noticed that hearing a name sometimes triggered positive or negative associations. This could be due to bullying potential, meaning in another language, or resemblance to someone we knew. To capture these reactions, I built an association tracker where we could log and review each connection.
The final screen displayed all names ranked by ELO score in descending order. Lovable chose ELO scoring and implemented a Supabase Edge Function to update rankings after every vote.
Growing Confidence In AI
This project solved a real-life problem for my family. I could use this AI assistant to build an app that helped me choose a baby name.
This project showed me the power of vibe coding and the speed of today’s innovation. Tasks that once required months of work or deep expertise can now be done in hours. Experiences like this make me even more confident about AI’s potential to create real-world benefits.
Related:
