Understanding APIs: How Apps Talk to Each Other

API stands for Application Programming Interface. It’s how different pieces of software communicate.

Every time you check the weather, pay online, or scroll social media—APIs are making it happen.

The Waiter Analogy 🍽️

You’re sitting at a restaurant (frontend). You want food from the kitchen (backend).

You don’t walk into the kitchen yourself. Instead, you tell the waiter your order.

The waiter:

Takes your order to the kitchen
Kitchen prepares the food
Waiter brings back your meal

That waiter is the API.

How APIs Work (Step by Step)

1. Request

Your app asks for something:

“Hey weather API, what’s the temperature in Austin?“

2. Processing

The API’s server does its work:

“Let me check our database… Austin is 75°F.”

3. Response

The API sends back data:

“Here you go: {temperature: 75, unit: 'F', condition: 'sunny'}”

4. Display

Your app shows the info:

“Current temperature: 75°F ☀️”

Real-World API Examples

When You…	The API Involved
Check weather in any app	Weather API (OpenWeather, etc.)
Pay with credit card	Payment API (Stripe, PayPal)
Log in with Google	OAuth API (Google Identity)
See a map in an app	Maps API (Google Maps, Mapbox)
Send a text notification	SMS API (Twilio)
Post on social media	Social APIs (Twitter, Instagram)

The Language of APIs

APIs have their own vocabulary. Here’s what you need to know:

Endpoint

The address where you send requests.

Like a URL, but for machines:


https://api.weather.com/v1/current?city=austin

Request Methods

What you want to do:

Method	What It Does	Real-World Analogy
GET	Retrieve data	”Show me the menu”
POST	Create new data	”Place this order”
PUT	Update existing data	”Change my order”
DELETE	Remove data	”Cancel my order”

Response

What comes back:

Usually in JSON format (looks like this):


{
  "user": {
    "name": "Jane",
    "email": "jane@example.com",
    "plan": "premium"
  }
}

Status Codes

Did it work?

Code	Meaning	Translation
200	OK	”Here’s what you asked for!“
201	Created	”Done, I made it for you!“
400	Bad Request	”I don’t understand what you want”
401	Unauthorized	”Who are you? Show me ID”
404	Not Found	”That doesn’t exist”
500	Server Error	”Something broke on my end”

APIs in Vibe Coding

🦄

Build it yourself: Want to see an API in action? Check out Project 3: The Vibe Pokedex where we build a real-time data fetcher.

When you’re building with AI, you’ll encounter APIs in two ways:

1. Using External APIs

Your app needs data or features from other services.

Example prompt:

“Add a weather widget that shows the current temperature. Use the OpenWeather API.”

The AI will:

Write code to call the weather API
Parse the response
Display the temperature in your UI

2. Creating Your Own API

Your app’s backend exposes endpoints for your frontend.

Example prompt:

“Create an API endpoint that saves a new task to the database”

The AI will create:

A POST /api/tasks endpoint
Code to receive task data
Database logic to save it
Response to confirm success

API Authentication (ID Check)

Most APIs require you to prove who you are before they’ll talk to you.

API Keys

A long string of characters that identifies your app:


API_KEY=sk_live_abc123xyz789...

Important: Never put API keys in frontend code where users can see them!

Where to Store Keys

In environment variables (.env files)
In secure backend code
In your hosting platform’s secrets manager

Common API Issues (And How to Describe Them)

What You See	What to Tell the AI
”401 Unauthorized"	"The API is rejecting my key. Check the authentication setup."
"404 Not Found"	"The API endpoint doesn’t exist. Verify the URL is correct."
"500 Server Error"	"The API server is broken. Check if the service is down.”
Slow loading	”The API call is slow. Add loading states and error handling.”
Missing data	”The API response is missing fields. Check the data mapping.”

Try It: Your First API Call

Open your browser’s console (F12 → Console tab) and paste:


fetch('https://api.github.com/users/octocat')
  .then(response => response.json())
  .then(data => console.log(data))

You just made an API call! You’ll see GitHub’s response with user data.

Next Steps

→ Development Lifecycle — The stages of building software
→ Security Basics — Protecting your API keys and data