The Brain Behind the Scenes: Backend & API
Discover how the server processes requests and communicates with the frontend.
What Is the Backend?
The backend is the part of your application that runs on a server — not in the user's browser. It handles sensitive operations like checking passwords, reading from the database, and processing business logic. Users never see backend code directly.
The Kitchen Analogy Revisited
The kitchen staff of your restaurant
If the frontend is the dining room, the backend is the kitchen. When a customer (user) places an order (clicks a button), the waiter (API) carries it to the kitchen. The chef (server code) prepares the dish (processes data), gets ingredients from the pantry (database), and sends the finished plate back through the waiter.
API Routes: The Waiter Between Frontend & Backend
An API (Application Programming Interface) is a set of rules for how two programs talk to each other. In StudyTracker, API routes live in app/api/ and handle specific operations. When the frontend calls fetch("/api/habits"), the corresponding route function on the server processes the request and returns data.
REST API
A convention for organizing API endpoints using HTTP methods: GET reads data, POST creates data, PUT updates data, DELETE removes data. Each URL + method combination represents a specific action.
The Request/Response Cycle
Every interaction between frontend and backend follows this pattern: the browser sends a request (with a URL, method, headers, and optional body), the server processes it, and sends back a response (with a status code and data). Watch the animation below to see this in action:
Step 1 of 7
User clicks 'Save Habit'
The user fills in a habit name and clicks the save button. This triggers an event handler in the React component.
onClick={() => handleSave(habitName)}How StudyTracker's Parts Connect
Click on each node in the diagram below to understand what role it plays in the application architecture:
Click a node to see its description
Try It: API Explorer
Below is a simulated API explorer. Select an endpoint, click Send, and see what the server would return. This is similar to tools like Postman that developers use every day:
Request
app/(app)/, API routes go in app/api/. This is called a full-stack framework — you don't need a separate backend project.Test Your Knowledge
What HTTP method is used to CREATE new data?