Lesson 4: Exploring the Codebase with AI

Welcome to Week 2! Now that you have your environment set up, it's time to dive into the Community Hub codebase. This week is all about understanding the existing code and starting to build your first features. One of the most powerful uses of an AI coding assistant is its ability to help you understand a new codebase quickly.

🧭 The challenge of a new codebase

Every developer knows the feeling of opening up a new project for the first time. It can be overwhelming! There are dozens of files, folders, and lines of code you've never seen before. Where do you even start?

Traditionally, you might spend hours or even days just reading files, trying to build a mental map of how everything fits together. With Codex, you can accelerate this process dramatically.

🤖 Your AI as a tour guide

Think of Codex as your personal tour guide for the Community Hub project. You can ask it questions about the code, and it will give you answers in plain English. This is a much more interactive and efficient way to learn than just reading on your own.

✅ Exercise 1: Ask high-level questions

Let's start with some high-level questions to get the lay of the land. Open the Community Hub project in VS Code and open the Codex panel.

Try asking these questions:

"Tell me about this project. What does it do and how is it organized?”

Start broad! Codex should give you a high-level overview of what the Community Hub is, what it does, and how the codebase is structured. This is like asking a teammate to give you the 2-minute tour.

"What is the overall structure of this Next.js project?"

Codex should give you an overview of the key folders like app/, components/, and db/.

"What external libraries or packages does this project use?"

Codex will look at the package.json file and tell you about Next.js, React, Drizzle, Tailwind, etc.

"How is user authentication handled in this project?"

Codex should be able to identify that we're using a custom dev-mode auth context where the user ID is passed from the client, and explain how it works.

Notice how you can ask very broad questions to get a general sense of the project's architecture.

👉 Pro tip: When Codex mentions a file in its response, like app/page.tsx or db/schema.ts , it will often make them clickable links. Click them! Following those links is how you start building a mental map of where things live. The combination of Codex's explanation + seeing the real code is what will help you make things click!

🎨 A quick primer on Tailwind CSS

Every ticket you work on will require styling. Instead of writing separate CSS files, this project uses Tailwind CSS. Tailwind is a "utility-first" framework, which means you style elements by adding specific class names directly to your HTML/React code.

For example, instead of writing margin: 1rem; font-weight: bold; background-color: blue;, you just write:

<div className="m-4 font-bold bg-blue-500">

Codex is incredibly good at generating Tailwind classes. You don't need to memorize them all! When you need something styled, just ask Codex: "Make this look like a card with a white background, rounded corners, and a subtle shadow using Tailwind."

✅ Exercise 2: Ask specific questions and write your first query

Now let's zoom in and ask about specific pieces of the code. Then, we'll actually write a small piece of code to prove we understand it.

Open the file db/schema.ts. This file defines the shape of our database.
Highlight the entire Post table definition.
In the Codex panel, ask:

"Can you explain what this Drizzle schema is doing? What are the relationships between the tables?"

Open the file app/[communitySlug]/page.tsx. This is the main page for a specific community.
Toggle Plan Mode on (Shift + Tab). Then prompt Codex using the 4-part scaffold:

Goal: Write a Drizzle ORM query to fetch all posts for this community page. Context: The file is app/[communitySlug]/page.tsx and the posts table is defined in db/schema.ts. Constraints: Match posts where the communityId matches the slug in the URL. Done-when: The query results are logged to the console with console.log.

Review the plan before approving. Does it make sense? Is it querying the right table with the right filter?
After Codex writes the query, run your app with pnpm run dev. Visit a community page in your browser (like http://localhost:3000/ai-for-artists). Look at your VS Code terminal — you should see an array of post objects printed out!

How to self-validate: Refresh your browser window. You should now see the post titles displayed directly on the webpage, styled with Tailwind! If you see them, you've successfully completed the full read operation flow.

This is the workflow you should use constantly. When you see something you don't recognize, ask Codex to explain it. Then, write a small experiment to prove it works.

🎟️ Your first tickets

This week, you and your team will each pick up your first ticket from the GitHub project board. The three tickets for this week are:

Ticket #1: Display Community Posts
Ticket #2: Display Community Events
Ticket #3: Display Community Resources

All three of these tickets follow the same pattern: you will be fetching data from the database and displaying it on a page. This is often called a "read operation." These are great first tickets because they let you get comfortable with the codebase without worrying about more complex logic.

Note: these tickets are about getting data on the page: that's the skill you're building this week. Add enough Tailwind to make things readable (some padding, maybe a border or background), but don't go on a full styling spree right now. There's a dedicated polish ticket coming in Week 5.

Before you start writing any code for your ticket, use the techniques from this lesson to understand the files you'll be working in. For example, if you're working on displaying posts, start by asking Codex to explain the app/[communitySlug]/page.tsx file to you.

🔍 Before you push: reviewing AI-generated code

In Lesson 2, you learned BuildLab Fundamental #4: Code Review Your AI. You learned about The Choice — the decision between accepting code at face value and slowing down to actually understand it. This is where you put that into practice for real. You just had Codex write a database query and render data on a page. Before you push that code anywhere, let's make sure you actually own it by practicing the standup test. ⤵️

✅ Exercise 3: The standup test

Imagine your team standup is in 5 minutes. Your facilitator is going to ask you:

"Walk me through what your code does: what data is it fetching, how does it get to the page, and why did you write it this way?"

Look at the code you just wrote in Exercise 2. Make sure you can answer these three questions about it:

What does this code do? Explain it in your own words, not Codex's words. If you can't describe it without reading it line by line, ask Codex: "Can you explain this code to me like I'm teaching it to someone else?"
What's the data flow? Where does the data start (database), how does it travel (query → server component → JSX), and where does it end up (the browser)? Trace the full journey.
What would break if I changed something? Pick one line, maybe the where clause in the query, or the .map() in the render, and ask yourself what would happen if you deleted or changed it. If you're not sure, experiment! Break it on purpose, see what error you get, then fix it.

If you can answer all three, fantastic! Push the code. If you can't, that’s a sign to slow down and learn. Anyone can paste code into an AI tool. A software engineer can explain it, adapt it, and fix it when it breaks.

Why this matters beyond the BuildLab: Every engineering team in the world does standups, code reviews, and demos. In all of them, the questions asked are similar: "Can you explain what you built and why?" The ability to talk about your code, not just write it, is one of the most valuable skills you'll take away from the BuildLab. And it works whether you wrote the code with Codex, Copilot, ChatGPT, or anything else.

Good luck with your first sprint! Don't hesitate to ask questions in the Slack channel if you get stuck. Your facilitators and your teammates are all here to help. You've got this!