Understanding the Concept: Backend, Frontend, and APIs

Imagine you’re at a restaurant.

• You (the customer) represent the frontend — the visible part of the app (like a website or mobile app) that people interact with.

• The kitchen is the backend — it prepares the food (data or logic) but is hidden from view.

• The waiter is the API — the messenger who takes your order (request) to the kitchen (backend) and brings the food (response) back to you.

That’s how APIs work — they connect the frontend and backend.

 Narrative: A Real-Life App Example (Food Delivery App)

Let’s say we are building a food delivery app like Uber Eats. When a user opens the app:

 Step 1: User Interacts with the Frontend

The user types in their location and taps "Search Restaurants".
This action triggers the frontend (React, Flutter, etc.) to call an API endpoint, for example:

GET /api/restaurants?location=Lagos

 Step 2: API Communicates with the Backend

The API receives the request and passes it to the backend (written in Node.js, Python/Django, Laravel, etc.).

The backend now:

• Looks up all restaurants available in Lagos.

• Pulls the data from the database.

• Prepares a response in JSON format.

Example JSON response:

[
  {
    "name": "Mama Put Delight",
    "category": "Local Food",
    "rating": 4.5,
    "delivery_fee": 300
  },
  {
    "name": "Jollof Republic",
    "category": "African Cuisine",
    "rating": 4.8,
    "delivery_fee": 500
  }
]

 Step 3: Backend Sends Data via API to the Frontend

The backend sends the above data back to the API, which then returns it to the frontend.

 Step 4: Frontend Displays the Information

Now, the frontend takes this JSON response and renders it visually — showing each restaurant in a list or card layout.

<div class="restaurant">
  <h3>Mama Put Delight</h3>
  <p>Category: Local Food</p>
  <p>Rating: 4.5 ⭐</p>
</div>

 Other Common Examples of Backend-Driven API Calls

1. User Login

   • Frontend: User submits username and password.

   • API: POST /api/login

   • Backend: Validates credentials and returns a token if successful.

2. Posting a Blog

   • Frontend: User writes a blog and clicks "Publish".

   • API: POST /api/blogs

   • Backend: Saves the blog to the database and returns a success message.

3. Chat App

   • Frontend: User sends a message.

   • API: POST /api/messages

   • Backend: Stores the message and pushes it to the recipient via WebSocket or API call.

 Key Takeaways

• The backend holds the data and logic.

• The frontend presents the data and lets users interact with it.

• APIs are the bridge — allowing the frontend and backend to talk to each other.

• Data usually moves in JSON format — lightweight and easy to use.

Tools Commonly Used

 Finally

APIs are like digital bridges that let your app deliver powerful, dynamic experiences. Without APIs, the frontend would be static and blind to all the magic happening behind the scenes.