🌐 API Integration Patterns

A simple and complete guide to connecting your frontend with your backend.

🧠 What Does API Integration Mean?

When you build a frontend (like a React app), it needs to talk to a backend (like a FastAPI or Node.js server).
This communication happens through APIs (Application Programming Interfaces).

API integration means:

• Sending data (like a login form or a task)
• Receiving data (like a task list)
• Handling errors and loading states
• Keeping the UI and server data in sync

Think of it like a conversation between your app and the server — both must understand each other clearly.

⚙️ 1. HTTP Client Configuration

🔹 Why It Matters

When your app makes hundreds of API calls (like /login, /tasks, /profile), you don’t want to rewrite the same fetch or axios code everywhere.
Instead, you create a reusable HTTP client.

This ensures:

• All requests use the same base URL
• Headers like Content-Type are automatically added
• You can log or handle errors globally

🔹 Example: Setting Up Axios Client

// apiClient.js
import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://api.tasktracker.com",  // Your API domain
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
  },
});

// Log every error
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error("API Error:", error.response?.status);
    return Promise.reject(error);
  }
);

export default apiClient;

Now, this client can be used everywhere in your project.

// taskAPI.js
import apiClient from "./apiClient";

export async function fetchTasks() {
  const response = await apiClient.get("/tasks");
  return response.data;
}

✅ Benefits:

• No repeating setup code
• Easier debugging
• Cleaner API management

💡 Real-World Example: Companies like GitHub use the same centralized Axios client to handle thousands of endpoints reliably.

⚠️ 2. Error Handling Strategies

🔹 Why It’s Needed

APIs can fail for many reasons —

• Internet disconnects
• Wrong login credentials
• Server crash

If your app doesn’t handle these, it’ll just break or show a blank screen.

🔹 Example: Handling API Errors

import apiClient from "./apiClient";

export async function getUserProfile() {
  try {
    const res = await apiClient.get("/user/profile");
    return res.data;
  } catch (error) {
    if (!error.response) {
      console.error("Network issue, please check your internet!");
    } else if (error.response.status === 404) {
      console.warn("User not found!");
    } else if (error.response.status === 500) {
      console.warn("Server error, try again later.");
    }
    throw error;
  }
}

💡 Real-World Example: If Twitter’s API fails because you hit a rate limit (too many requests), it returns a 429 Too Many Requests error — the app catches this and shows “Try again later”.

🔹 Tips for Error Handling

✅ Pro Tip: Always use try/catch around API calls, and show friendly error messages — never leave the user confused.

⏳ 3. Loading States Management

🔹 Why It’s Important

If you click “Load Tasks” and nothing happens for 3 seconds, you’ll think the app is frozen. Loading indicators tell users the app is working, not broken.

🔹 Example: Simple Loading Logic

import { useEffect, useState } from "react";
import { fetchTasks } from "./taskAPI";

export default function TaskList() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchTasks()
      .then((data) => setTasks(data))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading tasks...</p>;
  if (!tasks.length) return <p>No tasks yet!</p>;

  return (
    <ul>
      {tasks.map((t) => (
        <li key={t.id}>{t.title}</li>
      ))}
    </ul>
  );
}

✅ Good Pattern:

• Always show a “Loading…” or spinner while waiting.
• Use .finally() to stop loading no matter what happens (success or error).

💡 Real-World Example: Netflix uses “skeleton loaders” (gray boxes) while the video list is fetched — it makes the experience feel instant.

🔁 4. Data Synchronization

🔹 What It Means

Imagine two people editing the same Trello board. When one adds a card, the other should see it instantly — that’s data synchronization.

🔹 Option 1: Polling (simple and reliable)

Your app automatically fetches new data every few seconds.

function useAutoRefresh(interval = 5000) {
  useEffect(() => {
    const id = setInterval(() => {
      fetchTasks();
    }, interval);
    return () => clearInterval(id);
  }, []);
}

✅ Works for small apps — it’s simple and reliable.

🔹 Option 2: WebSockets (real-time updates)

For real-time synchronization like chat apps:

const socket = new WebSocket("wss://api.tasktracker.com/tasks");

socket.onmessage = (event) => {
  const updatedTask = JSON.parse(event.data);
  console.log("New update:", updatedTask);
};

💡 Real-World Example: Trello and Slack use WebSockets so updates appear instantly without refreshing the page.

🔹 Option 3: Background Sync (for mobile/web apps)

You can also use Service Workers or background tasks to sync data even when offline.

💡 Example: When you send a message in WhatsApp Web offline, it gets delivered automatically once the internet is back.

🔐 5. Authentication Headers

🔹 Why It’s Needed

Most APIs are private — you need to prove who you are. Authentication headers (like JWT tokens) help the backend verify your identity.

🔹 Example: Add Token to Every Request

import apiClient from "./apiClient";

apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem("access_token");
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

Now every request automatically includes your token, no need to manually add it.

💡 Real-World Example: Spotify sends an OAuth2 Bearer Token with each request to fetch your playlists securely.

🔹 Security Best Practices

📘 Summary

💡 Final Takeaway

APIs are like conversations — the better you structure them, the smoother the experience.

Building a strong integration pattern means your app:

• Handles all errors safely
• Feels smooth even on slow networks
• Stays up-to-date automatically
• Keeps data secure

These same principles power apps like Netflix, Trello, Spotify, and Slack — making them both fast and reliable.