Module 4: Building Your First Real App
Lesson 4

Understanding What You've Built — React, state, TypeScript basics

Why This Matters

You've built something real. But if you can't explain what you built — even at a basic level — you'll struggle to:

  • Debug problems when they appear
  • Describe clearly what you need next
  • Have useful conversations with developers
  • Tell when Claude is heading in the right direction

You don't need to become an engineer. You need a mental map of your app: what exists, where it lives, and roughly what it does. This lesson gives you that map.

The Three Layers of a Web App

Every web application has three layers. Understanding them is the single most useful concept in this lesson.

1. The Frontend (What Users See)

This is the code that runs in the user's browser — the HTML, CSS, and JavaScript that becomes the screen they look at. In your Next.js app, this is your app/ folder: your pages and components.

When someone visits your site, their browser downloads this code and renders it into the interface.

In your app: every .tsx file is part of the frontend. page.tsx files define pages; components (like your task list) are the building blocks inside them.

2. The Backend (The Logic and Data Layer)

This is code that runs on a server, not in the user's browser. It handles things you don't want exposed to the user:

  • Storing and retrieving data from a database
  • Authentication (login/logout)
  • Business logic that shouldn't run on the client

In Next.js, you can write backend code in the same project using API Routes or Server Actions.

In your app right now: there's very little backend. You'll add real backend logic when you connect a database in a later module.

3. The Database (Where Data Lives)

A database stores data so it persists — it's still there when the user closes the browser, returns tomorrow, or switches devices.

In your app right now: no database yet. Your data only exists while the page is open, which is exactly why a refresh wipes your tasks. A later module fixes this.

Reading Your Project in VS Code

Open VS Code and explore. Here are the key files and what each one is for.

app/layout.tsx

This is your app's shell — the code that wraps every page. It typically contains:

  • The <html> and <body> tags
  • The navigation bar (if it appears on every page)
  • Any global styling setup

To understand yours, ask Claude:

Explain what app/layout.tsx does and why it matters for the app structure. Assume I'm non-technical.

app/page.tsx

This is your home page — what shows when someone visits /. Everything between return ( and ) is the page's content, written in JSX (HTML-like syntax mixed with JavaScript).

app/[folder]/page.tsx

Each folder inside app/ is a route. app/tasks/page.tsx maps to the URL /tasks.

components/ (if it exists)

Reusable UI pieces Claude pulled out into their own files. If you have a task list component, its file might be components/TaskList.tsx.

Understanding TypeScript (the Basics)

Your files end in .tsx. The ts stands for TypeScript — a version of JavaScript with added type checking.

You'll see things like this:

interface Task {
  id: string;
  title: string;
  done: boolean;
}

This is a TypeScript interface — it defines the shape of a Task. It says: every task has an id (text), a title (text), and a done status (true/false).

Why bother? TypeScript catches mistakes before they become bugs. If you accidentally try to give a task a done value of "maybe", TypeScript complains immediately instead of letting the bug ship. Claude Code understands it well.

When you hit TypeScript that looks strange, just ask:

What does this TypeScript code do? [paste code]

Understanding React (the Basics)

Next.js is built on React, the library that lets you build UI out of components.

The key idea in React: a component is a function that returns UI.

export default function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

This component:

  • Takes tasks as input — that input is called a prop
  • Returns a list (<ul>)
  • Uses .map() to loop through the tasks, creating one <li> per task

You don't need to memorize this. Just learn to recognize the pattern when you see it: a function, some inputs, and a chunk of returned UI.

State: Why Things Change on Screen

State is data that can change — and when it changes, the UI updates to match.

In your task list, the list of tasks is state. When you add a task or check one off, the state changes, and React automatically re-renders the component with the new data. You don't manually update the screen; you update the state, and the screen follows.

Claude Code writes the state management for you. You just describe the behavior in plain language:

When the user clicks the checkbox, the task should visually appear "done."

Claude translates that into the state code that makes it happen.

Asking Claude to Walk You Through Your Code

The fastest way to understand your app is to have Claude explain it to you, file by file:

Can you walk me through the main page (app/page.tsx) and explain:

  1. What data it manages (state)
  2. What functions it has and what each one does
  3. What the UI renders and why it's structured that way

Assume I'm non-technical — use plain language and analogies.

Do this for at least two or three files. The goal isn't to memorize code — it's to build a mental model of what exists and why.

A Map of Your App

By the end of this module, you should be able to fill out something like this for your own app:

My app: [Name]

Pages:
- / (home page): Shows [what]
- /[route]: Shows [what]
- /[route]: Shows [what]

Data the app manages:
- [List of things]

Features that work today:
- [List]

Things I want to add next:
- [List]

Write it out. It helps you communicate clearly with Claude, and it gives you a north star for the rest of the course.

Summary

  • A web app has three layers: frontend (what users see), backend (server logic), and database (where data lives).
  • Your app right now is mostly frontend — data doesn't persist until you add a database later.
  • TypeScript defines the shape of your data so mistakes get caught early.
  • React builds UI from components — functions that take props and return HTML-like code.
  • State is data that changes; when it changes, React re-renders the screen to match.
  • The best way to learn your app is to ask Claude to walk you through each file in plain language.