🧰 40 Free APIs You Can Use to Build Awesome Projects (2026 Edition)

Looking for ways to build real-world apps faster without reinventing the wheel? Free APIs are your shortcut. From AI tools to finance data and even anime recognition, there’s an API for almost everything.

This curated list breaks down 40 powerful free APIs, what they do, and how you can actually use them in projects.

⚡ TL;DR: Key Takeaways

You can build powerful apps by combining free APIs—no need to start from scratch.
Many APIs offer generous free tiers perfect for MVPs and side projects.
Focus on use cases, not just tools—what problem are you solving?
The best projects come from stacking multiple APIs together.

🖼️ Media & Content APIs

1. Unsplash API

Access high-quality stock images
Perfect for:
- Blogs
- Social apps
- Dynamic UIs

2. YouTube API

Manage:
- Titles
- Thumbnails
- Metadata
Great for:
- A/B testing thumbnails
- Automating content workflows

3. Podcast Index API

Retrieve:
- Podcast data
- Transcripts (with timestamps)
Ideal for:
- AI summarizers
- Clip generators

4. Spotify API

Access songs, artists, playlists
Build:
- Music dashboards
- “Now playing” widgets

5. TMDB API

Movie & TV data
Great for:
- Recommendation apps
Free for non-commercial use

🎮 Gaming & Fun APIs

6. IGDB API

Game metadata, genres, covers
Build:
- Game discovery apps

7. Deck of Cards API

Shuffle, draw, manage decks
Perfect for:
- Game UIs
- Practice apps

8. Trace.moe API

Identify anime from screenshots
Great for:
- Anime search tools

9. ZenQuotes API

Random inspirational quotes
Use cases:
- Bots
- UI Easter eggs

🤖 AI & Productivity APIs

10. Deepgram API

Convert audio → text
Includes:
- Timestamps
- Sentiment analysis

11. Free Dictionary API

Definitions without API key
Great for:
- Learning apps

12. OpenWeather API

1,000 free calls/day
Use in:
- Smart assistants
- Outfit recommenders

13. Google Docs API

Read/write docs programmatically
Automate:
- Reports
- Content pipelines

💰 Finance & Data APIs

14. Yahoo Finance API (unofficial)

Stock data & history
Useful for:
- Trading dashboards

15. Alpaca API

Build trading bots
Popular in fintech apps

16. Exchange Rate API

Real-time + historical FX rates
No API key required

17. Open Food Facts API

Barcode → product data
Great for:
- Health apps

🌍 Utility & Backend APIs

18. Pantry API

Store up to 100MB JSON
No database needed

19. Webhook.site API

Handle app events
Great for integrations

20. GeoCode API

Address → coordinates
2,500 free requests/day

21. HTTP Status Dogs API

Status codes with dog images 🐶
Fun UI additions

22. I Love PDF API

Edit, compress, extract PDFs

23. CloudConvert API

Convert between formats
Reliable for file workflows

24. Resend API

Send emails easily
Developer-friendly

25. Stripe API

Accept payments globally
Essential for SaaS

🌐 Social & Platform APIs

26. Discord API

Build bots & automations
Great for:
- Communities
- Gamification

27. WordPress REST API

Access site data programmatically
Combine with modern frontends

28. Ticketmaster API

Search events, venues
Build:
- Event apps

🧪 Dev & Testing APIs

29. Random Data Generator API

Generate test data
No API key required

30. Digits API

Validate dates, leap years
Lightweight alternative to libraries

🚀 Niche & Unique APIs

31. Clearbit Logo API

Fetch company logos instantly

32. Waifu API

Generate anime characters

33. Kroki API

Text → diagrams (PNG/JPEG)

34. OpenSky Network API

Track planes in real time

35. NASA API

Astronomy pictures
Mars weather data

36. World News API

Global news data
Limited free tier

🔥 Bonus: APIs Hidden in Your Favorite Apps

Many tools already have APIs:

Notion
Jira
Todoist
Obsidian

👉 These let you:

Automate workflows
Build integrations
Create custom dashboards

🧠 How to Turn These APIs Into Projects

Instead of just exploring APIs, combine them:

Example Ideas:

📰 News + AI → Summarized news app
🎧 Podcast + AI → Clip generator
📍 Geo + Weather → Travel planner
📈 Finance + Email → Daily stock alerts

🏁 Final Thoughts

Free APIs are one of the fastest ways to build real products today.

