Component Creation & Props with a Socratic Tutor

In this lab, you will build the same reusable component library as Lab 1 (an AlertBox, a UserProfileCard, and a ProductDisplay), but you will prepare for and verify every design decision through a structured dialogue with Claude acting as a Socratic Tutor: an AI that asks you guiding questions and never writes code for you. You will practice component creation, TypeScript interfaces, prop handling, and component composition, and you will also practice a durable professional skill: using an AI to sharpen your own understanding rather than to produce answers you cannot explain. Plan for approximately two hours of asynchronous work.

Scenario

Imagine you are a frontend developer tasked with building a component library for your company’s internal applications. Your team needs a set of reusable, type-safe components that can be easily configured for different use cases. These components will be used across multiple applications, so they need to be well-documented, properly typed, and flexible enough to handle various scenarios.

Your team lead has paired you with a senior developer who has one strict habit: she never types code into your editor. When you ask her a question, she answers with another question, because she wants you to be able to defend every interface decision in code review. In this lab, Claude plays that senior developer. You write every line of code yourself; Claude’s job is to make sure you understand why each line is there.

Objectives

By the end of this lab, you will:

1. Create reusable React components with TypeScript interfaces for props.
2. Implement proper prop handling, including optional props, callback props, and children.
3. Use component composition effectively.
4. Configure Claude to act as a Socratic Tutor and hold it to that role throughout a working session.
5. Explain unidirectional data flow, read-only props, interface typing, destructuring, and the children prop in your own words, with a saved transcript as evidence.

Setup (10 minutes)

Step 1: Create the Project

1. Create a new React TypeScript project using Vite:

npm create vite@latest component-library -- --template react-ts
cd component-library
npm install

2. Create the following folder structure inside the project:

src/
  components/
    AlertBox/
      AlertBox.tsx
    UserProfileCard/
      UserProfileCard.tsx
    ProductDisplay/
      ProductDisplay.tsx
  types/
    index.ts

3. Start the dev server with npm run dev and confirm the starter page loads before continuing.

Step 2: Copy the Socratic Tutor Prompt

The course framework calls this role AI as Socratic Tutor. In this role, the AI is explicitly forbidden from writing code or giving direct answers. It asks guiding questions, explains concepts only through questioning, and leads you to your own solution. You will give Claude the following prompt, exactly as written, at the start of your session. Copy it now; you will also commit it later as part of your submission.

You are my Socratic tutor for React props and component scaffolding.
I am a learner building a small React and TypeScript component library.

Rules you must follow for this entire conversation:
1. Never write, complete, or correct code for me. Not even a single line,
   a single JSX tag, or a single type annotation.
2. If I ask you for code, respond with a guiding question that helps me
   reason toward the answer instead.
3. Ask exactly one question at a time. Build each new question on my
   previous answer.
4. When I explain a concept correctly, confirm my understanding by asking
   me to restate the idea in my own words or apply it to a new example.
5. If my answer contains a misconception, do not correct it directly.
   Ask a question that exposes the contradiction so I can find the error
   myself.
6. Stay focused on React functional components, props, unidirectional
   data flow, TypeScript interfaces, prop destructuring, callback props,
   and the children prop.

Confirm that you understand these rules, then ask me your first question
about what I am building.

Step 3: Start a Tutoring Session

Choose one of the two setups below. Option A is recommended for this lab.

Option A: claude.ai (recommended)

1. Sign in at https://claude.ai  with your Per Scholas-provided Claude Pro account.
2. The most reliable way to enforce the role is to create a Project (a Pro feature) and paste the Socratic Tutor prompt into the Project’s custom instructions, so the rules apply to every conversation in that Project. Then start a new conversation inside the Project.
3. If you prefer not to use a Project, start a new chat and paste the prompt as your very first message. Do not ask any other question before sending it.

Option B: Claude Code in Plan Mode

1. Install Claude Code if you have not already: npm install -g @anthropic-ai/claude-code (Node.js 18 or newer is required, which you already have).
2. Run claude inside the component-library project directory and log in with your Per Scholas-provided account when prompted (/login).
3. Press Shift+Tab to cycle permission modes until you reach Plan Mode. Plan Mode is required here because Claude Code is an agentic tool that edits files by default, and the Socratic Tutor role forbids the AI from touching your code. In Plan Mode, Claude Code proposes ideas without editing files.
4. Paste the Socratic Tutor prompt as your first message.

