project component playground

Component Playground

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Build an interactive component documentation site.

What You'll Build

Component Playground — a site that:

  • Documents your UI components
  • Shows live, interactive examples
  • Lets users toggle props and see changes
  • Provides copy-paste code snippets

The deepest project — you'll learn how components really work.

Why This Project

This project teaches fundamental web concepts:

  1. Components — Reusable pieces of UI
  2. Props — How components receive data
  3. State — How components change over time
  4. Documentation — Making code understandable

Understanding components changes how you think about interfaces.

Before You Start

Make sure you have:

  • Claude Code installed
  • Node.js installed
  • Familiarity with basic HTML/CSS concepts

The Steps

  1. Starting — Project setup with React or Svelte
  2. First Component — Build and document a button
  3. Props Controls — Interactive prop toggling
  4. More Components — Build out your library
  5. Deploying — Put it online

Framework Choice

This project uses React or Svelte. Claude will help you choose based on your preferences.

Both are good choices:

  • React: More widely used, more job opportunities
  • Svelte: Simpler syntax, often more intuitive

You can always learn the other later.

If You Get Stuck

Component concepts can be confusing at first:

  1. Ask for explanation — "I don't understand what props are"
  2. Simplify — "Can we make this simpler?"
  3. See it visually — "Show me what changes when I change this prop"

Let's Start

terminal
cd ~/Desktop

Exercises

  1. Write a one-sentence description of each of the four concepts this project teaches (components, props, state, documentation) in your own words — you'll revisit these as you build.
  2. Decide between React and Svelte before you start, and note one reason for your choice. If unsure, list your priorities (job opportunities vs. simpler syntax) so Claude can recommend one.
  3. Confirm your environment is ready: run cd ~/Desktop and verify Claude Code and Node.js are installed before moving to Step 1.