Understanding APIs

APIs (Application Programming Interfaces) are the invisible glue that connects the apps and websites we use daily with the data and services behind the scenes. In this blog, I’ll take you through:

• What APIs really are, in simple and technical terms

• How APIs work with a live example of a popular Indian website

• Practical coding examples I worked on, using public APIs

• Step-by-step explanation of my code to help you build similar projects

---

What Is an API? The Concept Simplified

Imagine you’re at a restaurant. You sit at your table (this is your app or browser). You look at the menu and decide what you want. But you don’t go to the kitchen yourself — you call the waiter (the API), who takes your order to the kitchen (the server and database). The kitchen prepares your food and the waiter brings it back to you.

In tech terms:

• Consumer (App or Browser): This is you, requesting some data or service.

• API (Waiter): The messenger that sends your request to the server and brings back the response.

• Producer (Server Application + Database): The kitchen that stores and processes data, then returns the requested information.

• JSON (Data Format): The packaged meal — a lightweight, easy-to-understand format that apps and browsers can quickly consume and display.

APIs allow apps to talk to servers and databases efficiently, sending only what’s needed, often in JSON format, which makes the entire data exchange fast and seamless.

---

How APIs Work — Example Using Flipkart

Let us say you open the Flipkart app and search for "smartphones." Here’s what happens behind the scenes:

1. Your Request:
   The Flipkart app sends an API request to its server asking for a list of smartphones.

2. Server Processing:
   The server queries its database to find smartphones, packages that data in JSON, and sends it back.

3. Your App Receives Data:
   Your app parses this JSON, extracts product details like name, price, and images, then displays the results on your screen.

4. Dynamic Filtering:
   When you filter by brand or price, the app sends new API requests, quickly updating your product list without reloading the page.

This interaction is powered entirely by APIs, making your user experience smooth and responsive.

---

My Hands-On Coding Projects Using Public APIs

To solidify my understanding, I worked on two exciting mini-mini projects using public APIs:

1. Displaying Jewelry Products from the Fake Store API

2. Showing Mars Rover Photos from NASA’s API

Both projects involved fetching JSON data from the APIs and dynamically rendering content on the web page using JavaScript.

---

1. Jewelry Products Card Display

What I Did:

• Fetched jewelry product data from the Fake Store API

• Created product cards dynamically using JavaScript

• Showed product ID, image, truncated description, price, and rating

• Added a hover effect to “pop out” the card and show the full description

Code link

Key Code Snippet:

async function loadData() {
    try {
        const URL = 'https://fakestoreapi.com/products/category/jewelery';
        const response = await fetch(URL);
        const data = await response.json();

        data.forEach((element) => {
            const card = document.createElement("div");
            card.className = "card";

            const divId = document.createElement("div");
            const divDescription = document.createElement("div");
            const divPrice = document.createElement("div");
            const divRating = document.createElement("div");
            const divImage = document.createElement("div");

            divId.textContent = "ID: " + element.id;
            divDescription.textContent = element.description.substring(0, 60) + "...";
            divPrice.textContent = "Price: ₹" + element.price;
            divRating.textContent = "Rating: " + element.rating.rate;

            const img = document.createElement("img");
            img.src = element.image;
            divImage.appendChild(img);

            card.appendChild(divId);
            card.appendChild(divImage);
            card.appendChild(divDescription);
            card.appendChild(divPrice);
            card.appendChild(divRating);

            document.getElementById("card-box").appendChild(card);
        });
    } catch (error) {
        console.log("API ERROR", error);
    }
}

Explanation:

• The fetch function calls the API URL and returns a JSON response.

• For each product, I create a card with relevant info and an image.

• The description is shortened to keep the card clean, but on hover, the card can pop out and show the full description using CSS effects.

• The whole page is dynamically generated based on real data — no hard-coded HTML.

---

2. NASA Mars Rover Photos Table

What I Did:

• Used NASA’s Mars Rover Photos API to fetch images taken by Curiosity rover on sol 1000

• Created a table displaying photo ID, a preview image, camera name, and rover name

Code link

Key Code Snippet:

async function loadData() {
    try {
        const URL = 'https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY';
        const response = await fetch(URL);
        const data = await response.json();

        data.photos.forEach((details) => {
            const tr = document.createElement("tr");

            const tdID = document.createElement("td");
            const tdPreview = document.createElement("td");
            const tdCameraName = document.createElement("td");
            const tdRoverName = document.createElement("td");

            tdID.textContent = details.id;

            const img = document.createElement("img");
            img.src = details.img_src;
            img.width = 100;
            img.height = 100;
            tdPreview.appendChild(img);

            tdCameraName.textContent = details.camera.name;
            tdRoverName.textContent = details.rover.name;

            tr.appendChild(tdID);
            tr.appendChild(tdPreview);
            tr.appendChild(tdCameraName);
            tr.appendChild(tdRoverName);

            document.querySelector("tbody").appendChild(tr);
        });
    } catch (error) {
        console.log("API error", error);
    }
}

Explanation:

• Again, fetch requests data and returns JSON.

• For each photo, I create a table row with photo ID, a small preview image, and camera/rover names.

• Images are set to a fixed size to keep the UI clean.

• This table is fully dynamic, showing live data from NASA’s API.

---

What I Learned and Why It Matters

• APIs are the backbone of modern web and app development, allowing easy, efficient data exchange.

• JSON is the standard data format that makes this exchange lightweight and fast.

• Asynchronous calls (fetch with async/await) let us load data without freezing the page.

• Dynamic DOM manipulation lets us build rich, data-driven UI on the fly.

• Practical projects bring classroom concepts to life and deepen understanding.

---

Check Out My Projects

You can explore the full code and projects on my GitHub repo here:
https://github.com/alokgupta/full-stack-developer

---

Final Thoughts

Understanding APIs and getting hands-on with them is a game changer. Whether you want to build your own apps or simply understand how the websites you love work, APIs are essential knowledge. I’m excited to keep learning and building more complex integrations.

Thanks for reading! Feel free to reach out if you want help with your own API projects or want to discuss more about web development.

---

Happy coding! 🚀