Part 1: The Props Flow Dialogue (20 minutes)

Before you write any code, you will use the tutor to make sure you can explain how data moves through a React application. This dialogue must contain at least eight exchanges (an exchange is one tutor question plus your answer), and it must reach all five concepts on this checklist:

1. Unidirectional data flow (data moves from parent to child)
2. Props are read-only inside the child component
3. Typing props with TypeScript interfaces
4. Prop destructuring in the function signature
5. The children prop

Follow these steps:

1. Send the tutor this opening move (or your own version of it):

I am about to build an AlertBox component that receives a type and a
message from its parent. Ask me questions until I can explain exactly
how that data travels and why the child cannot change it.

2. Answer every question in your own words. Do not paste text from the lessons; the tutor’s follow-up questions will expose any answer you do not actually understand.
3. When the conversation has covered a checklist item, steer the tutor toward the next one. For example: “I think I can explain read-only props now. Ask me about typing props with interfaces next.”
4. When all five items are covered, ask the tutor: “Ask me to restate the whole journey of a prop, from where it is defined in the parent to where it is read in the child, in my own words.” Give that restatement.
5. Save this portion of the conversation. You will include it in SOCRATIC_DIALOGUE.md during Part 3.

Part 2: Guided Component Scaffolding (70 minutes)

You will now build the three components. Each component follows the same rhythm: a short Socratic exchange about the interface design, then you write all of the code yourself in your editor, then a checkpoint dialogue.

First, create src/types/index.ts and add all of the interfaces below as you reach each component. These are the same specifications as Lab 1; implement them exactly.

Component 1: AlertBox (approximately 20 minutes)

Create an AlertBox component that can display different types of alerts (success, error, warning, info) with customizable messages.

// types/index.ts
export type AlertType = 'success' | 'error' | 'warning' | 'info';
 
export interface AlertBoxProps {
  type: AlertType;
  message: string;
  onClose?: () => void;
  children?: React.ReactNode;
}

1. Design dialogue (2 to 4 exchanges). Before coding, discuss the interface with the tutor. Cover at least: why type is a union of four string literals instead of string, why onClose and children are optional while type and message are required, and what the type () => void promises about the onClose function.
2. Build it yourself. Implement AlertBox.tsx in your editor:
   • Use prop destructuring in the function signature.
   • Render the message, and apply a different CSS class (or inline style) for each of the four alert types.
   • Render a close button only when onClose is provided, and call onClose when it is clicked.
   • Render children below the message when provided.
3. Checkpoint. Paste a short description to the tutor, in your own words and without any code, of how the onClose function travels from App into AlertBox and what the component does when onClose is omitted. Answer the tutor’s follow-up probes until it confirms your explanation is consistent.

Component 2: UserProfileCard (approximately 20 minutes)

Create a UserProfileCard component that displays user information with optional sections.

// types/index.ts
export interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  avatarUrl?: string;
}
 
export interface UserProfileCardProps {
  user: User;
  showEmail?: boolean;
  showRole?: boolean;
  onEdit?: (userId: string) => void;
  children?: React.ReactNode;
}

1. Design dialogue (2 to 4 exchanges). Discuss with the tutor: how passing a whole user object differs from passing name, email, and role as separate props; what the boolean props showEmail and showRole should do when omitted; and why onEdit is typed to receive a userId string argument rather than nothing.
2. Build it yourself. Implement UserProfileCard.tsx:
   • Always render the user’s name; render the avatar image only when avatarUrl is provided.
   • Render the email only when showEmail is true, and the role only when showRole is true.
   • Render an Edit button only when onEdit is provided; clicking it must call onEdit with user.id.
   • Render children at the bottom of the card when provided.
3. Checkpoint. Describe to the tutor, without code, how the user object and the onEdit callback travel from App into the card, and why the child calls onEdit(user.id) instead of editing the user data itself. Answer the follow-up probes.

Component 3: ProductDisplay (approximately 20 minutes)

Create a ProductDisplay component that shows product information with configurable display options.

// types/index.ts
export interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
  imageUrl?: string;
  inStock: boolean;
}
 
