APIs, Deployment, and What Vibe Coding Can't Do
Explore how to connect your app to external APIs like Stripe and deploy it with Vercel for a live URL. Understand serverless functions, environment variables, and webhook integrations. Learn practical steps to launch a working product while recognizing the strengths and limitations of vibe coding in real-world applications.
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. ...