๐Ÿ”Œ Developer Guide

What is an API?
The Complete Guide 2026

APIs power every app you use โ€” Swiggy, Instagram, Paytm. Learn how they work, how to build them, and how to use them like a pro.

๐Ÿ“… March 2026 โฑ 20 min read ๐Ÿ‘ค CIWeb
๐ŸŸข 10 Core Concepts
๐Ÿ”ต Live API Tester
๐ŸŸฃ API Quiz
How an API Request Flows โ†“
๐Ÿ“ฑ
Client
Your App
HTTP Request
โ–ถ
๐Ÿ”Œ
API
Gateway
Query
โ–ถ
๐Ÿ–ฅ๏ธ
Server
Logic
Data
โ—€
๐Ÿ—„๏ธ
Database
Store
GET /api/v1/users โ†’ 200 OK โ†’ {data: [...]}
Contents
1What is an API?
๐Ÿ”Œ

API โ€” Application Programming Interface

The bridge between every app and service you use
Beginner

An API is a set of rules that lets two applications talk to each other. You don't need to know how the other app works internally โ€” you just call the API and get back data.

๐Ÿฝ๏ธ The Restaurant Analogy

You = Your App  |  Waiter = API  |  Kitchen = Server  |  Menu = API Docs

Real world examples: Swiggy โ†’ restaurant menu API. UPI โ†’ payment gateway API. Google Login โ†’ OAuth API. Weather app โ†’ weather service API. Everything is APIs.

๐ŸŒ APIs You Use Every Day
  • Swiggy / Zomato โ€” Restaurant data, GPS tracking, payment โ€” all separate APIs
  • Instagram โ€” Post upload, like, comment, follow โ€” all API calls
  • Google Maps โ€” Embed maps in any app with just 3 lines of code
  • ChatGPT / Gemini โ€” Add AI to your apps via simple API calls
2How APIs Work โ€” Step by Step
โš™๏ธ

The Complete Request โ†’ Response Cycle

What happens in milliseconds when you click anything
Beginner
1Client makes a request: Your app sends an HTTP request to an API endpoint URL
2Request travels: Contains HTTP method, headers (auth tokens), and optionally request body
3Server processes: Checks auth, validates data, runs business logic, queries database
4Server responds: Returns JSON data with HTTP status code (200 OK, 404 Not Found, 500 Error)
5Client displays: Your app reads the JSON and renders it for the user
COMPLETE API CALL EXAMPLE
// 1. Make a GET request to fetch user data $ curl -X GET "https://api.example.com/users/42" \ -H "Authorization: Bearer eyJhbGci..." \ -H "Content-Type: application/json" // 2. Server responds with JSON { "status": 200, "data": { "id": 42, "name": "Rahul Kumar", "email": "rahul@example.com", "city": "Mumbai" } } // Response time: 142ms โœ“

JSON โ€” The Universal Language of APIs: Almost all modern APIs communicate using JSON โ€” text organized as key:value pairs.

3REST APIs โ€” The Most Popular Standard
๐ŸŒ

REST โ€” Representational State Transfer

~80% of all public APIs are REST APIs
Intermediate

REST is a set of architectural principles for designing APIs. REST APIs use standard HTTP methods and clean URLs to operate on resources.

๐Ÿ“ REST Resources = Files in a Folder

Think of your API like a filing system. /users is a folder. /users/42 is one file. GET=read, POST=create, PUT=update, DELETE=remove.

REST ENDPOINTS โ€” USERS RESOURCE
GET /api/users โ†’ Get all users GET /api/users/42 โ†’ Get user with ID 42 POST /api/users โ†’ Create a new user PUT /api/users/42 โ†’ Replace user 42 entirely PATCH /api/users/42 โ†’ Update part of user 42 DELETE /api/users/42 โ†’ Delete user 42 // Nested resources: GET /api/users/42/orders โ†’ All orders by user 42 GET /api/users/42/orders/7 โ†’ Order 7 by user 42

REST's 6 Principles: Stateless ยท Client-Server ยท Uniform Interface ยท Cacheable ยท Layered System ยท Code on Demand.

4HTTP Methods โ€” The Verbs of APIs
๐Ÿ“‹

GET, POST, PUT, PATCH, DELETE

