If you're building a full-stack application using frontend frameworks and a backend like Ktor, chances are you're working with APIs and endpoints every day. But what exactly is an API? And how is it different from an endpoint?
Many developers use these terms interchangeably — but there's a meaningful difference. In this blog, we’ll demystify them using real working code from a Kotlin Ktor backend and a TypeScript frontend.
🔍 What is an API?
API stands for Application Programming Interface.
In simple terms, an API is a set of rules that allows different software systems to communicate. In a web app, this usually means a frontend talks to a backend using HTTP requests.
✅ The API is defined in the backend.
✅ The API includes all the routes (endpoints) your backend exposes — like /login, /register, /getUser, etc.
🔗 What is an Endpoint?
An endpoint is a specific route or URL within your API that performs a particular function. Think of your API as a restaurant menu, and each endpoint is one dish you can order.
Example:
/loginis one endpoint.
/registeris another endpoint.
Every endpoint is part of an API, but the API is the whole collection of those endpoints.
🧠 Quick Comparison
| Concept | Defined In | Description | Example |
|---|---|---|---|
| API | Backend | Full set of functions the backend exposes | Auth API |
| Endpoint | Backend | A specific function (route) within the API | POST /login |
| API Call | Frontend | A function that sends requests to an endpoint | axios.post(...) |
📦 Real Backend Code (Ktor API Endpoint)
This is how we define the POST /login endpoint in Kotlin using Ktor:
routing {
post("/login") {
try {
val loginRequest = call.receive<LoginRequest>()
val (loginResponse, errorMessage) = authService.login(loginRequest)
if (loginResponse != null) {
logMessage("Login successful for user: ${loginResponse.profile.email}", LogType.INFO)
call.respond(loginResponse)
} else {
logMessage("Login failed for user: ${loginRequest.username}, reason: $errorMessage")
call.respond(HttpStatusCode.BadRequest, mapOf("errorMessage" to (errorMessage ?: "Invalid login")))
}
} catch (e: Exception) {
logMessage("Error processing login request: ${e.message}")
call.respond(HttpStatusCode.InternalServerError, mapOf("errorMessage" to "Internal server error"))
}
}
}
Here:
- We define an API endpoint:
POST /login
- It's part of the larger Authentication API
🌐 Real Frontend Code (API Call Using Axios)
This is how the frontend consumes the /login endpoint:
export const loginUser = async (
username: string,
password: string
): Promise<LoginResponse | LoginErrorResponse> => {
try {
const response = await axios.post(`${loginUrl}login`, { username, password });
const data = response.data;
// Save tokens securely
if (data.tokens?.accessToken && data.tokens?.refreshToken) {
cookiesService.setCookie('accessToken', data.tokens.accessToken);
cookiesService.setCookie('refreshToken', data.tokens.refreshToken);
}
// Save user profile details
if (data.profile) {
Object.keys(data.profile).forEach(key => {
if (key !== 'profileImage' && data.profile[key]) {
cookiesService.setCookie(key, String(data.profile[key]));
}
});
// Save login session info
const deviceId = getDeviceId();
const deviceName = getBrowserInfo();
const loginTime = Date.now();
const userId = data.profile.userId;
try {
const location = await getLocation();
await saveLoginSession({
userId,
deviceId,
deviceName,
deviceLocation: location ? `${location.city}, ${location.country}` : null,
userAgent: navigator.userAgent,
loginTime,
});
} catch (locationError) {
console.warn('Failed to get location:', locationError);
await saveLoginSession({
userId,
deviceId,
deviceName,
deviceLocation: null,
userAgent: navigator.userAgent,
loginTime,
});
}
}
return data;
} catch (error) {
if (axios.isAxiosError(error)) {
return {
errorMessage: error.response?.data?.errorMessage || 'Invalid credentials'
};
}
return { errorMessage: 'An unexpected error occurred' };
}
};
Here:
- The function
loginUseris calling the API endpoint/login
- It is not the API itself — it is a consumer of the API
🚀 Conclusion
- ✅ The API lives in the backend.
- ✅ The frontend just calls the API via endpoints.
- ✅ An endpoint is a specific route in the API like
/loginor/register. - ✅ API calls from the frontend (like using Axios) are clients — not definitions.
Understanding this distinction helps you architect cleaner, more scalable full-stack apps. Keep building! 💻🚀
✍️ Author
Post by a full-stack dev passionate about Kotlin, Ktor, TypeScript, and clean architecture. Follow me for more dev insights!
SOCIAL SHARE CARD GENERATOR