Slice 1: App Skeleton

Time: ~40 minutes | Goal: Basic app structure with navigation

What We're Building

The skeleton is the bones of your app:

• Page structure with React Router
• Navigation between pages
• Layout component for consistent structure
• Basic professional styling

No real functionality yet — just the structure everything else will build on.

By the End

You'll have:

• [ ] React Router set up with four routes
• [ ] Home, Login, Register, and Dashboard pages
• [ ] Navigation component with working links
• [ ] Layout component using children prop
• [ ] Clean, professional styling
• [ ] Deep understanding of how it all works

Learning Approach

This slice is broken into small, interactive steps. Each step:

1. Explains concepts first — Understand the "why" before the "how"
2. Prompts you to ask AI questions — Active learning, not passive copying
3. Builds one small thing — Never more than 8 minutes per step
4. Verifies it works — Catch problems immediately
5. Ensures understanding — Ask AI to explain what it built

Contents

1. Core Concepts — Understanding React, routing, components, and TypeScript
2. Goals — What "done" looks like for this slice
3. Step-by-Step Guide:
   • Step 1: Understanding Routing — Learn what routing is and why SPAs need it
   • Step 2: Install React Router — Add the routing library to your project
   • Step 3: Set Up Routes — Configure BrowserRouter and create basic routes
   • Step 4: Create Page Files — Organize pages into separate files
   • Step 5: Create Navigation — Build a navigation component with links
   • Step 6: Create Layout — Use component composition and the children prop
   • Step 7: Add Styling — Apply professional CSS styling
   • Step 8: Verification & Commit — Test everything and commit your work
4. Verification Checklist — Final comprehensive checklist before moving to Slice 2

How to Use This Slice

Start Here

If this is your first time building a React app, start with the concepts:

Read Core Concepts First →

Then Follow the Steps

Work through each step in order. Don't skip steps — each builds on the previous one:

Begin Step 1: Understanding Routing →

Use Active Learning

At each step:

• ✅ Read the "Ask AI" prompts and actually ask them
• ✅ Wait for AI to explain before writing code
• ✅ Ask follow-up questions if anything is unclear
• ✅ Ask AI to explain the code it generates
• ✅ Verify your work before moving on

Don't Just Copy

The goal is understanding, not speed. You should be able to explain:

• What each component does
• Why we use certain patterns
• How the pieces fit together

Final Check

Before moving to Slice 2:

Complete Verification Checklist →

---

Quick Navigation

First time here? → Core Concepts

Ready to build? → Step 1: Understanding Routing

Want to see goals? → Goals

Finished building? → Verification Checklist