The 5 methods that power every API interaction
Beginner
GET
Retrieve data from server
๐Ÿ“– Read-only
POST
Send new data to server
โœ๏ธ Create new
PUT
Replace entire resource
๐Ÿ”„ Full update
PATCH
Update part of a resource
โœ‚๏ธ Partial update
DELETE
Remove a resource
๐Ÿ—‘๏ธ Remove
METHODS IN JAVASCRIPT
// GET โ€” Fetch data const res = await fetch('/api/users'); const data = await res.json(); // POST โ€” Create new user await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Rahul', email: 'r@g.com' }) }); // PATCH โ€” Update only name await fetch('/api/users/42', { method: 'PATCH', body: JSON.stringify({ name: 'Rahul Kumar' }) }); // DELETE await fetch('/api/users/42', { method: 'DELETE' });

โš ๏ธ PUT vs PATCH: PUT replaces the ENTIRE resource. PATCH only updates fields you send. Always prefer PATCH for partial updates!

5HTTP Status Codes
๐Ÿšฆ

200? 404? 500? What Do They Mean?

Every API response has a status code
Beginner

Status codes are 3-digit numbers grouped by first digit: 2xx=success, 3xx=redirect, 4xx=client error, 5xx=server error.

200
OKRequest succeeded
201
CreatedNew resource created
204
No ContentSuccess, nothing returned
301
Moved PermanentlyURL changed forever
304
Not ModifiedUse cached version
400
Bad RequestInvalid data sent
401
UnauthorizedLogin required
403
ForbiddenNo permission
404
Not FoundResource doesn't exist
422
UnprocessableValidation failed
429
Too Many RequestsRate limited!
500
Server ErrorSomething crashed
502
Bad GatewayUpstream failed
503
Service UnavailableServer is down

๐Ÿ’ก Quick Rule: 2xx = Success. 4xx = Your mistake. 5xx = Server's mistake.

6GraphQL โ€” The Flexible Alternative
๐Ÿ“Š

GraphQL โ€” Ask for Exactly What You Need

Used by Facebook, GitHub, Shopify, Twitter
Advanced

GraphQL is a query language for APIs created by Facebook. One single endpoint โ€” ask for exactly the data you need.

๐ŸŒ REST API
Simple to understand & implement
Widely supported everywhere
Great HTTP caching built-in
Over-fetching extra unwanted fields
Multiple requests for related data
Versioning can get messy
๐Ÿ“Š GraphQL
Get exactly the fields you need
Single request for nested data
Strongly typed schema
Steeper learning curve
Complex caching
Overkill for simple apps
REST vs GRAPHQL โ€” SAME DATA
// REST: Need 3 separate requests! GET /api/users/42 GET /api/users/42/posts GET /api/users/42/followers // GraphQL: ONE request, exactly what you need query { user(id: 42) { name email posts { title } followers { count } } } โ†’ Returns exactly name, email, post titles, follower count โ†’ No extra fields, no extra requests โœ“
7WebSockets โ€” Real-Time APIs
โšก

WebSockets โ€” Persistent Two-Way Connection

Used in chat apps, live scores, trading, games
Intermediate

Normal HTTP = letters (send, wait, close). WebSockets = phone call (connection stays open, both sides talk anytime).

๐Ÿ”ด Live WebSocket Simulation

Connected
WEBSOCKET CODE
// Open a WebSocket connection const ws = new WebSocket('wss://api.example.com/chat'); // Connection opened ws.onopen = () => { ws.send(JSON.stringify({ type: 'join', room: 'general' })); }; // Receive messages in REAL TIME! ws.onmessage = (event) => { const msg = JSON.parse(event.data); console.log('New message:', msg); }; // Send a message ws.send(JSON.stringify({ text: 'Hey!', user: 'Rahul' }));
8API Authentication
๐Ÿ”‘

API Keys, JWT Tokens, OAuth โ€” Explained

How APIs verify you have permission
Intermediate

Most APIs require you to prove who you are before returning data. 3 main methods:

๐Ÿ—๏ธ Method 1: API Key (Simplest)
๐Ÿ“
Register on the developer portal

Sign up on the API's website

๐Ÿ”‘
Receive your secret API key
sk-live-a7f3k9m2p8x1q4w6e0r5t...
๐Ÿ“ค
Include key in every request
GET /weather?city=Mumbai&apikey=sk-live-a7f3k9...
๐Ÿช™ Method 2: JWT Token (Most Common)
๐Ÿ‘ค
User logs in with email + password

POST /api/login with credentials

๐Ÿท๏ธ
Server returns a JWT Token
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjQyfQ.xK9mF...
๐Ÿ“ฌ
Include token in all future requests
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