You don’t need:

Complex backend systems
Massive datasets
Years of development

You just need:

A clear idea
The right APIs
A simple execution plan

Start small. Combine APIs. Ship fast.

📚 Pro Tip

When choosing APIs:

Check rate limits ⚠️
Understand pricing 💰
Plan for scaling 📈

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>40 Free APIs to Build Awesome Projects | getbetterat.work</title>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">  <script src="https://cdn.tailwindcss.com"></script>  <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'], }, colors: { cream: '#F5F5F1', matte: '#1A1A1A', accent1: '#4F46E5', /* Tech Blue */ accent2: '#059669', /* Free/Success Green */ accent3: '#EA580C', /* Warning/Orange */ accent4: '#7C3AED', /* AI/Special Purple */ white: '#FFFFFF', }, boxShadow: { 'flat': '4px 4px 0px 0px #1A1A1A', 'flat-hover': '2px 2px 0px 0px #1A1A1A', } } } } </script> <style> body { background-color: #F5F5F1; color: #1A1A1A; } /* Smooth transitions for interactive elements */ .card-hover { transition: all 0.2s ease; } .card-hover:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px 0px #1A1A1A; } /* Custom Scrollbar to match the flat design */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #F5F5F1; border-left: 2px solid #1A1A1A; } ::-webkit-scrollbar-thumb { background: #4F46E5; border: 2px solid #1A1A1A; } </style>  <script src="https://unpkg.com/lucide@latest"></script> </head> <body class="antialiased font-sans">  <nav class="border-b-2 border-matte bg-cream sticky top-0 z-50"> <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between"> <div class="flex items-center gap-2 font-bold text-xl tracking-tight"> <i data-lucide="layers" class="w-8 h-8 text-accent1"></i> <span>getbetterat.work</span> </div> <div class="hidden md:flex gap-6 font-semibold"> <a href="#basics" class="hover:text-accent1">Basics</a> <a href="#media" class="hover:text-accent1">Media</a> <a href="#smart" class="hover:text-accent4">Smart Tools</a> <a href="#build" class="hover:text-accent3">How to Build</a> </div> </div> </nav>  <header class="py-20 border-b-2 border-matte bg-white"> <div class="max-w-4xl mx-auto px-4 text-center"> <div class="inline-flex items-center gap-2 px-4 py-2 bg-cream border-2 border-matte shadow-flat font-mono text-sm font-bold mb-8"> <i data-lucide="calendar" class="w-4 h-4 text-accent3"></i> 2026 Edition Guide </div> <h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight tracking-tight"> 40 Free APIs to Build <span class="text-accent1">Awesome Projects</span> </h1> <p class="text-xl md:text-2xl text-matte font-medium mb-10 max-w-3xl mx-auto leading-relaxed"> Stop starting from zero. Free APIs let you plug in powerful data, tools, and artificial intelligence with just a few lines of code. This is your complete guide to finding and using them. </p> <div class="flex flex-wrap justify-center gap-4"> <a href="#start-here" class="bg-accent1 text-white px-8 py-4 font-bold border-2 border-matte shadow-flat hover:shadow-flat-hover hover:translate-y-1 hover:translate-x-1 transition-all flex items-center gap-2"> <i data-lucide="rocket" class="w-4 h-4"></i> Start Building Now </a> <a href="#how-it-works" class="bg-cream text-matte px-8 py-4 font-bold border-2 border-matte shadow-flat hover:shadow-flat-hover hover:translate-y-1 hover:translate-x-1 transition-all flex items-center gap-2"> <i data-lucide="help-circle" class="w-4 h-4 text-accent2"></i> What is an API? </a> </div> </div> </header>  <main class="max-w-7xl mx-auto px-4 py-16 space-y-24">  <section id="how-it-works" class="scroll-mt-24"> <div class="flex items-center gap-4 mb-8"> <i data-lucide="book-open" class="w-8 h-8 text-accent3"></i> <h2 class="text-4xl font-extrabold">The Absolute Basics</h2> </div> <div class="grid md:grid-cols-3 gap-8">  <article class="bg-white border-2 border-matte shadow-flat p-8"> <div class="w-12 h-12 bg-cream border-2 border-matte flex items-center justify-center mb-6"> <i data-lucide="server" class="w-8 h-8 text-accent1"></i> </div> <h3 class="text-2xl font-bold mb-4">What is an API?</h3> <p class="text-lg leading-relaxed"> Think of an API as a waiter in a restaurant. You are the customer. You tell the waiter what you want. The waiter goes to the kitchen (the server), gets your food (the data), and brings it back to you. You do not need to know how the food is cooked; you just ask for it. </p> </article>  <article class="bg-white border-2 border-matte shadow-flat p-8"> <div class="w-12 h-12 bg-cream border-2 border-matte flex items-center justify-center mb-6"> <i data-lucide="box" class="w-8 h-8 text-accent2"></i> </div> <h3 class="text-2xl font-bold mb-4">Why use them?</h3> <p class="text-lg leading-relaxed"> Instead of building everything yourself, you use APIs. Want to show the weather? You do not need to send a weather balloon into the sky. You just ask the Weather API for the current temperature. It saves you months of hard work. </p> </article>  <article class="bg-white border-2 border-matte shadow-flat p-8"> <div class="w-12 h-12 bg-cream border-2 border-matte flex items-center justify-center mb-6"> <i data-lucide="blocks" class="w-8 h-8 text-accent4"></i> </div> <h3 class="text-2xl font-bold mb-4">The Magic Trick</h3> <p class="text-lg leading-relaxed"> The best apps combine two or three APIs together. If you take a Weather API and mix it with a Clothing API, you can build an app that tells you exactly what to wear today based on the temperature. </p> </article> </div> </section>  <section id="media" class="scroll-mt-24"> <div class="flex items-center gap-4 mb-8"> <i data-lucide="image" class="w-8 h-8 text-accent1"></i> <h2 class="text-4xl font-extrabold">1. Media & Content APIs</h2> </div> <p class="text-xl mb-8 max-w-3xl">Get free images, videos, and music for your apps without getting into copyright trouble. These tools give you high-quality files instantly.</p> <div class="grid lg:grid-cols-2 gap-8">  <article class="bg-white border-2 border-matte shadow-flat p-6 flex flex-col h-full card-hover"> <header class="flex justify-between items-start mb-4"> <div> <h3 class="text-2xl font-bold flex items-center gap-2"> <i data-lucide="camera" class="w-4 h-4 text-accent1"></i> Unsplash API </h3> <p class="text-matte font-medium mt-1">High-quality, totally free photos.</p> </div> <span class="bg-cream border-2 border-matte px-3 py-1 text-sm font-bold text-accent2 flex items-center gap-1"> <i data-lucide="check-circle" class="w-4 h-4"></i> Generous Free Tier </span> </header> <div class="bg-matte text-white p-4 font-mono text-sm mb-6 flex-grow border-2 border-matte"> <div class="text-accent2 mb-2">// How you ask for a photo of a dog:</div> <div class="break-all">GET https://api.unsplash.com/photos/random?query=dog</div> </div> <div class="bg-cream border-2 border-matte p-4"> <h4 class="font-bold flex items-center gap-2 mb-2"> <i data-lucide="lightbulb" class="w-4 h-4 text-accent3"></i> Idea to Build </h4> <p>Build a "Daily Calm" website that shows a beautiful new nature photo every single morning to help people relax before work.</p> </div> </article>  <article class="bg-white border-2 border-matte shadow-flat p-6 flex flex-col h-full card-hover"> <header class="flex justify-between items-start mb-4"> <div> <h3 class="text-2xl font-bold flex items-center gap-2"> <i data-lucide="youtube" class="w-4 h-4 text-accent3"></i> YouTube Data API </h3> <p class="text-matte font-medium mt-1">Search videos, read comments, get channel data.</p> </div> <span class="bg-cream border-2 border-matte px-3 py-1 text-sm font-bold text-accent3 flex items-center gap-1"> <i data-lucide="key" class="w-4 h-4"></i> Needs API Key </span> </header> <div class="bg-matte text-white p-4 font-mono text-sm mb-6 flex-grow border-2 border-matte"> <div class="text-accent2 mb-2">// Data you get back (JSON):</div> <pre class="overflow-x-auto"><code>{ "title": "Learn HTML in 5 Minutes", "views": "150430", "likes": "4000" }</code></pre> </div> <div class="bg-cream border-2 border-matte p-4"> <h4 class="font-bold flex items-center gap-2 mb-2"> <i data-lucide="lightbulb" class="w-4 h-4 text-accent3"></i> Idea to Build </h4> <p>Create a dashboard that only shows educational videos, hiding all the distracting recommended videos.</p> </div> </article>  <article class="bg-white border-2 border-matte shadow-flat p-6 flex flex-col h-full card-hover"> <header class="flex justify-between items-start mb-4"> <div> <h3 class="text-2xl font-bold flex items-center gap-2"> <i data-lucide="headphones" class="w-4 h-4 text-accent4"></i> Spotify API </h3> <p class="text-matte font-medium mt-1">Access songs, artists, and public playlists.</p> </div> <span class="bg-cream border-2 border-matte px-3 py-1 text-sm font-bold text-accent3 flex items-center gap-1"> <i data-lucide="key" class="w-4 h-4"></i> Needs Auth </span> </header> <div class="bg-cream border-2 border-matte p-4 mt-auto"> <h4 class="font-bold flex items-center gap-2 mb-2"> <i data-lucide="lightbulb" class="w-4 h-4 text-accent3"></i> Idea to Build </h4> <p>A personal website widget that automatically shows the world exactly what song you are listening to right now.</p> </div> </article>  <article class="bg-white border-2 border-matte shadow-flat p-6 flex flex-col h-full card-hover"> <header class="flex justify-between items-start mb-4"> <div> <h3 class="text-2xl font-bold flex items-center gap-2"> <i data-lucide="tv" class="w-4 h-4 text-accent1"></i> TMDB API </h3> <p class="text-matte font-medium mt-1">The huge database for Movies and TV Shows.</p> </div> <span class="bg-cream border-2 border-matte px-3 py-1 text-sm font-bold text-accent2 flex items-center gap-1"> <i data-lucide="check-circle" class="w-4 h-4"></i> Free for Non-Commercial </span> </header> <div class="bg-cream border-2 border-matte p-4 mt-auto"> <h4 class="font-bold flex items-center gap-2 mb-2"> <i data-lucide="lightbulb" class="w-4 h-4 text-accent3"></i> Idea to Build </h4> <p>A "What should we watch?" app where you and a friend swipe on movie posters until you find a match.</p> </div> </article> </div> </section>  <section id="smart" class="scroll-mt-24"> <div class="flex items-center gap-4 mb-8"> <i data-lucide="brain-circuit" class="w-8 h-8 text-accent4"></i> <h2 class="text-4xl font-extrabold">2. AI & Smart Tools</h2> </div> <p class="text-xl mb-8 max-w-3xl">Give your apps a brain. These APIs do things that used to require a team of scientists, like understanding spoken words or predicting the weather.</p> <div class="grid lg:grid-cols-2 gap-8">  <article class="bg-white border-2 border-matte shadow-flat p-6 flex flex-col h-full card-hover border-t-8 border-t-accent4"> <header class="flex justify-between items-start mb-4"> <div> <h3 class="text-2xl font-bold flex items-center gap-2"> <i data-lucide="mic" class="w-4 h-4 text-matte"></i> Deepgram API </h3> <p class="text-matte font-medium mt-1">Turn spoken audio files into written text super fast. </p> </div> <span class="bg-cream border-2 border-matte px-3 py-1 text-sm font-bold text-accent2 flex items-center gap-1"> <i data-lucide="gift" class="w-4 h-4"></i> Free Trial Credit </span> </header> <div class="bg-matte text-white p-4 font-mono text-sm mb-6 flex-grow border-2 border-matte"> <div class="text-accent4 mb-2">// It tells you what people feel:</div> <pre class="overflow-x-auto"><code>{ "text": "I absolutely love this product!", "sentiment": "positive", "confidence": 0.99 }</code></pre> </div> <div class="bg-cream border-2 border-matte p-4"> <h4 class="font-bold flex items-center gap-2 mb-2"> <i data-lucide="lightbulb" class="w-4 h-4 text-accent3"></i> Idea to Build </h4> <p>A tool that takes a long voice memo from a meeting and turns it into a short summary of bullet points to read later.</p> </div> </article>  <article class="bg-white border-2 border-matte shadow-flat p-6 flex flex-col h-full card-hover"> <header class="flex justify-between items-start mb-4"> <div> <h3 class="text-2xl font-bold flex items-center gap-2"> <i data-lucide="cloud-rain" class="w-4 h-4 text-accent1"></i> OpenWeather API </h3> <p class="text-matte font-medium mt-1">Live weather data from around the world.</p> </div> <span class="bg-cream border-2 border-matte px-3 py-1 text-sm font-bold text-accent2 flex items-center gap-1"> <i data-lucide="check-circle" class="w-4 h-4"></i> 1,000 Free Calls/Day </span> </header> <div class="bg-matte text-white p-4 font-mono text-sm mb-6 flex-grow border-2 border-matte"> <div class="text-accent2 mb-2">// Fetch weather by city:</div> <div class="break-all">GET /data/2.5/weather?q=London&appid=YOUR_KEY</div> </div> <div class="bg-cream border-2 border-matte p-4"> <h4 class="font-bold flex items-center gap-2 mb-2"> <i data-lucide="lightbulb" class="w-4 h-4 text-accent3"></i> Idea to Build </h4> <p>A smart alarm clock app that lets you sleep an extra 15 minutes if it knows it is raining outside heavily.</p> </div> </article>  <article class="bg-white border-2 border-matte shadow-flat p-6 flex flex-col h-full card-hover"> <header class="flex justify-between items-start mb-4"> <div> <h3 class="text-2xl font-bold flex items-center gap-2"> <i data-lucide="book" class="w-4 h-4 text-matte"></i> Free Dictionary API </h3> <p class="text-matte font-medium mt-1">Get definitions and audio pronunciation.</p> </div> <span class="bg-cream border-2 border-matte px-3 py-1 text-sm font-bold text-accent2 flex items-center gap-1"> <i data-lucide="unlock" class="w-4 h-4"></i> No Key Needed </span> </header> <div class="bg-cream border-2 border-matte p-4 mt-auto"> <h4 class="font-bold flex items-center gap-2 mb-2"> <i data-lucide="lightbulb" class="w-4 h-4 text-accent3"></i> Idea to Build </h4> <p>A flashcard app for people learning a new language. You type a word, and it automatically fills in the meaning and how to say it.</p> </div> </article> </div> </section>  <section id="finance" class="scroll-mt-24"> <div class="flex items-center gap-4 mb-8"> <i data-lucide="trending-up" class="w-8 h-8 text-accent2"></i> <h2 class="text-4xl font-extrabold">3. Data & Finance</h2> </div> <p class="text-xl mb-8 max-w-3xl">Get real numbers. Use these tools to track prices, see if a stock is doing well, or find out what is inside a food product.</p> <div class="grid md:grid-cols-3 gap-8">  <article class="bg-white border-2 border-matte shadow-flat p-6 hover:-translate-y-1 transition-transform"> <div class="w-10 h-10 bg-cream border-2 border-matte flex items-center justify-center mb-4"> <i data-lucide="line-chart" class="w-5 h-5 text-accent1"></i> </div> <h3 class="text-xl font-bold mb-2">Yahoo Finance</h3> <p class="text-matte mb-4">Get the price of stocks, see past history, and track companies.</p> <div class="bg-cream p-3 border-2 border-matte text-sm"> <strong class="text-matte block mb-1">Project Idea:</strong> A simple red/green dashboard that shows if your 3 favorite companies went up or down today. </div> </article>  <article class="bg-white border-2 border-matte shadow-flat p-6 hover:-translate-y-1 transition-transform"> <div class="w-10 h-10 bg-cream border-2 border-matte flex items-center justify-center mb-4"> <i data-lucide="coins" class="w-5 h-5 text-accent2"></i> </div> <h3 class="text-xl font-bold mb-2">Exchange Rate</h3> <p class="text-matte mb-4">See how much money is worth in different countries right now.</p> <div class="bg-cream p-3 border-2 border-matte text-sm"> <strong class="text-matte block mb-1">Project Idea:</strong> A travel app where you type in an amount in your money, and it tells you exactly what you can buy with it in Japan. </div> </article>  <article class="bg-white border-2 border-matte shadow-flat p-6 hover:-translate-y-1 transition-transform"> <div class="w-10 h-10 bg-cream border-2 border-matte flex items-center justify-center mb-4"> <i data-lucide="apple" class="w-5 h-5 text-accent3"></i> </div> <h3 class="text-xl font-bold mb-2">Open Food Facts</h3> <p class="text-matte mb-4">Send a barcode number, get back what ingredients are inside.</p> <div class="bg-cream p-3 border-2 border-matte text-sm"> <strong class="text-matte block mb-1">Project Idea:</strong> An app that scans a candy bar and tells you exactly how many spoons of sugar are inside it. </div> </article> </div> </section>  <section id="backend" class="scroll-mt-24"> <div class="flex items-center gap-4 mb-8"> <i data-lucide="database" class="w-8 h-8 text-matte"></i> <h2 class="text-4xl font-extrabold">4. The Backend Builders</h2> </div> <p class="text-xl mb-8 max-w-3xl">Don't want to set up a complicated server? Use these tools to save data, send emails, and process files automatically.</p> <div class="bg-white border-2 border-matte shadow-flat overflow-hidden"> <div class="grid md:grid-cols-2 divide-y-2 md:divide-y-0 md:divide-x-2 divide-matte"> <div class="p-8"> <h3 class="text-2xl font-bold flex items-center gap-3 mb-4"> <i data-lucide="save" class="w-6 h-6 text-accent1"></i> Pantry API </h3> <p class="text-lg mb-6">Need a place to save data but don't want to learn how to build a database? Pantry gives you a free bucket on the internet to store text and data (up to 100MB).</p> <div class="bg-cream border-2 border-matte p-4 inline-block font-mono text-sm font-bold"> Free Tier: 100MB of JSON Data </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold flex items-center gap-3 mb-4"> <i data-lucide="mail" class="w-6 h-6 text-accent3"></i> Resend API </h3> <p class="text-lg mb-6">Sending emails from an app used to be very hard and messy. Resend makes it simple. You just tell it "Send this text to this email address," and it works.</p> <div class="bg-cream border-2 border-matte p-4 inline-block font-mono text-sm font-bold"> Free Tier: Send 3,000 emails per month </div> </div> <div class="p-8 border-t-2 border-matte"> <h3 class="text-2xl font-bold flex items-center gap-3 mb-4"> <i data-lucide="credit-card" class="w-6 h-6 text-accent2"></i> Stripe API </h3> <p class="text-lg mb-6">The safest and easiest way to accept money on the internet. You can set up a checkout page to sell a product in minutes.</p> <div class="bg-cream border-2 border-matte p-4 inline-block font-mono text-sm font-bold"> Fee: They take a small cut only when you sell </div> </div> <div class="p-8 border-t-2 border-matte bg-cream"> <h3 class="text-2xl font-bold flex items-center gap-3 mb-4"> <i data-lucide="refresh-cw" class="w-6 h-6 text-accent4"></i> CloudConvert API </h3> <p class="text-lg mb-6">A robot that changes files. Send it a Word document, and ask for a PDF back. Send an image, and ask it to make it smaller.</p> <div class="bg-white border-2 border-matte p-4 inline-block font-mono text-sm font-bold shadow-flat"> Free Tier: 25 minutes of changing files per day </div> </div> </div> </div> </section>  <section id="build" class="scroll-mt-24 py-12"> <div class="bg-accent1 text-white border-2 border-matte shadow-flat p-8 md:p-12"> <div class="flex items-center gap-4 mb-6"> <i data-lucide="hammer" class="w-10 h-10 text-cream"></i> <h2 class="text-4xl md:text-5xl font-extrabold">The Master Skill: Stacking</h2> </div> <p class="text-xl md:text-2xl mb-12 max-w-3xl font-medium"> Do not just build an app that does one thing. The best projects take two different tools and smash them together. Here is how you do it. </p>  <div class="mb-12 relative pl-8 border-l-4 border-white"> <div class="absolute -left-[14px] top-0 w-6 h-6 bg-accent3 border-2 border-matte rounded-full"> </div> <h3 class="text-2xl font-bold mb-2">Blueprint 1: The Smart Travel Planner</h3> <div class="flex flex-col md:flex-row gap-4 mt-4 text-matte"> <div class="bg-cream p-4 border-2 border-matte shadow-flat flex-1"> <span class="font-bold text-accent1 block mb-1">Step A: GeoCode API</span> Takes the name "Paris" and finds the exact map coordinates. </div> <div class="hidden md:flex items-center justify-center text-white"> <i data-lucide="plus" class="w-8 h-8"></i> </div> <div class="bg-cream p-4 border-2 border-matte shadow-flat flex-1"> <span class="font-bold text-accent1 block mb-1">Step B: OpenWeather API</span> Takes those coordinates and looks at the sky right now. </div> <div class="hidden md:flex items-center justify-center text-white"> <i data-lucide="arrow-right" class="w-8 h-8"></i> </div> <div class="bg-accent2 p-4 border-2 border-matte shadow-flat flex-1 text-white font-bold"> Result: You type "Paris" and it instantly tells you if you need an umbrella today. </div> </div> </div>  <div class="relative pl-8 border-l-4 border-white"> <div class="absolute -left-[14px] top-0 w-6 h-6 bg-accent4 border-2 border-matte rounded-full"> </div> <h3 class="text-2xl font-bold mb-2">Blueprint 2: The Fast News Reader</h3> <div class="flex flex-col md:flex-row gap-4 mt-4 text-matte"> <div class="bg-cream p-4 border-2 border-matte shadow-flat flex-1"> <span class="font-bold text-accent1 block mb-1">Step A: World News API</span> Grabs the top 10 longest news articles published today. </div> <div class="hidden md:flex items-center justify-center text-white"> <i data-lucide="plus" class="w-8 h-8"></i> </div> <div class="bg-cream p-4 border-2 border-matte shadow-flat flex-1"> <span class="font-bold text-accent1 block mb-1">Step B: AI Summarizer API</span> Reads long text and deletes all the fluff, leaving only 3 bullet points. </div> <div class="hidden md:flex items-center justify-center text-white"> <i data-lucide="arrow-right" class="w-8 h-8"></i> </div> <div class="bg-accent2 p-4 border-2 border-matte shadow-flat flex-1 text-white font-bold"> Result: An app that lets you read the whole world's news in under 60 seconds. </div> </div> </div> </div> </section>  <section class="scroll-mt-24 bg-white border-2 border-matte p-8 shadow-flat"> <h2 class="text-3xl font-extrabold mb-8 border-b-2 border-matte pb-4 flex items-center gap-3"> <i data-lucide="clipboard-check" class="w-8 h-8 text-accent2"></i> Pro Tips Before You Start </h2> <div class="grid md:grid-cols-2 gap-8"> <div class="flex gap-4 items-start"> <div class="w-10 h-10 shrink-0 bg-accent3 text-white border-2 border-matte flex items-center justify-center font-bold"> 1</div> <div> <h4 class="text-xl font-bold mb-2">Check Rate Limits</h4> <p class="text-matte">"Rate limits" are rules on how fast you can ask for data. If a tool says "60 calls a minute," and you ask 61 times, they will block you for a while. Always read the rules.</p> </div> </div> <div class="flex gap-4 items-start"> <div class="w-10 h-10 shrink-0 bg-accent1 text-white border-2 border-matte flex items-center justify-center font-bold"> 2</div> <div> <h4 class="text-xl font-bold mb-2">Hide Your Keys</h4> <p class="text-matte">Many APIs give you a secret password called an API Key. <strong class="text-accent3">Never put this key in public code</strong> where anyone can see it. Treat it like your credit card pin number.</p> </div> </div> <div class="flex gap-4 items-start"> <div class="w-10 h-10 shrink-0 bg-accent4 text-white border-2 border-matte flex items-center justify-center font-bold"> 3</div> <div> <h4 class="text-xl font-bold mb-2">Read the JSON</h4> <p class="text-matte">Data usually comes back in a format called JSON. It looks scary, but it is just a list. Use tools online to format the JSON so you can see exactly where the title, image, and text are stored.</p> </div> </div> <div class="flex gap-4 items-start"> <div class="w-10 h-10 shrink-0 bg-accent2 text-white border-2 border-matte flex items-center justify-center font-bold"> 4</div> <div> <h4 class="text-xl font-bold mb-2">Start Small</h4> <p class="text-matte">Do not try to build a massive project on day one. Just try to get one word or one picture to show up on your screen. Once that works, build the rest of the house.</p> </div> </div> </div> </section> </main>  <footer class="bg-matte text-white py-12 border-t-4 border-accent1"> <div class="max-w-7xl mx-auto px-4 text-center"> <div class="flex items-center justify-center gap-2 font-bold text-2xl tracking-tight mb-6"> <i data-lucide="layers" class="w-6 h-6 text-accent1"></i> <span>getbetterat.work</span> </div> <p class="text-gray-400 font-medium mb-8 max-w-md mx-auto"> A professional knowledge resource dedicated to helping you work smarter, build faster, and stop reinventing the wheel. </p> <div class="font-mono text-sm text-gray-500"> © 2026 getbetterat.work. Built for high-performing professionals. </div> </div> </footer>  <script> lucide.createIcons(); </script> </body> </html>