How does REST API work? (duplicate image)

[Asad4540]

The same image is hosted twice in this article

[bhatt396]

The easiest way to understand a REST API is to think of a waiter in a restaurant."

You (The Client): Sitting at the table looking at the menu. You know what you want, but you can’t just walk into the kitchen and grab the food yourself.

The Kitchen (The Backend/Database): Holds all the ingredients and prepares the data, but it doesn't talk to customers directly.

The Waiter (The REST API): Takes your specific order (Request), walks it back to the kitchen, tells the chef exactly what to make, grabs the prepared plate, and delivers it back to your table (Response).

2. The Technical Blueprint (How it Works Step-by-Step)
   When a frontend application (like React) needs data from a backend server, it follows a strict 4-step sequence using the HTTP protocol:

Plaintext

[ React Frontend ] ────── (HTTP Request: Method + URL + Headers) ─────► [ Express Backend ]
[ (Client) ] ◄───── (HTTP Response: Status Code + JSON Body) ─── [ (Server) ]
Step 1: The Request (The Client Speaks)
The client sends an HTTP packet containing four core pieces of information:

The URL (Endpoint): The path specifying the resource (e.g., https://api.internhub.com/v1/jobs).

The HTTP Method (The Action Verb): What do you want to do with that resource?

GET: Fetch data (Read)

POST: Create new data (Write)

PUT / PATCH: Update existing data

DELETE: Remove data

Headers: Metadata about the request (e.g., Content-Type: application/json or an Authorization: Bearer security key).

Body: The actual payload payload string data (mostly used in POST and PUT requests, like a JSON object containing a user's password and email).

Step 2: Processing (The Server Acts)
The server intercepts the request, looks at the HTTP method and URL path, validates the authentication headers, and queries the database to grab or alter the requested data block.

Step 3: The Response (The Server Answers)
The server packages the result back up into an HTTP response packet containing:

A Status Code: A 3-digit number telling the client if the request succeeded or failed:

200 OK: Success!

201 Created: Successfully wrote new data.

400 Bad Request: Frontend sent broken data.

401 Unauthorized: Missing or invalid security keys.

500 Internal Server Error: The backend code crashed.

The Body: The actual resource requested, almost always formatted as a clean JSON (JavaScript Object Notation) string object.

3. The Structural Constraints (What makes an API "RESTful"?)
   An API isn't just "REST" because it uses HTTP. It must follow architectural constraints defined by computer scientist Roy Fielding. The three most important rules to highlight are:

A. Client-Server Separation
The user interface (Frontend) and the data storage system (Backend) are completely independent. You can rewrite your entire React frontend into a mobile Swift iOS app, and as long as the mobile app hits the exact same API URLs, the backend doesn't care.

B. Statelessness
This is the big one. Every single request from a client must contain all the information necessary to understand and process that request. The server does not remember past requests. It doesn't say, "Oh, I remember you from 5 seconds ago." This is why we pass a JWT token in the header of every request—so the server can authorize the user on the spot, stateless, allowing the backend to scale across thousands of load-balanced servers effortlessly.

C. Cacheability
Responses must explicitly state whether they can be cached by the browser or not. This stops the frontend from making unnecessary identical network requests for data that rarely changes (like a country list or a company logo).

[Asad4540]

Hey @bhatt396

Thank for the info but the actual issue here was the image was hosted twice and that particular article and i was highlighting that and not actually want to know how rest api works... 😁