Lesson 6: Multi-Component Features & Client-Side Interactivity 🧩

Welcome to Week 4! You've learned to read data and write data. Now it's time to build more complex, interactive features. This week, we'll be working with features that involve multiple components, client-side state, and even changing the database schema. This is where things get really fun!

🧱 What is a multi-component feature?

So far, most of the features you've built have lived in a single file. But as applications grow, we often need to break down features into smaller, reusable components. A feature like a comment section, for example, might be made up of:
  • A CommentList component to display all the comments.
  • A Comment component for a single comment.
  • A NewCommentForm component to add a new comment.
This is a good practice because it makes your code easier to read, test, and reuse. Your AI partner can be a huge help in this process.

✅ Exercise 1: Prompting for multiple components

Let's say you're working on the "Add Comments to Posts" feature. You need to build the UI for displaying comments and adding a new one.
Instead of asking Codex to build the whole thing at once, you can ask it to build each component separately:
  1. Prompt for the Comment component:
      2. "Create a new React component called Comment that takes a comment object (with an author and text) as a prop and displays the author's name and the comment text."
  1. Prompt for the CommentList component:
      2. "Create a new React component called CommentList that takes an array of comment objects as a prop. It should map over the array and render a Comment component for each one."
  1. Prompt for the NewCommentForm component:
      2. "Create a new React component called NewCommentForm that has a Textarea and a 'Submit' button."
Now you have three small, clean components that you can assemble on your post detail page. This is much better than having one giant, messy file!

⚡ Client-side interactivity

So far, most of our pages have been rendered on the server. But some features, like a search bar that filters a list in real-time, require interactivity on the client-side (in the browser). In Next.js, you can create a client-side component by putting the "use client" directive at the top of your file.

✅ Exercise 2: Prompting for client-side state

Imagine you're working on the "Add Search/Filter to Resources" feature. You need a search bar that filters a list of resources as the user types.
  1. Tell Codex you need a client component:
      2. "I need to build a search filter for a list of resources. This will require client-side state, so make sure this is a React client component."
  1. Prompt for the state and the filter logic:
      2. "I have an array of resource objects from the server. I need to use React's useState hook to store a search query. Then, I need to filter the array based on the search query and display the filtered list."
Codex can generate the full component for you, including the useState for the search query and the filter logic to display the correct results.
How to self-validate: After you add the search component to your page, try typing a few letters into the input box. If the list of items below it instantly shrinks to match what you typed (without the page reloading), your client-side state is working perfectly!

🎟️ Your tickets for this week

This week's tickets are a big step up in complexity. You'll be building:
  • Ticket #7: Build full-stack comment system for posts: A feature that involves multiple components, a new API endpoint, and connecting them together.
  • Ticket #8: Build a basic user profile page: This involves using the React auth context on the client side to check if a user is logged in, rather than server-side sessions.
  • Ticket #9: Add ability for users to RSVP to events: This is the most complex ticket yet! It requires you to add a new table to the database (and run pnpm run db:push to sync it to Neon) and handle optimistic UI updates.
Don't be intimidated! The process is the same as before: break the problem down into small steps, and ask your AI partner for help at each step. This is where you'll really start to see the power of AI-assisted development.
This is a challenging but very rewarding week. By the end of it, you'll have built features that are at the core of any modern web application. Good luck!