Welcome to the ultimate API integration challenge! This template teaches you to work with multiple APIs simultaneously, combining data from different sources to create a rich, interactive dashboard.
By completing this activity, you will:
Master multiple API authentication methods (path-based and query-based)
Coordinate parallel API calls with Promise.all()
Handle mixed success/failure scenarios across services
Build secure API key management systems
Create unified dashboards combining multiple data sources
Implement professional error handling across different APIs
IMPORTANT: This template includes WORKING UI and helper functions! You can test the interface immediately:
Navigate to this folder in your terminal/command promptStart a local server (choose one):
bash
python3 -m http.server 8000
python -m http.server 8000
npx http-server -p 8000
Open your browser to: http://localhost:8000 You'll see the dashboard interface with 5 API panels ready to configure
Before implementing the TODOs, you need to obtain free API keys from these services:
Visit: superheroapi.com
Time to activate: InstantFeatures: Superhero data, powers, stats, imagesRate limit: Generous for learning
Visit: api.nasa.gov
Time to activate: Instant (email delivery)DEMO_KEY Limitations: Only 30 requests/hour (shared across all users)Free API Key: 1000 requests/hour (much better for development!)How to Get Your Key:
Go to https://api.nasa.gov/
Fill out the simple form (30 seconds)
Check your email for the API key
Replace DEMO_KEY in the code with your key
Features: Space images, Mars rover photos, astronomy data
Visit: developers.giphy.com
Time to activate: InstantFree Tier: 100 API calls per hour (beta keys)Features: GIF search, trending, random GIFsRating filters: G, PG, PG-13, RNote: If you see authentication errors, you may need to upgrade from beta key
Visit: themoviedb.org/settings/api
Time to activate: Usually instantFeatures: Movie search, popular films, ratings, images
65% of the code is implemented for you:
✅ Complete UI with tabbed navigation (fully working)
✅ API key management with localStorage (fully working)
✅ Loading states and error handling utilities (fully working)
✅ Display functions for all 4 APIs (fully working)
✅ Tab switching and configuration panel (fully working)
⚠️ Superhero API integration (3 functions TODO)
⚠️ NASA API integration (4 functions TODO)
⚠️ GIPHY API integration (4 functions TODO)
⚠️ TMDB API integration (4 functions TODO)
⚠️ Multi-API dashboard features (2 functions TODO)
First, explore the working UI to understand the dashboard structureConfigure your API keys in the settings panelComplete TODO 1-4 to integrate each API individuallyComplete TODO 5 to combine all APIs into unified dashboardsTest edge cases like invalid keys, network errors, and empty results
Complete 3 functions to integrate the Superhero API using path-based authentication.
Functions to implement:
testSuperheroAPI() - Validate API key workssearchSuperhero() - Search heroes by namegetRandomSuperhero() - Get random hero (ID range: 1-731)
API Endpoint Pattern:
javascript
`https://superheroapi.com/api/${apiKey} /search/${heroName} `
`https://superheroapi.com/api/${apiKey} /${heroId} `
Success Criteria:
Test button shows "Connected!" with valid API key
Search displays hero card with image, stats, and biography
Random button generates different heroes each time
Error handling works for invalid API keys and search terms
Key Learning: Path-based authentication (key embedded in URL path)
Complete 4 functions to integrate NASA's space image APIs using query parameter authentication.
Functions to implement:
testNASAAPI() - Validate API key (or use DEMO_KEY)getNASAImage() - Get astronomy image for specific dategetTodaysNASAImage() - Get today's space imagegetMarsPhotos() - Get Mars rover photos
API Endpoint Pattern:
javascript
`https://api.nasa.gov/planetary/apod?api_key=${key} &date=${date} `
`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=${key} `
Success Criteria:
Test button validates API connection
Date picker fetches historical space images
Today's image button shows current APOD
Mars photos display rover images correctly
Both DEMO_KEY and real keys work
Key Learning: Query parameter authentication and multiple parameter chaining
Complete 4 functions to integrate GIPHY's media API with content filtering.
Functions to implement:
testGiphyAPI() - Validate API keysearchGIFs() - Search GIFs by termgetTrendingGIFs() - Get trending GIFsgetRandomGIF() - Get random GIF
API Endpoint Pattern:
javascript
`https://api.giphy.com/v1/gifs/search?api_key=${key} &q=${query} &limit=12&rating=g`
`https://api.giphy.com/v1/gifs/trending?api_key=${key} &limit=12&rating=g`
Success Criteria:
Test button confirms API connection
Search displays grid of 12 GIFs
Trending button shows current popular GIFs
Random button gets single random GIF
All content filtered to G-rating
Key Learning: Media API integration and content filtering
Complete 4 functions to integrate TMDB's movie database API.
Functions to implement:
testTMDBAPI() - Validate API keysearchMovies() - Search movies by titlegetPopularMovies() - Get popular moviesgetNowPlaying() - Get currently playing movies
API Endpoint Pattern:
javascript
`https://api.themoviedb.org/3/search/movie?api_key=${key} &query=${query} `
`https://api.themoviedb.org/3/movie/popular?api_key=${key} &page=1`
`https://image.tmdb.org/t/p/w300${movie.poster_path} `
Success Criteria:
Test button validates TMDB connection
Search displays movie posters and info
Popular movies button shows top films
Now Playing shows current releases
Movie ratings display correctly
Key Learning: Working with CDN image URLs and paginated data
Complete 2 advanced functions that combine data from all APIs simultaneously.
Functions to implement:
createRandomDashboard() - Fetch random data from all 4 APIs in parallelcreateThemedDashboard() - Create themed content across all APIs
Key Concepts to Master:
javascript
const [hero, space, gifs, movies] = await Promise .all ([
getRandomSuperhero (),
getTodaysNASAImage (),
getRandomGIF (),
getPopularMovies ()
]);
const results = await Promise .allSettled ([...apiCalls]);
const successes = results.filter (r =>status === 'fulfilled' );
const failures = results.filter (r =>status === 'rejected' );
Success Criteria:
Random dashboard combines all 4 APIs successfully
Themed dashboard searches all APIs with same keyword
Parallel loading shows multi-spinner animation
Partial failures handled gracefully (show what works)
Dashboard displays in unified grid layout
Key Learning: Promise.all(), Promise.allSettled(), and coordinating multiple async operations
You don't need to write these - they're already working! Just call them with your API data:
javascript
displaySuperhero (hero)
displayNASAImage (data)
displayGIFs (gifs)
displayMovies (movies)
javascript
showLoading (message)
hideLoading ()
showError (message)
saveKeys ()
updateConfigStatus ()
Superhero API:
NASA API:
GIPHY API:
TMDB API:
Multi-API Dashboard:
Open Developer Tools (F12 in most browsers)Check Console tab for detailed error messages and API responsesUse Network tab to inspect API requests and status codesTest one API at a time before attempting multi-API featuresVerify API keys in the configuration panel before testing
Issue: "Please configure your API key first!"
Solution: Enter your API key in the configuration panel and click away from the input to save
Issue: API test fails with 401 Unauthorized
Solution: Double-check your API key is correct and hasn't expired
Issue: CORS errors in console
Solution: Make sure you're using a local server (python -m http.server) not opening HTML directly
Issue: "Cannot read property of undefined"
Solution: Check API response structure - some APIs return arrays, others return objects
Issue: Dashboard shows "X API calls failed"
Solution: Check that ALL 4 APIs are configured with valid keys
Tabbed navigation - Switch between API panelsResponsive design - Works on desktop and mobileLoading animations - Multi-spinner for parallel requestsError toasts - Auto-dismissing error messagesConfiguration panel - Collapsible API key managementProgress indicator - Visual API configuration status
LocalStorage persistence - Keys saved automaticallySecure input fields - Password-type inputs for keysTest buttons - Validate each API immediatelyAuto-save - Keys save on input change
Contextual messages - Different messages for each operationGraceful degradation - Show what works, hide what failsUser-friendly errors - Helpful messages with suggestions5-second auto-dismiss - Error toasts clear automatically
Your project is complete when:
✅ All 4 individual APIs work with test buttons
✅ API keys persist after page refresh
✅ Each search/fetch function displays data correctly
✅ Random dashboard combines all APIs successfully
✅ Themed dashboard searches across all APIs
✅ Loading states appear during API calls
✅ Error handling works gracefully
✅ Project works on both desktop and mobile
Ready for more? Try these bonus features:
Favorites system: Save favorite heroes, movies, or GIFs to localStorageSearch history: Track recent searches and show quick-access buttonsImage counter: Display how many items viewed from each APIShare buttons: Add social media sharing for cool finds
Advanced filtering: Filter TMDB by rating, GIPHY by trending periodPagination: Add "Load More" for movie resultsComparison view: Compare two superheroes side-by-sideCaching layer: Cache API responses for 5 minutes to reduce API calls
Cross-API relationships: Find superhero movies in TMDB automaticallyCustom dashboard layouts: Drag-and-drop dashboard arrangementData visualization: Add charts showing hero power statsExport dashboard: Generate shareable dashboard imagesKeyboard shortcuts: Add hotkeys for common actions
Real-time collaboration: Share dashboard with friends using WebSocketsMachine learning: Recommend content based on viewing historyAPI rate limit display: Show remaining API calls visuallyOffline PWA: Convert to Progressive Web App with offline supportVoice commands: Add voice search using Web Speech API
Superhero API Docs - Hero data and imagesNASA API Docs - Space images and dataGIPHY API Docs - GIF search and trendingTMDB API Docs - Movie database
Promise.all() - MDN - Parallel API callsPromise.allSettled() - MDN - Handle mixed resultsAsync/Await Guide - Modern async patternsLocalStorage API - Persistent storage
REST API Best Practices - Design patternsAPI Authentication Methods - Security patternsCORS Explained - Cross-origin requests
Once you complete this project, you'll have:
Integrated 4 different APIs with various authentication methodsMastered parallel API calls with Promise.all() and Promise.allSettled()Built a production-ready dashboard combining multiple data sourcesImplemented professional error handling across complex async operationsManaged secure API keys with localStorage persistenceCreated a responsive UI that works across all devices
This is the most advanced template in the W3.5 series - it combines everything you've learned about API integration into a real-world application that demonstrates enterprise-level skills!
Need Help?
Start with one API at a time - Complete TODO 1, test it fully, then move to TODO 2Use the browser DevTools - Network tab shows API requests, Console shows errorsCheck API documentation - Each API has slightly different response formatsTest your API keys - Use the test buttons before implementing search functionsRead the console logs - The template includes helpful console.log() messagesCompare with helper functions - Look at how display functions work for patterns
Pro Tips:
NASA's DEMO_KEY works immediately - start there if waiting for other keys
Superhero API IDs range from 1-731 for random selection
GIPHY requires rating=g parameter for school-appropriate content
TMDB poster paths need the CDN URL prepended: https://image.tmdb.org/t/p/w300
Remember: This is challenging but incredibly rewarding! You're building real skills used by professional developers every day. Take your time, test thoroughly, and have fun exploring these amazing APIs!
Happy coding! 🚀✨