App 1: A weather app that shows the current conditions and 5-day forecast for any city. App 2: A news aggregator that pulls headlines from multiple categories. Both built by describing them in plain English — AI writes all the API code.
What Is an API (and Why You Don't Need to Know)?
An API (Application Programming Interface) is a way for software to talk to software. When your weather app gets the current temperature, it's calling a weather API — sending a request and receiving data back.
Traditionally, using an API requires understanding HTTP requests, JSON parsing, authentication headers, and error handling. That's hours of documentation reading. With vibe coding, you describe what you want and AI writes all of that boilerplate. Your job is to get an API key and describe the output you want.
API keys: Most APIs require a free API key to track usage. We'll get two today: one from OpenWeatherMap (free, 1,000 calls/day) and one from NewsAPI (free, 100 calls/day).
Weather App
Get your free API key
Go to openweathermap.org/api → Sign up for free → Your API keys will be in your account dashboard. Copy the default key. Note: new keys take up to 2 hours to activate.
Build it with one prompt
Build a weather app as a single HTML file using the OpenWeatherMap API.
My API key is: YOUR_KEY_HERE
Features:
- Search bar: user types a city name and presses Enter or clicks Search
- Current weather card showing: temperature (Fahrenheit), feels-like temp,
weather description, humidity, wind speed, and a weather icon
- 5-day forecast row showing min/max temp and icon for each day
- Show a loading spinner while fetching data
- Show a friendly error message if the city isn't found
- Background gradient that changes based on weather (sunny = warm orange/yellow,
cloudy = gray-blue, rain = dark blue, etc.)
Design: clean and modern, large temperature display, mobile responsive.
Use the OpenWeatherMap Current Weather and 5-day Forecast endpoints.
No frameworks — pure HTML, CSS, JS.Replace YOUR_KEY_HERE with your actual API key. Run it and test with a few cities. The AI will generate the fetch calls, parse the JSON response, handle errors, and style the entire UI.
API key not working yet? New OpenWeatherMap keys can take up to 2 hours to activate. If you get a 401 error, try again later — or skip to the news app and come back.
Understand what AI generated
Open the generated file and look at the JavaScript. You'll see a fetch() call to the OpenWeatherMap URL with your API key appended. The response is JSON — a nested object containing temperature, conditions, and forecast data. AI wrote the code to extract exactly what you needed and display it. This would have taken a beginner 2–3 hours to write from scratch.
News Aggregator
Get your free NewsAPI key
Go to newsapi.org → Get API Key (free account, 100 requests/day). Copy your key.
Build a news aggregator as a single HTML file using the NewsAPI.
My API key is: YOUR_KEY_HERE
Features:
- Category tabs at the top: Technology, Business, Science, Health, Sports
- When a tab is clicked, fetch and display the top 12 headlines for that category
- Each article card shows: headline, source name, published time (e.g. "2 hours ago"),
description snippet, and a "Read More" link that opens in a new tab
- Skeleton loading animation (gray placeholder cards) while fetching
- A search bar to search for news by keyword
- Show the total number of results for a search
Design:
- Clean editorial look, like a mini news site
- 3-column grid on desktop, 1-column on mobile
- Article cards with subtle hover effects
Use the NewsAPI Top Headlines and Everything endpoints.
No frameworks. Pure HTML, CSS, JavaScript.Run this after replacing the API key. You'll have a functional, categorized news aggregator in under a minute.
What You Actually Need to Know vs. What AI Handles
Here's the honest breakdown of what happened today:
| You provided | AI generated |
|---|---|
| What the app should do | The API endpoint URLs and parameters |
| The API key | The fetch() calls with correct headers |
| How you want the data displayed | JSON parsing and data extraction |
| Verification that it works | Error handling, loading states, UI rendering |
That's the vibe coding contract. You handle the vision and verification. AI handles the implementation details.
Extend the apps
- Add a "Save to favorites" feature to the weather app (bookmark cities you check often)
- Add geolocation to the weather app: "Use my current location" button
- Combine both apps into one page: weather in the left column, relevant news in the right
Day 3 Complete
- Built a working weather app with 5-day forecast using OpenWeatherMap API
- Built a categorized news aggregator using NewsAPI
- Understand what you need to provide vs. what AI handles in API integrations
- Practiced debugging by describing problems in plain English
Want to go deeper on APIs?
Our bootcamp covers production API design, authentication, rate limiting, and database integration.
See Bootcamp Details — $1,490Ready for Day 4?
Tomorrow you go full-stack: database, backend API, and frontend — all from a single plain-English description.
Day 4: Full-Stack Vibe Coding