diff --git a/Les03-Cursor-Basics/00-START-HERE.md b/Les03-Cursor-Basics/00-START-HERE.md new file mode 100644 index 0000000..f203a59 --- /dev/null +++ b/Les03-Cursor-Basics/00-START-HERE.md @@ -0,0 +1,260 @@ +# DevDash Debug Challenge Series - START HERE + +Welcome to the **DevDash Debug Challenge Series** - a comprehensive three-tier debugging curriculum for Next.js developers. + +## Quick Links + +### Debug Challenge Tiers + +1. **Easy Tier** (5 errors - 30-45 min) + - File: `les3-debug-challenge.zip` + - Answer Key: `Les03-Debug-Challenge-ANTWOORDEN.md` + - Topics: Basic syntax, typos, simple logic + - **Start here if:** You're new to debugging or Next.js + +2. **Hard Tier** (12 errors - 60-90 min) + - File: `les3-debug-challenge-hard.zip` + - Answer Key: `Les03-Debug-Challenge-Hard-ANTWOORDEN.md` + - Topics: Next.js patterns, React hooks, TypeScript + - **Start here if:** You're comfortable with React basics + +3. **Super Hard Tier** (16-18 errors - 2-3 hours) ← YOU ARE HERE + - File: `les3-debug-challenge-super-hard.zip` + - Answer Key: `Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md` + - Topics: Advanced patterns, circular deps, complex interactions + - **Start here if:** You're ready to master advanced concepts + +## What is DevDash? + +DevDash is a fully-featured developer portfolio and dashboard application built with: +- **Next.js 14** (App Router) +- **React 18** (with hooks) +- **TypeScript 5** +- **Tailwind CSS 3** + +The application includes: +- Homepage with Hero section, Features grid, Testimonials carousel +- Blog system with dynamic routes +- Dashboard with analytics and user profile +- API routes for data +- Middleware for authentication +- Theme context for dark/light mode + +## Getting Started (5 minutes) + +### Option 1: Start the Super Hard Challenge + +```bash +# 1. Extract the project +unzip les3-debug-challenge-super-hard.zip +cd les3-debug-challenge-super-hard + +# 2. Install dependencies +npm install + +# 3. Run the development server +npm run dev + +# 4. Open browser to http://localhost:3000 +# (You'll see errors - that's the point!) + +# 5. Read the errors and start debugging +# Open Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md for help +``` + +### Option 2: Read First, Debug Later + +1. Start with `DEBUG-CHALLENGES-OVERVIEW.md` for context +2. Read `Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md` to understand all errors +3. Then extract and debug the project yourself + +## What Will You Learn? + +By fixing all 16-18 errors, you'll master: + +### Advanced React Concepts +- Advanced hook patterns (useState, useEffect, useContext) +- Closure patterns and stale closures +- Key prop best practices +- Memory leak prevention +- Context API provider patterns + +### Next.js 14 Deep Dive +- Client vs Server components +- Middleware patterns +- Dynamic routes with metadata +- API routes and type safety +- App Router structure + +### TypeScript Mastery +- Type safety in React +- Optional chaining +- API contracts +- Type narrowing + +### Advanced Debugging Skills +- Circular dependency detection +- Performance issue identification +- Memory leak detection +- State management debugging + +## The 6 Error Categories + +| Category | Count | Examples | +|----------|-------|----------| +| **Blocking Errors** | 3 | Missing deps, wrong imports, circular refs | +| **Next.js Specific** | 4 | Client/Server components, metadata, middleware | +| **Logic Errors** | 3 | Filter bugs, stale closures, key issues | +| **TypeScript Errors** | 2 | Type mismatches, optional chaining | +| **React Patterns** | 3 | Cleanup, context, prop drilling | +| **Styling Errors** | 2-3 | Custom CSS, inline styles | + +## How to Use the Answer Key + +The answer key (`Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md`) provides: + +1. **Error Location** - Exact file and line +2. **Issue Description** - What's wrong and why +3. **Symptom** - What breaks or misbehaves +4. **Multiple Solutions** - Usually 2-3 ways to fix +5. **Severity Level** - CRITICAL, HIGH, MEDIUM, LOW +6. **Code Examples** - Before/after comparisons + +**Pro Tip:** Try to fix each error without looking at the answer first. Use the answer key to verify your fix or for hints. + +## Debugging Strategy + +**Recommended approach:** + +1. Start the dev server: `npm run dev` +2. Read the console errors +3. Fix blocking errors first (they prevent the app from running) +4. Then tackle Next.js errors (build-time failures) +5. Next, logic errors (functionality breaks) +6. Then TypeScript errors (feature-specific) +7. Finally, React patterns and styling + +## Testing Your Fixes + +After each fix, verify: + +```bash +# Check for build errors +npm run build + +# Check for runtime errors +npm run dev + +# Run in your browser +# Click around and check if features work +``` + +## Validation Checklist + +Your fixes are complete when: +- [ ] `npm install` succeeds +- [ ] `npm run build` succeeds (no errors) +- [ ] `npm run dev` starts without errors +- [ ] Homepage loads with all sections +- [ ] Blog shows 2 published posts +- [ ] Blog post detail pages work +- [ ] Dashboard page loads +- [ ] Stats load from API +- [ ] No console errors or warnings +- [ ] No TypeScript errors + +## Need Help? + +### If you're stuck on an error: +1. Read the error message carefully +2. Check `Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md` for that error number +3. Try the "Symptom" section to understand what's broken +4. Look at the code example to see the fix + +### If something doesn't make sense: +- Refer to the "Key Concepts Covered" section in the answer key +- Research the specific Next.js/React feature being tested +- Try different solutions to understand the principle + +### If you need a broader context: +- Read `DEBUG-CHALLENGES-OVERVIEW.md` for the big picture +- Review the "Learning Outcomes" section + +## File Structure + +``` +les3-debug-challenge-super-hard/ +├── src/ +│ ├── app/ # Next.js pages and API routes +│ ├── components/ # React components (many with errors) +│ ├── context/ # Theme context +│ ├── lib/ # Utilities and types +│ └── data/ # Static blog data +├── package.json # Dependencies (some missing!) +├── tsconfig.json # TypeScript config +├── tailwind.config.ts # Tailwind setup +├── middleware.ts # Auth simulation (has error) +└── README.md # Project overview +``` + +## Time Estimate + +- **Easy errors (1-3):** 20-30 min +- **Next.js errors (4-7):** 30-40 min +- **Logic errors (8-10):** 25-35 min +- **TypeScript errors (11-12):** 20-30 min +- **React patterns (13-15):** 30-45 min +- **Styling (16-18):** 20-30 min +- **Testing:** 15-20 min + +**Total:** 2-3 hours for the complete challenge + +## Progression Path + +After this challenge, you'll be ready for: +- Building production Next.js applications +- Advanced React patterns +- Complex state management +- Performance optimization +- Team code reviews + +## Questions About Specific Errors? + +Each error is thoroughly explained in `Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md`. The document includes: +- Exact error location +- Root cause explanation +- Visual code examples +- Multiple solution options +- Why the error matters +- Best practices to avoid it + +## Next Steps + +1. **Now:** Extract the zip and run `npm install` +2. **Then:** Start the dev server with `npm run dev` +3. **When stuck:** Check the answer key +4. **After fixing all:** Review your solutions and make sure you understand each error +5. **Finally:** Try building a similar project from scratch using these patterns + +--- + +## Document Reference + +| Document | Purpose | +|----------|---------| +| **00-START-HERE.md** | This file - quick start guide | +| **DEBUG-CHALLENGES-OVERVIEW.md** | Big picture overview of all 3 tiers | +| **Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md** | Complete answer key with explanations | +| **les3-debug-challenge-super-hard.zip** | The actual buggy project | + +--- + +**Good luck debugging! You've got this.** + +Remember: The goal isn't just to fix errors, but to understand *why* they happened and how to prevent them in the future. + +--- + +Created: February 2026 +Level: Super Hard (16-18 errors) +Time: 2-3 hours diff --git a/Les03-Cursor-Basics/DEBUG-CHALLENGES-OVERVIEW.md b/Les03-Cursor-Basics/DEBUG-CHALLENGES-OVERVIEW.md new file mode 100644 index 0000000..21e7b5a --- /dev/null +++ b/Les03-Cursor-Basics/DEBUG-CHALLENGES-OVERVIEW.md @@ -0,0 +1,222 @@ +# DevDash Debug Challenge Series - Complete Overview + +This folder contains a complete series of 3 debug challenges of increasing difficulty, all featuring the "DevDash" developer portfolio and dashboard application. + +## Challenge Tiers + +### 1. Easy Tier (5 Errors) +- **File:** `les3-debug-challenge.zip` +- **Answer Key:** `Les03-Debug-Challenge-ANTWOORDEN.md` +- **Target:** Beginners, first-time debuggers +- **Topics:** Basic syntax errors, typos, simple logic mistakes + +### 2. Hard Tier (12 Errors) +- **File:** `les3-debug-challenge-hard.zip` +- **Answer Key:** `Les03-Debug-Challenge-Hard-ANTWOORDEN.md` +- **Target:** Intermediate developers +- **Topics:** Next.js patterns, React hooks, TypeScript basics, state management + +### 3. Super Hard Tier (16-18 Errors) +- **File:** `les3-debug-challenge-super-hard.zip` +- **Answer Key:** `Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md` +- **Target:** Advanced developers, mastery level +- **Topics:** Circular dependencies, advanced React patterns, middleware, complex type issues + +## Challenge Structure + +All challenges are based on the same application concept: **DevDash** - a developer portfolio and dashboard application built with Next.js 14, React 18, TypeScript, and Tailwind CSS. + +### Features Included +- **Homepage:** Hero section, features showcase, testimonials carousel +- **Blog:** Dynamic routes with MDX-style content +- **Dashboard:** Analytics, stats grid, user profile, charts placeholder +- **API Routes:** `/api/stats`, `/api/posts` +- **Middleware:** Authentication simulation +- **Context:** Theme management (dark/light mode) + +### Tech Stack +- Next.js 14 (App Router) +- React 18 +- TypeScript 5 +- Tailwind CSS 3 +- PostCSS + +## Error Categories by Tier + +### Easy (5 errors) +1. Wrong variable name +2. Missing closing tag +3. Typo in function name +4. Array method confusion +5. Logic error in condition + +### Hard (12 errors) +- 3 Blocking errors (missing deps, wrong imports) +- 3 Next.js specific errors (layout, metadata, routing) +- 2 Logic errors +- 2 TypeScript errors +- 2 React pattern errors + +### Super Hard (16-18 errors) +- 3 Blocking errors (circular dependencies, missing deps) +- 4 Next.js specific errors (client/server components, middleware) +- 3 Logic errors (filters, closures, keys) +- 2 TypeScript errors (type mismatches, optional chaining) +- 3 React pattern errors (cleanup, context, props) +- 2-3 Styling errors (CSS and inline styles) + +## Getting Started + +Each zip file contains a complete Next.js project. To work on a challenge: + +```bash +# Extract the zip +unzip les3-debug-challenge-super-hard.zip + +# Navigate to project +cd les3-debug-challenge-super-hard + +# Install dependencies +npm install + +# Run development server +npm run dev + +# Open browser to http://localhost:3000 +``` + +## Using Answer Keys + +Each answer key document provides: +- Exact location of each error +- Code snippet showing the problem +- Explanation of why it's an error +- The symptom (what breaks) +- One or more solutions +- Difficulty level (CRITICAL, HIGH, MEDIUM, LOW) + +## Progression Path + +**Suggested learning path:** + +1. Start with **Easy Tier** to get familiar with the codebase and debugging process +2. Move to **Hard Tier** to tackle more complex Next.js and React patterns +3. Finish with **Super Hard Tier** for mastery of advanced debugging concepts + +## Timeline Recommendations + +| Tier | Recommended Time | Notes | +|------|-----------------|-------| +| Easy | 30-45 minutes | Quick confidence builder | +| Hard | 60-90 minutes | Requires research and testing | +| Super Hard | 120-180 minutes | Deep analysis and multiple fixes needed | + +## Learning Outcomes + +After completing all three tiers, students will have mastered: + +### Easy Tier +- Basic syntax debugging +- Reading error messages +- Variable naming conventions +- Simple conditional logic + +### Hard Tier +- Next.js App Router concepts +- React hooks and their rules +- TypeScript type safety basics +- Component composition +- Data flow and props + +### Super Hard Tier +- Circular dependencies and module loading +- Advanced React patterns (closures, cleanup, context) +- Client vs Server components +- Middleware patterns +- Type-safe API contracts +- Performance patterns (keys, memoization) +- Styling best practices with Tailwind + +## Key Concepts Covered + +### JavaScript/TypeScript +- Module imports and circular dependencies +- Type safety and optional chaining +- Closures and their pitfalls +- Array methods and filtering +- Object destructuring + +### React +- Hooks (useState, useEffect, useContext) +- Rules of hooks and dependencies +- Client vs Server components +- Context API and providers +- Key props and list rendering +- Memory leaks and cleanup + +### Next.js +- App Router structure +- API routes +- Middleware +- Metadata and SEO +- Dynamic routes +- Image optimization + +### CSS/Styling +- Tailwind CSS utilities +- Inline styles vs. classes +- CSS custom properties +- Responsive design + +## Files Included + +Each zip contains: +``` +les3-debug-challenge-super-hard/ +├── src/ +│ ├── app/ # Next.js pages and layouts +│ ├── components/ # React components +│ ├── context/ # React Context +│ ├── lib/ # Utilities and types +│ └── data/ # Static data +├── package.json +├── tsconfig.json +├── tailwind.config.ts +├── next.config.js +├── postcss.config.js +├── middleware.ts +└── README.md +``` + +## Grading Rubric + +Students can self-assess: +- All 5/12/16-18 errors identified and documented +- Code builds successfully (`npm run build`) +- No runtime errors or warnings +- Application functionality works as intended +- Code follows best practices (Tailwind usage, React patterns, etc.) +- Understanding demonstrated in commit messages or documentation + +## Support for Instructors + +Each answer key provides: +- Clear explanation of each error +- Multiple solution options where applicable +- Severity levels to help prioritize feedback +- Testing checklist to verify all fixes +- Common student mistakes and misconceptions + +## File Sizes + +| File | Size | Components | +|------|------|-----------| +| les3-debug-challenge.zip | 12 KB | 10 files | +| les3-debug-challenge-hard.zip | 19 KB | 32 files | +| les3-debug-challenge-super-hard.zip | 26 KB | 38 files | + +--- + +**Created:** February 2026 +**Updated:** February 25, 2026 +**Version:** 3.0 (Complete Series) diff --git a/Les03-Cursor-Basics/Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md b/Les03-Cursor-Basics/Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md new file mode 100644 index 0000000..1252293 --- /dev/null +++ b/Les03-Cursor-Basics/Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md @@ -0,0 +1,638 @@ +# DevDash - Super Hard Debug Challenge (16-18 Errors) + +## Challenge Overview + +This is the **super hard tier** debug challenge with 16-18 intentional errors distributed across 6 categories. Students must identify and fix all errors to make the project run successfully. + +--- + +## CATEGORY 1: BLOCKING ERRORS (3 Errors) + +### Error 1: Missing Dependency - `date-fns` + +**File:** `src/lib/utils.ts` + +**Issue:** The code imports `format` from `date-fns`: +```typescript +import { format } from "date-fns"; +``` + +But `date-fns` is **NOT** listed in `package.json`. + +**Symptom:** Runtime error: "Cannot find module 'date-fns'" + +**Fix:** Add to `package.json` dependencies: +```json +"dependencies": { + "date-fns": "^2.30.0" +} +``` + +--- + +### Error 2: Wrong Import Path - `next/navigations` (with 's') + +**File:** `src/components/Header.tsx` + +**Issue:** +```typescript +import { usePathname } from "next/navigations"; // WRONG - has 's' +``` + +Should be: +```typescript +import { usePathname } from "next/navigation"; // CORRECT +``` + +**Symptom:** Module not found error at build time + +**Fix:** Remove the 's' from the import path. + +--- + +### Error 3: Circular Dependency Crash + +**Files:** `src/lib/types.ts` and `src/lib/utils.ts` + +**Issue:** + +In `src/lib/utils.ts`: +```typescript +import { formatDate } from "./utils"; // Value import, not type +``` + +In `src/lib/types.ts`: +```typescript +import { formatDate } from "./utils"; + +export function createPost(data: Omit): Post { + return { ...data, formattedDate: formatDate(data.date) }; // formatDate is undefined! +} +``` + +**Symptom:** `TypeError: formatDate is not a function` at runtime + +**Fix:** Use `import type` for types to avoid the circular dependency: + +In `src/lib/utils.ts`: +```typescript +import type { Post } from "./types"; // Change to type import +``` + +Alternatively, restructure to avoid circular imports altogether. + +--- + +## CATEGORY 2: NEXT.JS SPECIFIC ERRORS (4 Errors) + +### Error 4: Missing "use client" Directive + +**File:** `src/components/ThemeToggle.tsx` + +**Issue:** The component uses `useState` (a client-side hook) but **lacks** `"use client"` at the top. + +```typescript +// MISSING "use client" at the top! +import { useState } from 'react'; +export function ThemeToggle() { + const [isHovered, setIsHovered] = useState(false); + // ... +} +``` + +**Symptom:** Next.js error: "You're importing a component that needs useState. It only works in Client Components." + +**Fix:** Add at the very top of the file: +```typescript +"use client"; + +import { useState } from 'react'; +``` + +--- + +### Error 5: Hooks in Server Component + +**File:** `src/app/dashboard/page.tsx` + +**Issue:** The page uses `useState` and `useEffect` directly: +```typescript +// MISSING "use client" at the top! +import { useState, useEffect } from 'react'; + +export default function DashboardPage() { + const [isLoading, setIsLoading] = useState(false); + // ... +} +``` + +**Symptom:** Hydration error or "You're importing a component that needs useState" + +**Fix:** Add `"use client"` directive at the top: +```typescript +"use client"; + +import { useState, useEffect } from 'react'; +``` + +--- + +### Error 6: Wrong Middleware Matcher Pattern + +**File:** `middleware.ts` + +**Issue:** +```typescript +export const config = { + matcher: ['/dashboard/:path'], // WRONG - missing asterisk +}; +``` + +This matches `/dashboard/:path` but NOT `/dashboard/page/subpage`. The sub-routes won't be protected. + +Also, the middleware looks for `'auth-token'` cookie but the app doesn't set one: +```typescript +const authToken = request.cookies.get('auth-token')?.value; +``` + +**Symptom:** Sub-routes of dashboard bypass middleware; authentication doesn't work + +**Fix:** +```typescript +export const config = { + matcher: ['/dashboard/:path*'], // Add asterisk for all sub-routes +}; +``` + +And update cookie name to match what's actually used or create a mock auth mechanism. + +--- + +### Error 7: `metadata` Export in Client Component + +**File:** `src/app/blog/[slug]/page.tsx` + +**Issue:** +```typescript +'use client'; // This is a CLIENT component + +export const metadata = { // Can't export metadata from client! + title: 'Blog Post', + description: 'Read the full article', +}; + +import { useParams } from 'next/navigation'; +``` + +**Symptom:** Build error: "Metadata exports must be in a Server Component" + +**Fix (Option 1):** Remove `'use client'` and use function parameters instead of `useParams()`: +```typescript +// Remove "use client" +import { generateMetadata } from 'next'; +import type { Metadata } from 'next'; + +export async function generateMetadata({ params }): Promise { + const post = getPostBySlug(params.slug); + return { + title: post?.title || 'Blog Post', + description: post?.content.substring(0, 100) || '', + }; +} + +export default function BlogPostPage({ params }: { params: { slug: string } }) { + const post = getPostBySlug(params.slug); + // ... +} +``` + +**Fix (Option 2):** Keep as client component and remove metadata export: +```typescript +'use client'; + +// Remove metadata export + +import { useParams } from 'next/navigation'; +// ... rest of component +``` + +--- + +## CATEGORY 3: LOGIC ERRORS (3 Errors) + +### Error 8: Wrong Filter Condition + +**File:** `src/data/posts.ts` + +**Issue:** +```typescript +export function getPublishedPosts(): Post[] { + return posts.filter(p => p.draft); // WRONG - returns DRAFTS! +} +``` + +Should check for `!p.draft` (NOT drafted): +```typescript +export function getPublishedPosts(): Post[] { + return posts.filter(p => !p.draft); // CORRECT +} +``` + +**Symptom:** Blog page shows only draft posts (only 1 post visible instead of 2 published ones) + +**Fix:** Change condition to `!p.draft`. + +--- + +### Error 9: Stale Closure in Event Handler + +**File:** `src/components/Testimonials.tsx` + +**Issue:** +```typescript +useEffect(() => { + const timer = setInterval(() => { + setCurrentIndex(currentIndex + 1); // STALE CLOSURE! + }, 4000); + return () => clearInterval(timer); +}, []); // Empty dependency array captures initial value +``` + +The `currentIndex` is captured from the initial render (0). The interval always increments from 0 to 1, causing the carousel to jump back repeatedly. + +**Symptom:** Testimonial carousel doesn't advance smoothly; always jumps to position 1 + +**Fix:** Use the functional update form of `setState`: +```typescript +useEffect(() => { + const timer = setInterval(() => { + setCurrentIndex(prev => (prev + 1) % testimonials.length); // Use prev! + }, 4000); + return () => clearInterval(timer); +}, []); +``` + +--- + +### Error 10: Using Index as Key + +**File:** `src/components/Features.tsx` + +**Issue:** +```typescript +{displayedFeatures.map((feature, index) => ( +
// WRONG - using index as key + {/* ... */} +
+))} +``` + +Using index as key is problematic if the list reorders or filters. + +**Symptom:** Visual glitches when filtering features; component state gets mixed up + +**Fix:** Use unique identifier: +```typescript +{displayedFeatures.map((feature) => ( +
// Use feature.id + {/* ... */} +
+))} +``` + +--- + +## CATEGORY 4: TYPESCRIPT ERRORS (2 Errors) + +### Error 11: Wrong API Response Type + +**File:** `src/app/api/stats/route.ts` and `src/components/StatsGrid.tsx` + +**Issue:** + +API returns wrapped response: +```typescript +// src/app/api/stats/route.ts +return NextResponse.json({ data: stats }); // Wrapped in { data: ... } +``` + +But component expects unwrapped array: +```typescript +// src/components/StatsGrid.tsx +const data = await response.json(); +setStats(data); // Expects data to be array, but gets { data: [...] } +``` + +Later: +```typescript +{stats.map((stat, index) => ( // stats is an object, not array! +``` + +**Symptom:** TypeError: `stats.map is not a function` + +**Fix - Option 1:** Unwrap in component: +```typescript +const data = await response.json(); +setStats(data.data); // Extract the array +``` + +**Fix - Option 2:** Change API response: +```typescript +return NextResponse.json(stats); // Return array directly +``` + +--- + +### Error 12: Missing Optional Chaining + +**File:** `src/components/UserProfile.tsx` + +**Issue:** +```typescript +{user.profile.avatar} // profile could be undefined! +``` + +The API might return a user without a `profile` object: +```typescript +const user: User = { + id: '1', + name: 'John', + email: 'john@example.com', + // profile is undefined! +}; +``` + +**Symptom:** TypeError: `Cannot read property 'avatar' of undefined` + +**Fix:** Use optional chaining: +```typescript +{user.profile?.avatar} // Safe access +``` + +Or add a null check: +```typescript +{user.profile && user.profile.avatar} +``` + +--- + +## CATEGORY 5: REACT PATTERN ERRORS (3 Errors) + +### Error 13: Missing useEffect Cleanup + +**File:** `src/app/dashboard/page.tsx` + +**Issue:** +```typescript +useEffect(() => { + window.addEventListener('resize', handleResize); + // Missing cleanup! + // Should have: return () => window.removeEventListener('resize', handleResize); +}, []); +``` + +**Symptom:** Memory leak; listeners accumulate when component remounts; "Can't perform a React state update on an unmounted component" warnings + +**Fix:** Add cleanup function: +```typescript +useEffect(() => { + function handleResize() { + setIsLoading(window.innerWidth < 768); + } + + window.addEventListener('resize', handleResize); + + // Add cleanup + return () => { + window.removeEventListener('resize', handleResize); + }; +}, []); +``` + +--- + +### Error 14: Incorrect Context Provider Wrapping + +**File:** `src/app/layout.tsx` + +**Issue:** +```typescript + +
{/* Header tries to use theme context but provider hasn't wrapped it yet! */} + +
+ {children} +
+