API Projects to Master Web Dev — From Beginner to Advanced

🟢 Beginner Projects

✨ Start simple. Learn to work with APIs, fetch data, and display it.

1. 🐶 Dog Image Generator
   → Use Dog CEO API to fetch random dog pictures.
   Great to learn basic Fetch API and DOM manipulation.

2. ☀️ Weather App
   → Use OpenWeatherMap to show weather by city.
   Add search input, icons, and background change based on weather.

3. 📝 Public Quotes API Display
   → Pull quotes from Quotable API.
   Show a new one on page load or button click.

4. 📖 Dictionary Lookup App
   → Use Free Dictionary API.
   Let users search any word and get its definition, pronunciation, and example.

5. 🎵 Random Song Lyrics Generator
   → Try Lyrics.ovh.
   Search songs and display lyrics in a styled modal.

6. 🌍 Country Info Finder
   → Use REST Countries API.
   Show country flags, population, currency, region, etc.

7. 🧝 Game of Thrones Character Viewer
   → Use API of Ice and Fire.
   Fetch and display GoT characters, houses, and even books!

🧩 Skills covered: fetch(), async/await, DOM updates, working with JSON.

🟡 Intermediate Projects

💡 Ready to build smarter apps with more logic, auth, or filters?

1. 👨‍💼 Authenticated API Dashboard
   → Create login/logout using JWT or Firebase auth, and show user-specific API data after login.

2. 🔍 GitHub Repo Search Tool
   → Use GitHub's API to let users search and view top repositories by language or topic.

3. 💱 Currency Converter
   → Use ExchangeRate API for live currency values.
   Add dropdowns, charts, or even conversion history.

4. 📧 Contact Form with Email API
   → Use EmailJS to send emails directly from frontend — no backend needed.

5. 🗞️ News Aggregator App
   → Use NewsAPI to display trending headlines, filter by category (Tech, Business, etc.)

6. 🧳 Travel Planner with Maps API
   → Use Google Maps or Mapbox. Mark places, calculate distances, or get travel time estimates.

7. 🖼️ Image Search App (Unsplash API)
   → Let users search keywords and show high-quality images using the Unsplash API.

🧩 Skills covered: API keys, dynamic inputs, pagination, client-side validation.

🔴 Advanced Projects

🔥 Build real products. Backend, auth, payments, scaling.

1. 💳 Stripe Payment Integration
   → Create a full payment page with Stripe Checkout and test cards.

2. 🧱 API Rate Limiter + Logger
   → Use Express + Redis to log all API requests and limit usage (e.g., 100 requests/hour per user).

3. 🛠️ Build Your Own REST API
   → Use Node.js + Express + MongoDB to create a CRUD API (e.g., a notes app or blog API).

4. 🔐 OAuth Login (Google or GitHub)
   → Use Auth0 or [Firebase Auth] to add secure social login.

5. 📺 YouTube Video Tracker
   → Use YouTube Data API to show video views, likes, or most-watched videos from a channel.

6. ⏱️ Scheduled Email App
   → Build a tool that sends API-triggered emails at scheduled times (use Node + node-cron + Email API).

7. 📲 Real-time Chat App
   → Combine REST + WebSockets for messaging. Show online status, real-time updates, and store messages.

8. 📦 Shipment Tracker
   → Track parcels from AfterShip or Shippo API. Let users input their tracking ID and see updates.

9. 🧾 Invoice Builder (PDF + Email)
   → Build invoice UI, generate PDFs using jsPDF, and send via EmailJS or Nodemailer.

🧩 Skills covered: backend, token-based auth, real-time updates, PDF generation, API chaining.