Intermediate6 min readShare
Was this chapter helpful?
Share
APIs let your app talk to the rest of the internet — pulling in weather, showing user profiles, processing payments, and more. Here's what you need to know.
Don't worry — you won't write any API code by hand. Your AI tool handles all the technical parts. This guide helps you understand the concepts so you can describe what you want.
You (your app) tell the waiter (the API) what you want. The waiter goes to the kitchen (another company's computer) and brings back your food (the data). You never go into the kitchen yourself — the waiter handles it all.
A weather widget on your site pulls today's forecast from a weather service
Your checkout page asks Stripe to process a credit card payment
A store locator shows nearby locations using Google Maps data
Your login page checks credentials through an authentication service
Every app that works with data does some combination of these four actions. When you hear developers say "CRUD", this is what they mean.
Read or fetch data
Show a list of blog posts
Add new data
Submit a new comment
Change existing data
Edit your profile name
Remove data
Delete a photo
You don't need to understand the code behind these — just know which approach to ask your AI tool for.
The data is fetched before the page appears. The visitor sees everything immediately — no loading spinner.
Best for:
What to tell your AI tool:
"Fetch the data on the server side so the page loads with everything already visible."
The page loads first, then the data arrives a moment later. The visitor sees a brief loading state.
Best for:
What to tell your AI tool:
"Fetch the data on the client side with a loading spinner while it loads."
When your app asks for outside data, three things can happen. A good app handles all three gracefully.
The data hasn't arrived yet. Show something to let people know it's on the way — a spinner, a pulsing placeholder, or a "Loading..." message.
Ask your AI tool for:
"Add skeleton loading placeholders while the data is being fetched."
The data arrived successfully. Display it in cards, lists, tables, or whatever layout fits your design.
Ask your AI tool for:
"Display the results in a responsive card grid with the name, image, and description."
The request failed — maybe the service is down or the internet hiccupped. Show a friendly message and a "Try Again" button.
Ask your AI tool for:
"Add an error state with a friendly message and a retry button."
Some APIs are open to anyone (like the free ones listed below). Others require an API key — a special password that identifies your app. It's like a library card: you need one to borrow books, and the library tracks who borrows what.
Free public APIs for practice. Anyone can use them.
Sign up for a free account to get your key. Usually has usage limits.
You pay based on how much you use. For serious production apps.
Important: Keep API keys secret!
Never paste API keys directly into your visible code. Ask your AI tool to "store this API key in an environment variable" — see our Environment Variables guide for details.
These services let anyone pull data for free — no sign-up or API key needed. Perfect for learning.
jsonplaceholder.typicode.com
Fake user profiles, blog posts, and comments. The best place to start practicing.
Start Herepokeapi.co
Data on every Pokémon — names, types, stats, and images. Fun for building a visual directory.
Funopen-meteo.com
Real weather data for any location — temperature, wind, rain, and forecasts.
Practicalrestcountries.com
Info on every country — flags, populations, capitals, currencies, and languages.
Data-Richdog.ceo/dog-api
Random dog photos sorted by breed. Great for practicing with images.
Imagesthecatapi.com
Random cat photos and breed info. Same idea as Dog CEO, but for cat people.
ImagesCopy-paste these into Claude Code, Cursor, Bolt, or whichever AI tool you use. Replace the parts in [brackets] with your details.
Fetch data from [API URL] and display it in a nice card grid. Show a loading animation while it's fetching, a friendly error message if it fails with a retry button, and a message if there are no results.
Add a search bar that filters results from [API URL] as the user types. Show a loading spinner while searching, highlight the matching text in results, and show 'No results found' when nothing matches.
Build a weather widget using the Open-Meteo API. Show the current temperature, weather condition with an icon, today's high and low, and a 7-day forecast in a row of small cards. Let the user type a city name to search.
Create a contact form with name, email, and message fields. When submitted, save the data to [your database or service]. Show a success message after sending and validation errors if fields are empty.
Fetch a list of [items] from [API URL] and show 10 at a time. Add a 'Load More' button at the bottom that fetches the next batch. Show how many total items there are and a loading indicator when fetching more.
Create a page that reads [data type] from my database and displays it in a table. Include sorting by each column, and a way to delete individual rows with a confirmation dialog.
Imagine you're building a weather app. When a user searches for a city, your app calls a weather API, shows the current temperature and conditions, and displays a 5-day forecast. You need to handle loading (while the API responds), errors (city not found), and display the data in a clean card layout.
Build this with AI
"Build a weather dashboard that lets users search for a city. Use the OpenWeatherMap API (free tier). Show current temperature, weather condition with an icon, humidity, and wind speed in a card. Below it, show a 5-day forecast as small cards. Handle 3 states: loading (show a skeleton), error (show 'City not found'), and success. Use environment variables for the API key. Style with Tailwind CSS."
Copy-paste these prompts into your AI tool to apply what you just learned.
CONNECT TO AN API
"Connect my app to the [API name] API. I need to [describe what you want to do]. Show me how to make the API call and display the data."
ADD ERROR HANDLING TO API CALLS
"Add error handling to my API calls. Show loading spinners while fetching, error messages when requests fail, and retry buttons."
