Day 10 of 28 · Vibe Coding Challenge
Working with APIs
⏱ 7 min
📊 Beginner
Until now, everything you've built lives in its own little world. Today your apps learn to talk to the outside — pulling real data from real services. Weather, news, stock prices, AI — all accessible through APIs.
What is an API?
An API (Application Programming Interface) is how software talks to other software. Think of it as a waiter at a restaurant:
You (your app) → tell the waiter (API) what you want → the waiter goes to the kitchen (server) → brings back your food (data).
You don't need to know how the kitchen works. You just need to know how to order.
Every modern service has an API: weather services, payment processors, social media platforms, AI models, databases, maps, and thousands more.
Knowledge Check
What is an API?
A
A programming language for building apps
C
A way for software to talk to other software — like a waiter between your app and a service
D
A design framework for websites
APIs are the connectors of the digital world. Your app sends a request ("What's the weather in London?"), and the API returns data ("15°C, partly cloudy"). You don't need to build a weather system — you just use someone else's through their API.
Your first API call
Let's build something that pulls real data. A weather dashboard is the classic first API project.
Build a weather dashboard that shows current weather for any city. Use the Open-Meteo API (it's free, no API key needed). Show temperature, humidity, wind speed, and a weather icon. Include a search bar where users can type a city name. Clean, modern design with a gradient background that changes based on weather — blue for clear, gray for cloudy, dark for night.
Building your weather dashboard...
Done ✓
🔍 **Search bar** — Type any city name, press Enter
🌡️ **Temperature** — Large display in °C with "feels like" below
💧 **Humidity** — Percentage with icon
💨 **Wind speed** — km/h with direction
🌤️ **Weather icon** — Dynamic icon matching current conditions
🌈 **Dynamic background** — Gradient shifts based on weather type
Using Open-Meteo API (free, no key needed). Try searching for a city!
Add a 5-day forecast section below the current weather. Show each day as a card with the day name, high/low temperature, and weather icon.
5-day forecast added ✓
📅 Five cards showing:
- Day name (Mon, Tue, Wed...)
- Weather icon
- High temperature (bold)
- Low temperature (lighter)
Cards are horizontally scrollable on mobile. Pulls forecast data from the same API.
↻ Replay conversation
A live weather dashboard pulling real data — built from one prompt.
Knowledge Check
Why did we use the Open-Meteo API specifically?
A
It's free and doesn't require an API key — no sign-up needed to start using it
B
It works faster than other APIs
C
It's the most accurate weather API
D
It's the only weather API that exists
When you're learning, APIs with no authentication barriers are ideal. Open-Meteo lets you start making requests immediately without signing up, creating accounts, or managing API keys. Once you're comfortable with APIs, you can use any service.
APIs that are great for vibe coding
Here are free APIs you can use in your projects right away (no API key needed):
Open-Meteo — Weather data for any location worldwide
JSONPlaceholder — Fake user data, posts, comments, and todos (perfect for prototyping)
REST Countries — Data about every country (population, languages, currencies, flags)
PokeAPI — Pokémon data (fun for practice projects)
Open Library — Book data, cover images, and search
And with an API key (free tier available):
OpenAI / Anthropic — AI chat and text generation
Unsplash — High-quality stock photos
News API — Headlines from news sources worldwide
Stripe — Payments (we'll cover this on Day 23)
How to tell AI to use an API
Here's the key skill: you don't need to understand the API documentation yourself. You just tell the AI which API to use and what data you want.
I want to build a country info app. Use the REST Countries API. When a user searches for a country, show: flag, population, capital, languages spoken, and currency. Make it look like a card with the flag as a banner image at the top.
Country info app built ✓
🔍 Search bar with autocomplete as you type
🏳️ Country card showing:
- Flag as banner image
- Country name and region
- 📍 Capital city
- 👥 Population (formatted with commas)
- 🗣️ Languages spoken
- 💰 Currency name and symbol
Using REST Countries API — no key needed. Try searching "Japan" or "Brazil"!
↻ Replay conversation
Knowledge Check
Do you need to read API documentation to use an API in your vibe-coded project?
A
No — you can tell the AI which API to use and what data you want, and it handles the technical details
B
Yes — you must read and understand all the API docs first
C
Documentation doesn't exist for most APIs
AI models have been trained on API documentation. When you say "Use the REST Countries API and show me the population and capital," the AI knows the correct API endpoints, parameters, and response format. You describe the data you want, the AI handles the technical integration.
Handling API errors
APIs sometimes fail — the service is down, the user's internet drops, or the request is wrong. Good apps handle these gracefully.
Add error handling to the weather dashboard. If the API fails, show a friendly error message instead of a blank screen. If the city isn't found, show "City not found — try a different name." Add a loading spinner while waiting for data.
Error handling added ✓
⏳ Loading spinner appears while fetching data
❌ API error → "Unable to fetch weather data. Please try again."
🔍 City not found → "City not found — try a different name"
🔄 Retry button appears on error
No more blank screens. Every state is handled.
↻ Replay conversation
Final Check
Why is error handling important for API-powered apps?
A
It makes the code more complex, which is always good
C
APIs can fail for many reasons — without error handling, users see blank screens or confusing errors
D
APIs never fail, so it's not actually important
APIs are external services you don't control. They can be slow, down, or return unexpected data. Error handling ensures your users always see something meaningful — a friendly message, a retry button, or cached data — instead of a broken screen.
🔌
Day 10 Complete
"APIs let your app talk to the world. You don't build everything — you connect to it."
Tomorrow — Day 11
Building Full-Stack Apps
Tomorrow you combine frontend and backend — building apps that don't just look good, but actually process and store data.