How Software Actually Works?

The first time you ask an AI to build something for you, here is roughly what you will get back. A chat message: “Your app is ready! I’ve set up the frontend with a React component, connected it to an Express backend, and added a PostgreSQL database for persistence.” And a file list: index.html, server.js, db.config.ts, styles.css, and eight more you have never seen before.

You will understand maybe four words in that sentence. Do not worry about “React” or “component” or “PostgreSQL” yet. Every one of those terms gets explained by the end of this lesson or in a later one.

Most beginners either nod and pretend they followed, or close the tab entirely. Both reactions come from the same place: there is no frame of reference. The words are not hard because they are complicated. They are hard because you have never been shown what they refer to.

By the end of this lesson, that sentence will actually mean something.

What happens when you open an app?

Every web application, from a billion-user social network to a weekend side project, is built primarily from three layers that talk to each other. Think of a restaurant:

• The dining room is what customers see and interact with: the tables, the menu, the waitstaff.

• The kitchen is where the actual work happens: orders get prepared, ingredients get combined, timing gets managed.

• The pantry is where ingredients are stored between meals so the kitchen can keep operating day after day.

Software follows the same shape. The dining room is the frontend. The kitchen is the backend. The pantry is the database. That is the entire architecture of most apps, and everything else is detail.

What does each layer actually do?

The frontend is everything the user sees and touches. Buttons, text fields, images, colors, layout, the loading spinner that appears while something is happening in the background. When you open an app in your browser, you are looking at the frontend. When you tell the AI “make the sign-up button blue,” you are talking about the frontend. Internally, the browser represents all of these visible elements as a structure called the DOM (Document Object Model), which is a tree of every element on the page. You do not need to interact with the DOM directly, but when the AI says “update the DOM” or an error references it, it is talking about the structure of what is currently on screen.

But clicking that button triggers the backend, which is the logic running behind the scenes. When a user clicks “Place Order,” the backend is what checks whether the item is in stock, calculates the total, and tells the payment service to charge the card. The user never sees the backend directly. They only see the results of what it decided.

The backend needs somewhere to store information permanently, and that is the database. User accounts, saved tasks, order history, your profile photo URL: all of it sits in the database. Without one, every time you closed the app, everything would reset to zero. The database is why your cart is still full when you come back the next morning.

These three layers connect through a loop. When you do something on screen, the frontend sends a request to the backend, the backend processes it (often reading from or writing to the database), and the result comes back to the frontend, which updates what you see.

When something breaks in an AI-built app, it is usually a break in one of these steps:

• The frontend sent the wrong data.

• The backend did not know what to do with it.

• The database never received the instruction to save.

Knowing which step failed is the difference between telling the AI “it doesn't work” (unhelpful) and telling it “the task disappears after I refresh the page, so it's probably not reaching the database” (very helpful).

What is a code?

Code is a set of instructions written in a format that a computer can follow. When the AI “writes code for you,” it is producing these instructions on your behalf. You will not be writing code in this course, but you will see it constantly in AI responses, in error messages, or in the file list of your project. When something breaks, the clue is often sitting right there in the output. You do not need to understand every line. You need to know that code is just instructions, not a black box, and that looking at it rather than looking away from it will save you time.

Which languages will you keep hearing about?

Open any website. The page has structure: headings, paragraphs, a navigation bar at the top, and a footer at the bottom. That structure is HTML (HyperText Markup Language), the skeleton of every web page. The page also has colors, spacing, fonts, and layout. That styling is CSS (Cascading Style Sheets), which controls how everything looks. Now click a button and watch a dropdown menu slide open without the page reloading. That interactivity is JavaScript (usually shortened to JS), and it is the most common language in web development by a wide margin.

Those three handle the frontend. On the backend, the two languages you will encounter most often are JavaScript (which works on both sides) and Python, a general-purpose language that reads almost like plain English and is especially common in anything involving data processing or AI.

