How I Connected the E-Commerce Frontend, API, and Database
The frontend could display products, but it needed a reliable way to communicate with the backend and database.
Quick Overview
The API became the communication layer between the frontend and backend. The frontend requested information, the server processed the request, and the database supplied or stored the data.
The Real-World Story: A Restaurant Waiter
Imagine sitting inside a busy restaurant.
You do not walk into the kitchen and start searching through the refrigerator yourself. You tell the waiter what you want.
The waiter takes your request to the kitchen, the kitchen prepares the food, and the waiter brings the result back to your table.
An API plays a similar role.
The Communication Flow
Frontend
Request product data
API
Receive and process request
Database
Find the requested data
API
Return the response
Frontend
Display products
Example Request
GET /api/products
Response:
{
"products": [
{
"id": 1,
"name": "Mechanical Keyboard",
"price": 89.99
}
]
}Why I Kept the Layers Separate
Keeping the frontend, API, and database responsibilities separate made the application easier to reason about.
The frontend focused on presentation and interaction. The API handled communication and business logic. The database focused on storing persistent information.
💡 My takeaway
The API is not just another folder in the project. It is the bridge that allows different parts of the application to communicate safely and predictably.