๐Ÿ” What's inside a JWT? JWT = Header . Payload . Signature. Decode at jwt.io to see the data.

โš ๏ธ Auth Best Practices
  • Never expose API keys in frontend code โ€” anyone can steal from DevTools
  • Use environment variables (.env) โ€” always add .env to .gitignore!
  • Set token expiry โ€” JWTs should expire in 15 min to 24 hours
  • Always use HTTPS โ€” HTTP transmits tokens in plain text
9Rate Limiting
๐Ÿšฆ

Why APIs Limit Your Calls

429 Too Many Requests โ€” you've been rate limited
Intermediate

Rate limiting controls how many requests per time period you can make. Exceed it โ†’ 429 error โ†’ wait for reset.

๐Ÿงช Simulate API Rate Limiting

Free Tier (60 req/min)0 / 60
Pro Tier (1000 req/min)0 / 1000
Click the button to simulate API calls
โšก Handle Rate Limits Like a Pro
  • Exponential backoff โ€” wait 1s, 2s, 4s before retrying
  • Cache responses locally โ€” don't re-fetch unchanged data
  • Read X-RateLimit headers โ€” APIs tell you remaining quota in headers
  • Batch requests โ€” 1 call for 100 items vs 100 calls
10Live API Tester

๐Ÿ”ด Live Public API Playground

Real Requests
๐Ÿ‘ค Get User ๐Ÿ“ List Posts โœ… Get Todo ๐Ÿ’ฌ Comments โ‚ฟ Bitcoin Price
โณ Ready
// Click Send or pick a preset to make a real API call

๐Ÿ“‹ API Developer Cheat Sheet

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” CIWeb API Cheat Sheet 2026 โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” // HTTP Methods GET โ†’ Read data (no body) POST โ†’ Create new resource PUT โ†’ Replace full resource PATCH โ†’ Update partial resource DELETE โ†’ Remove resource // Key Status Codes 200 OK โ€ข 201 Created โ€ข 204 No Content 400 Bad Request โ€ข 401 Unauthorized 403 Forbidden โ€ข 404 Not Found 429 Too Many Requests โ€ข 500 Server Error // fetch() Template const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify(data) }); if (!res.ok) throw new Error(res.status); const json = await res.json(); // Rate limit retry with backoff async function fetchWithRetry(url, retries=3) { for(let i=0; i<retries; i++) { const r = await fetch(url); if(r.status !== 429) return r; await new Promise(r => setTimeout(r, 2**i * 1000)); } }
๐Ÿง API Knowledge Quiz
๐ŸŽฏ Test Your API Knowledge
5 questions โ€” see how much you've learned!
1. What HTTP method should you use to create a new user in a REST API?
2. You get a 401 Unauthorized response. What should you do?
3. What makes WebSockets different from regular REST APIs?
4. What is the main advantage of GraphQL over REST?
5. You receive a 429 Too Many Requests error. What's the correct response?
0/5
Questions Correct
โšกPractice Tasks

๐ŸŽฏ Do These to Master APIs

Each task builds real, practical API skills.
0 / 6 tasks complete

Call your first public API

Open browser console (F12) โ†’ type the fetch() call โ†’ see real API data!

+15 XP

Install & explore Postman

Download Postman โ†’ make GET and POST requests โ†’ explore the response panel.

+20 XP

Build a weather app using a free API

openweathermap.org โ†’ free API key โ†’ fetch city weather โ†’ display on webpage.

+30 XP

Decode a JWT token

Go to jwt.io โ†’ paste any JWT โ†’ see the decoded payload. It's just JSON!

+15 XP

Create a simple Express.js REST API

npm init โ†’ install express โ†’ write a GET route โ†’ test in Postman. Ship your first API!

+35 XP

Add JWT authentication to your API

npm install jsonwebtoken โ†’ generate JWT on login โ†’ verify on protected routes.

+40 XP

๐Ÿš€ API Master! All Tasks Complete!

You now have the skills to build and consume real-world APIs!

๐Ÿ’ฌ Comments (0)

Live
โœ๏ธ Share your API experience
๐Ÿ”Œ I built my first API ๐Ÿ˜ APIs make sense now! ๐Ÿค” Question about JWT ๐Ÿš€ Using APIs in my project
0/500
๐Ÿ”ŒBe the first to comment! ๐Ÿ’ฌ
๐Ÿ“šRelated Blogs