Apply your knowledge to build something amazing!
Build an interactive explorer for YOUR favorite topic! Choose from Pokemon, Star Wars, Marvel superheroes, space exploration, cute animals, or any other fun API. You'll create a fully functional application that fetches and displays data from your chosen API in an attractive, user-friendly interface.
Duration: 2 weeks Individual Project: Work independently Applies Concepts: 1-5 (Introduction to APIs through API Integration)
Create an app that lets users explore and discover interesting data from your chosen API. Whether you're building a Pokedex, a Star Wars database, a superhero encyclopedia, or an animal fact finder - the choice is yours!
By completing this project, you will:
| API | What You Can Build | Example Features |
|---|---|---|
| PokéAPI | Pokedex Explorer | Search Pokemon, view stats, abilities, evolution chains |
| Star Wars API | Galaxy Database | Browse characters, planets, starships, films |
| Dog CEO API | Dog Breed Explorer | Random dogs by breed, image galleries |
| Cat Facts API | Cat Encyclopedia | Random facts, breed information |
| Countries API | World Explorer | Flags, capitals, populations, currencies |
| API | What You Can Build | Example Features |
|---|---|---|
| Rick and Morty API | Character Database | Characters, episodes, locations |
| Harry Potter API | Wizarding World Explorer | Characters, spells, houses, staff |
| Superhero API | Hero Encyclopedia | Hero stats, powers, biographies |
| Meal DB | Recipe Finder | Search meals, ingredients, categories |
| Open Library API | Book Explorer | Search books, authors, covers |
| API | What You Can Build | Example Features |
|---|---|---|
| NASA API | Space Explorer | Mars photos, astronomy picture of the day |
| Marvel API | Marvel Universe | Comics, characters, creators |
| Spotify API | Music Explorer | Artists, albums, playlists |
Build Upon Your Activity Work! Don't start from scratch - you've already created 5 powerful templates during the activities. Use them as your foundation and combine them into something amazing!
Located in the /Templates/ directory, each template is a complete, StackBlitz-ready starter:
| Template | What You Built | Key Features |
|---|---|---|
| Template 1: Dog API Explorer | Animal breed browser | Image galleries, breed facts, random photos |
| Template 2: Pokemon JSON Parser | Data structure explorer | Complex nested data, type handling, evolution chains |
| Template 3: Multi-API Dashboard | Multiple data sources | API comparison, unified interface, data merging |
| Template 4: POST Request Handler | Interactive data submission | Form handling, user input, API updates |
| Template 5: Widget Builder | Modular component system | Reusable widgets, drag-and-drop UI, customization |
Start with Your Favorite: Pick the template you enjoyed building most as your base structure.
Import Features: Take the best features from other templates:
Create Unified Navigation: Connect your templates with a navigation system that lets users switch between different explorers or combine features on one page.
Base: Dog API Explorer
+ Pokemon's data parsing techniques
+ Rich species information display
+ Evolution/breeding information
+ Cross-species comparison features
Base: Multi-API Dashboard
+ Widget Builder's modular system
+ Customizable widget layout
+ Save/load dashboard configurations
+ Real-time data widgets
Navigation Hub with:
- Animal Explorer (Template 1 enhanced)
- Data Parser for any API (Template 2 adapted)
- Dashboard view (Template 3)
- Interactive forms (Template 4)
- Custom widgets (Template 5)
For Pokemon/Character APIs: Start with Template 2 (JSON Parser) for complex data handling For Image-Heavy APIs: Start with Template 1 (Dog Explorer) for gallery features For Multiple APIs: Start with Template 3 (Multi-API Dashboard) for comparison features For User-Generated Content: Start with Template 4 (POST Handler) for interactivity For Customizable Interfaces: Start with Template 5 (Widget Builder) for modularity
💡 Pro Tip: Your templates already solve 80% of common API challenges. Focus your time on the unique features that make YOUR explorer special!
Features:
- Search Pokemon by name or ID
- Browse by type (fire, water, grass)
- Display stats (HP, Attack, Defense)
- Show evolution chains
- Save favorite Pokemon team
- Compare two Pokemon side-by-side
Features:
- Browse characters with images
- Search planets and starships
- Filter by film appearance
- Display character details (height, homeworld)
- Save favorite characters
- Timeline of events
Features:
- Search recipes by ingredient
- Browse by category (dessert, main)
- Display ingredients and instructions
- Filter by cuisine type
- Save favorite recipes
- Random recipe generator
/Templates/ directoryUse Your Activity Templates: Each template in /Templates/ is ready to use in StackBlitz or locally:
Local Development:
# Copy your chosen template
cp -r Templates/[chosen-template] my-api-explorer
cd my-api-explorer
# Start building on your foundation!
// Example: Testing your chosen API
async function testAPI() {
// PokéAPI example
const response = await fetch('https://pokeapi.co/api/v2/pokemon/pikachu');
const data = await response.json();
console.log(data);
// Star Wars API example
// const response = await fetch('https://swapi.dev/api/people/1/');
// Dog API example
// const response = await fetch('https://dog.ceo/api/breeds/list/all');
}
Goal: Get basic browsing and searching working
Week 1 Deliverable: Working app that can search and display data from your chosen API
Goal: Add professional features and improve user experience
Week 2 Deliverable: Complete, polished API explorer ready for portfolio
Total: 100 points
Pokemon: Search "pikachu", filter by electric type, save to team Star Wars: Search "Luke", filter by films, view planet details Recipes: Search "pasta", filter by Italian cuisine, save recipe Dogs: Browse terriers, view breed details, save favorites
Remember: The goal is to have fun while learning! Choose an API that excites you and build something you'd want to show your friends. Happy coding! 🚀