export interface ProductDisplayProps {
  product: Product;
  showDescription?: boolean;
  showStockStatus?: boolean;
  onAddToCart?: (productId: string) => void;
  children?: React.ReactNode;
}

1. Design dialogue (2 to 4 exchanges). Discuss with the tutor: why inStock is required while imageUrl is optional; how you will display a number price as formatted text inside JSX; and what should happen to the Add to Cart button when the product is out of stock.
2. Build it yourself. Implement ProductDisplay.tsx:
   • Render the product name and a formatted price (for example, using toFixed(2) with a currency symbol).
   • Render the description only when showDescription is true, and an In Stock or Out of Stock indicator only when showStockStatus is true.
   • Render an Add to Cart button only when onAddToCart is provided; disable it when inStock is false; clicking it must call onAddToCart with product.id.
   • Render children when provided.
3. Checkpoint. Describe to the tutor, without code, how content placed between <ProductDisplay> and </ProductDisplay> in App ends up rendered inside the component. Answer the follow-up probes.

Compose the Components in App (approximately 10 minutes)

Finish Part 2 by composing all three components in src/App.tsx. Write this file yourself as well.

1. Define sample data in App.tsx. You may use this data as-is:

const sampleUser = {
  id: 'u-101',
  name: 'John Doe',
  email: 'john.doe@example.com',
  role: 'Software Engineer',
};
 
const sampleProduct = {
  id: 'p-205',
  name: 'Wireless Headphones',
  price: 199.99,
  description: 'High-quality wireless headphones with noise cancellation.',
  inStock: true,
};

2. Render at least one AlertBox, one UserProfileCard, and one ProductDisplay, demonstrating:
   • At least one component rendered with its optional callback and one rendered without it. For the callbacks, a simple alert(...) call is sufficient; managing state comes in a later lesson.
   • At least one component receiving children content.
   • Different prop combinations for the boolean display options.
3. Run npm run dev and confirm every variation renders without TypeScript errors in the terminal or the editor.

Part 3: Verification Dialogue and Reflection (20 minutes)

Step 1: Edge-Case Quiz

Ask the tutor to test you. Send a message such as:

My component library is finished. Quiz me on edge cases, one question at
a time. Cover at least: what happens when an optional callback such as
onClose is omitted, why onEdit receives a userId argument, and how
children flows through UserProfileCard.

Answer every quiz question in your own words. If a question exposes a gap, fix your component, then tell the tutor what you changed and why.

Step 2: Capture the Transcript

• claude.ai: Use the Share button to create a public link to the conversation. If sharing is disabled in your workspace, copy the transcript and paste it into a Markdown file instead.
• Claude Code: Copy the relevant portions of the conversation from your terminal and paste them into a Markdown file.

Step 3: Assemble SOCRATIC_DIALOGUE.md

Create SOCRATIC_DIALOGUE.md at the root of your repository containing, in this order:

1. The exact Socratic Tutor prompt you used, in a fenced code block.
2. A transcript excerpt from the Part 1 props-flow dialogue showing at least eight exchanges and the five checklist concepts. Include the share link as well if you have one.
3. A transcript excerpt from at least one Part 2 scaffolding dialogue, including its checkpoint, showing the tutor asking questions rather than writing code.
4. Written answers to these three reflection questions:
   1. Which tutor question most changed your approach, and how?
   2. What is one misconception about props that the dialogue uncovered, and how did you resolve it?
   3. Where would you use this Socratic method again in your own learning, and where would you not? Explain why.

Step 4: Finish the README and Push

1. Write a README.md that explains how to install and run the project and documents each component: its purpose, its props (name, type, required or optional), and one usage example per component.
2. Initialize a Git repository if you have not already, commit your work with clear messages, and push it to a new GitHub repository.

Submission Guidelines

Submit your project via a GitHub repository link using the Start Assignment link on Canvas. Your repository must include:

1. All three component implementations and the TypeScript interfaces exactly as specified above.
2. App.tsx demonstrating composition with varied prop combinations.
3. A README.md documenting setup and component usage.
4. A SOCRATIC_DIALOGUE.md containing the tutor prompt, the required transcript excerpts, and your three reflection answers.

Grading Criteria

Your submission will be evaluated on a complete/incomplete basis based on the following criteria:

Total Points: 40