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!

đŸ—„ïž Extending the database schema

Sometimes a new feature requires storing a new kind of data. This means you have to add a new table to your database schema and push those changes to Neon.

✅ Exercise 2: Practice a schema change

Let's practice adding a new table before you do it for real.
  1. Open the file db/schema.ts.
  1. Prompt Codex:
      2. "Add a new Drizzle table called bookmarks with an id, a userId foreign key to users, a postId foreign key to posts, and a createdAt timestamp."
  1. After Codex generates the code and you review it, open your terminal and run:
      2. pnpm run db:push
How to self-validate: You should see a success message in your terminal saying the changes were applied! To be totally sure, ask Codex: "How do I verify this new table exists in my Neon database dashboard?"
Note on Optimistic UI: If your ticket involves buttons that change state (like an RSVP or Like button), you might want the UI to update instantly before the database finishes saving. This is called an optimistic update. Ask Codex: "Show me how to implement an optimistic UI update for a toggle button in React."

🔒 Using Auth Context to protect pages

Some pages (like a User Profile) should only be visible to people who are logged in. In our app, we handle this using a client-side React Auth Context.

✅ Exercise 3: Check if a user is logged in

  1. Open a client component in your app (any file with "use client" at the top).
  1. Prompt Codex:
      2. "In a Next.js client component, how do I use the useAuth hook from our auth context to check if a user is logged in, and redirect them to the homepage if they're not?"
How to self-validate: Log out of the app in your browser, then try to navigate directly to the page you just protected (e.g., http://localhost:3000/profile). If it instantly kicks you back to the homepage, your protection works!

đŸŽŸïž 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!