APIs, Deployment, and What Vibe Coding Can't Do
Explore how to connect your app to real-world services by integrating APIs such as Stripe for payments and deploying to Vercel for a public URL. Understand serverless functions, environment variables, and webhooks. Learn where vibe coding excels and its limitations, and when to involve professional engineers.
PawPals has a database, user accounts, and data that survives a refresh. A real person could sign up, book a walk, and see their booking the next day. But if you send someone the URL, they get Lovable’s preview page or a localhost address that only exists on your machine. And if you want to charge for bookings, or send a confirmation email, or show a map of the walker’s location, the app has no way to talk to the services that do those things.
This lesson teaches you how you can connect your application to the outside world. You will add an external API for payments, deploy the app to a permanent URL on Vercel, and then step back for an honest look at where vibe coding works, where it stops working, and what to do when you reach that line.
What is an API?
Your app already talks to Supabase. That connection follows a pattern: your code sends a request to an external service, the service does something, and sends a response back. That pattern is called an API (application programming interface), a set of rules that lets one piece of software talk to another. Stripe, Google Maps, SendGrid, Twilio: every service has one.
The pattern is always the same. Your app sends a request to an endpoint (a specific URL), includes the right credentials, and gets a structured response back.
How do you connect any API?
The same four steps work for every service:
Get an API key. Sign up for the service, find the API section, copy the key. Treat it like a password.
Store it in
.env. Never paste a key directly into a code file.Tell the AI what to do. Be specific: When the user ...