You will not write any of these. But their names will appear constantly in file names, error messages, and AI explanations. When you see styles.css and the layout is broken, you now know which file to point the AI toward. When the AI says “I created a .js file,” you know that means JavaScript, handling interactivity or backend logic.

What other names will the AI throw at you?

Four more terms show up in almost every AI response. Knowing what they refer to, even loosely, keeps you from losing the thread mid-read.

1. React is a JavaScript library (a collection of pre-built code that handles common tasks) for building user interfaces. Most AI tools, including Lovable, generate React code by default. You will see it in file names like WalkerCard.jsx or BookingForm.tsx. The .jsx and .tsx extensions mean the file contains JSX, a syntax that lets you write HTML-like structures inside JavaScript. You do not need to understand JSX to use these tools. You just need to know that when the AI says “I created a React component,” it means it built a reusable piece of your interface: a card, a form, a navigation bar. Components are the building blocks. A page is made of components, and components can be nested inside other components.

2. TypeScript is JavaScript with extra safety checks. Instead of .js files, you will often see .ts or .tsx files. The difference: TypeScript requires the code to declare what type of data it expects (a number, a piece of text, a list of bookings). If something does not match, it throws an error before the app even runs. You may see errors like “Type ‘string’ is not assignable to type ‘number’.” That means the code expected a number and got text instead. Point the AI at the error and it will fix the type mismatch.

3. Tailwind CSS is a styling system where you apply visual styles directly in the HTML using short class names. Instead of writing a separate CSS file, the code looks like className="flex items-center gap-4 p-2 rounded-lg". Each class name is a tiny instruction: flex sets the layout direction, p-2 adds padding, rounded-lg rounds the corners. You do not need to learn these. But when you see a wall of class names in the code and wonder where the styling lives, now you know: it is right there in those short labels.

4. JSON (JavaScript Object Notation) is a format for organizing data into labeled fields. It looks like this: { "name": "Sarah", "price": 25, "rating": 4.8 }. You will see it in API responses, configuration files, and anywhere data is passed between systems. It reads like a structured list, because that is exactly what it is.

What does it mean to “put it on the internet”?

When you build an app using a tool like Lovable or Cursor, it runs on your machine or in your browser session. You can see it and click around, but nobody else can reach it. It exists only on your screen.

Deployment is the process of copying your app to a server (a computer that stays online around the clock and responds to anyone who visits your address). After deployment, your app has a real URL that anyone can open. Think of the difference between a Word document saved on your laptop and a Google Doc you’ve shared with a link. The content is the same; the difference is who can access it. Deployment is the step that moves your app from “on my machine” to “on the internet.”

Why does this map matter when things break?

Here is a failure that looks worse than it is. You ask the AI to add a sidebar navigation to your app. The AI builds it, but when you open the page, the sidebar overlaps the main content. Text is cut off, buttons are hidden, and the whole thing looks completely broken.

Without the map you just learned, your instinct is to tell the AI “the app is broken, fix it.” That prompt gives the AI almost nothing to work with, and it might rebuild the entire page, breaking features that were fine before.

With the map, you can narrow it down. The data is probably fine. The backend logic is probably fine. What is broken is the frontend, specifically the layout styling. A better prompt: “The sidebar is overlapping the main content area. The layout needs to give the main content enough space to sit beside the sidebar, not behind it.” That tells the AI exactly which layer to look at and what the problem actually is.

The three-layer model does not make you a developer but it makes your bug reports useful.

What comes next?

You now have names for the pieces and a rough sense of how they connect. None of that makes you an engineer. It makes you someone who can point the AI in the right direction when something goes wrong, and follow along when it explains what it built.

The next lesson is about the step that comes before you ever open a tool: figuring out what you actually want. A clear description of what your app should do, who it is for, and how it should behave is worth more than any prompting trick. That description is what the next lesson teaches you to write.