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:
  1. "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/.
  1. "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.
  1. "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.

✅ 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.
  1. Open the file db/schema.ts. This file defines the shape of our database.
  1. Highlight the entire Post table definition.
  1. In the Codex panel, ask:
      2. "Can you explain what this Drizzle schema is doing? What are the relationships between the tables?"
  1. Now, let's write some code. Open the file app/[communitySlug]/page.tsx. This is the main page for a specific community.
  1. Below the existing code, prompt Codex to write a new query for you:
      2. "Write a Drizzle ORM query to fetch all posts from the database where the communityId matches the slug in the URL. Then console.log the results."
How to self-validate: 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! If you see the data, you successfully queried the database.
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.
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.
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!