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/.
2."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.
3."How is user authentication handled in this project?"
- Codex should be able to identify that we're using NextAuth.js 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
Now let's zoom in and ask about specific pieces of the code. This is incredibly useful when you encounter a file or a line of code you don't understand.
1.Open the file db/schema.ts. This file defines the shape of our database.
2.Highlight the entire Post table definition.
3.In the Codex panel, ask:
"Can you explain what this Drizzle schema is doing? What are the relationships between the tables?"
4.Now, open the file app/[communitySlug]/page.tsx. This is the main page for a specific community.
5.You'll see a line of code that fetches data from the database. Highlight that line and ask:
"Explain this line of code. What is it doing and what is the expected output?"
This is the workflow you should use constantly. When you see something you don't recognize, don't just skip over it — ask Codex to explain it! This is the fastest way to learn.
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.
Made with Bullet