API Integration

Explore & Discover

Ever wonder how your weather app knows it's snowing in Salt Lake City right now, or how Spotify knows what songs you like? Those apps are talking to other apps behind the scenes using something called an API — Application Programming Interface. Start by going to Public APIs (github.com/public-apis/public-apis) and just browsing the list. Don't try to build anything yet. Just pick three APIs that sound interesting to you — maybe NASA's image API, a Pokemon database, or a free weather API. Click the documentation links and read a little. Notice how each API has a URL you call and data it sends back. You're ready for the next step when you can explain in your own words what an API does and name two APIs you'd actually want to use.

Learn the Basics

Now let's see an API in action without writing a single line of code. Download Postman (postman.com — it's free) and open it. Use the NASA Astronomy Picture of the Day API: the URL is https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY. Paste that into Postman and hit Send. You'll see a blob of JSON data come back — a description, an image URL, the date. That JSON is exactly what apps receive when they call an API. Poke around: change the date parameter in the URL to get a different day's picture. Notice the pattern — you send a request to a URL with parameters, and you get structured data back. You're ready for the next step when you can send a request in Postman, read the JSON response, and change one parameter to get different results.

Build Your First Project

Time to build something real. Head to Glitch.com and create a free account. Start a new Node.js project from a template. You're going to build a simple webpage that pulls live weather data for a Utah city using the Open-Meteo API (open-meteo.com — completely free, no signup). Open-Meteo gives you temperature, wind speed, and weather conditions just by passing latitude and longitude in the URL. Look up the coordinates for Salt Lake City: lat=40.76 and lon=-111.89. Write a fetch() call in your JavaScript to grab the data and display the temperature on your page. Glitch hosts it live instantly so you can share the URL. You're ready for the next step when you have a live webpage that displays real current weather data for at least one location.

Experiment & Iterate

Your weather page works — now make it yours. Add at least two more cities to compare (maybe your city vs. Provo vs. Moab). Then try connecting a second completely different API. The PokéAPI (pokeapi.co) is free and well-documented — try fetching a random Pokemon's name and image and displaying it on your page as a fun side widget. When you hit errors — and you will — use your browser's DevTools console (F12) to read the error messages. Try changing what data you display from the JSON: instead of just temperature, show wind speed or the high/low for the day. You're ready for the next step when your page pulls data from two different APIs and displays meaningful information from both.

Advanced Techniques

Most powerful APIs require an API key — a secret password that identifies your app. Sign up for a free key at OpenWeatherMap (openweathermap.org) — it takes about 10 minutes to activate. Now learn how to keep that key safe using environment variables instead of pasting it directly in your code. In Glitch, there's a .env file where you store secrets — your key goes there and your code reads it with process.env.YOUR_KEY_NAME. This is how real developers protect credentials. Next, chain two API calls together: use one API's response data as the input to a second API. For example, fetch a city's coordinates from a geocoding API, then pass those coordinates to Open-Meteo. You're ready for the next step when you have an API key stored safely in an environment variable and you've chained at least two API calls so the first response feeds the second.

Final Project Showcase

Build something someone else would actually want to use. Combine at least three APIs into one useful tool — maybe a Utah outdoor conditions dashboard that pulls weather from Open-Meteo, trail status from a public parks API, and sunrise/sunset times from sunrise-sunset.org/api. Or build a study tool that pulls trivia questions from Open Trivia Database (opentdb.com), tracks your score, and posts your result somewhere. Write a short README on your Glitch project explaining what APIs you used and why. Share your live Glitch link with friends, family, or post it in a coding Discord server. You're ready for the next step when you have a finished project live on Glitch that combines multiple APIs, has a README explaining how it works, and you've shared it with at least one real person outside your household.