Pre-course introduced the four layers quickly, just enough to get you building. This lesson slows down and goes deeper, because naming which layer broke is the single most useful skill for directing Lovable when something does not work the way you expected.

The restaurant, as an analogy for your app

Picture a restaurant. A customer sits down, reads the menu, and orders. That is your frontend, what the customer sees and touches: the menu, the table, the waiter taking the order. The customer never goes into the kitchen and does not need to.

The order goes to the kitchen. A chef reads it, decides how to make the dish, and cooks it. That is your backend, the part nobody using the app ever sees, but where the actual decisions and work happen. No kitchen, no dish, no matter how nice the dining room looks.

The restaurant keeps a record: what each table ordered, what is in stock, who has a running tab. That is your data layer, memory that survives past the moment. If the restaurant forgot every order the second it was cooked, nobody could run a tab, repeat an order, or get billed correctly.

And the restaurant has a host at the door checking reservations, deciding who gets seated, and which regulars get their usual table. That is auth, who is allowed in, and what they specifically get to see or do. A stranger does not get to walk into the kitchen or see another table's bill, and neither should a user in your app see someone else's data.

Walking one click through all four layers

Here is the same click from pre-course, slowed down with the restaurant picture next to it. A user types their email and password and taps Log in.

1. 1

   Frontend takes the order

   The login screen (the dining room) collects what the user typed. It does not decide anything. It just hands the request onward, the same way a waiter carries an order to the kitchen without deciding whether to make the dish.

2. 2

   Backend does the thinking

   The rules run here (the kitchen): is this a real account, does the password match. Nothing meaningful happens until this step runs, no matter how good the login screen looks.

3. 3

   Data holds the answer

   The backend checks against the stored records (the restaurant's books): does an account with this email exist, and does the stored password match.

4. 4

   Auth confirms who they are

   The host at the door confirms identity and decides what this specific person is allowed to see, their own entries, not anyone else's.

5. 5

   The answer travels back

   Backend tells frontend yes or no. Frontend shows the logged-in screen, or an error. One click, four layers, every time.

Using this to troubleshoot, in plain language

When a build does something wrong, you do not need to read code to get unstuck. You need to ask one question: which of the four layers is misbehaving, and describe that, not the code, to Lovable.

You will not configure any of this by hand this week. Lovable's Agent Mode handles the actual work inside all four layers. What changes, once you hold this picture, is how precisely you can describe a problem. "The signup button is in the wrong place" fixes itself fast. "Something is wrong with signup" makes the AI guess, the same way a vague brief does anywhere else in this course.