Skip to content
Use casesAPI integration projects

Learn API integration by building projects

Connect to real APIs and build portfolio-ready apps. Practice fetch, JSON handling, and error states with beginner-to-advanced challenges.

Start building free

Join 1,092,273 developers building projects, reviewing code, and helping each other improve.

Testimonials

"I highly recommend Frontend Mentor. Skip the search for project ideas and dive into ready-made challenges that help you level up as a developer."

Kevin PowellWeb Developer & YouTuber

"Frontend Mentor is a win-win. You can sharpen your skills building websites and add finished projects to your portfolio to help land a job!"

Jessica ChanWeb Developer & YouTuber

Learn by integrating with different APIs

You’ll build against real briefs and professional designs while integrating with live APIs, practicing fetch, routing, and state management. Share your solution, get feedback, and ship work you can proudly add to your portfolio.

How to get started with API integration projects

  1. Pick a project below that matches your current skill level.

  2. Build it from scratch—don’t just copy-paste code. Make it your own.

  3. Push to GitHub and share your work.

  4. Iterate: Add features, refactor your code, try different approaches.

  5. Want feedback? Submit your project for community review on Frontend Mentor.

Beginner API projects

Start simple and build confidence. Make your first requests, render JSON, and handle loading/error states.

  • Free

    Advice generator app

    • HTML
    • CSS
    • JS
    • API
    2junior

    The perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.

  • Premium

    GitHub user search app

    • HTML
    • CSS
    • JS
    • API
    2junior

    In this project, you'll use the GitHub users API to pull profile data and display it. It's a great challenge if you're looking to practice working with a 3rd-party API.

Intermediate API projects

Build larger, fully-functional projects using real data. Learn how to use data from different sources to build a working application.

  • Free

    URL shortening API landing page

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    Integrate with the Clean URI link shortening API and play with browser storage in this landing page challenge.

  • Premium

    Dictionary web app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    In this project, you'll integrate with the Dictionary API to create a real-world dictionary web app. Additional tests include colour themes and font selection.

  • Free+

    Weather app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    Build a responsive weather app with search functionality, unit conversion, and detailed forecasts using the Open-Meteo API.

  • Free

    IP Address Tracker

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    In this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.

  • Premium

    Clock app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    This challenge will have you working with external APIs to set data based on a visitor's location. You'll also be using logic to set content depending on the time of day.

  • Free

    REST Countries API with color theme switcher

    • HTML
    • CSS
    • JS
    • API
    4advanced

    If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.

Why Frontend Mentor for API projects?

We're not just another tutorial site. Our approach is proven to help developers build real skills that translate directly to job requirements.

  • Professional designs included

    Skip the design phase and focus on coding. Every project comes with Figma files and style guides from professional designers.

  • Code reviews & feedback

    Get constructive feedback from our community of 1,000,000+ developers. Learn best practices and improve your code quality.

  • Portfolio-ready projects

    Every completed project can be added to your portfolio with live demos and GitHub repos that impress recruiters.

Frequently Asked Questions

  • What are API integration projects?

    API integration projects involve building applications that fetch and display data from external APIs (Application Programming Interfaces). These projects teach you to make HTTP requests, handle asynchronous JavaScript, work with JSON data, and manage loading and error states. Common examples include weather apps, currency converters, and news aggregators.

  • What should I learn before starting API projects?

    Before tackling API projects, you should understand JavaScript fundamentals, including DOM manipulation, event handling, arrays, and objects. Familiarity with ES6+ features, such as arrow functions, template literals, and destructuring, is helpful. You should also be comfortable with basic HTML and CSS to display the data you fetch effectively.

  • How do I practice API integration skills?

    The best way to practice API integration is by building real projects that fetch and display live data. Start with free, public APIs that don't require authentication, and then progress to APIs that require API keys. Frontend Mentor's API integration challenges provide professional designs and realistic requirements, helping you build portfolio-ready projects while mastering async JavaScript.

  • What is fetch() in JavaScript and how do I use it?

    The fetch() function is JavaScript's modern way to make HTTP requests to APIs. It returns a Promise that resolves with the response data. Basic usage involves calling fetch with a URL, then using .then() or async/await to handle the response. Frontend Mentor's API projects help you master fetch() through hands-on practice with real-world scenarios.

  • How do I handle API errors in my projects?

    Proper error handling includes checking response status codes, catching network errors, and displaying user-friendly error messages. Use try-catch blocks with async/await or .catch() with promises. Good practice also includes handling loading states, timeouts, and rate limits. Frontend Mentor projects teach these professional patterns through realistic challenges.

  • Do Frontend Mentor API projects use real APIs?

    Yes, Frontend Mentor API projects use real, publicly available APIs. Some challenges use free APIs without authentication, while others incorporate API keys to teach proper credential handling. This real-world approach ensures you're learning practical skills that translate directly to professional development work.

  • Can I complete API projects without a backend?

    Yes, many API projects work entirely in the frontend using public APIs. You don't need to build a backend to practice API integration. However, some advanced projects may require a simple backend to securely store API keys. Frontend Mentor's API challenges are designed to teach frontend integration skills without requiring backend development knowledge.

Join 1,092,273 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in

Related pages

JavaScript projects

Learn JavaScript by building real projects. From beginner-friendly mini projects and API work all the way up to fully-functional multi-page web apps.

Beginner JavaScript projects

Stop just taking tutorials and start coding! Learn JavaScript faster by building real projects. Explore fun, beginner-friendly JavaScript challenges to practice and boost your skills.