fix: add lesson 3

2026-02-27 13:56:19 +01:00
parent 1822546a8e
commit 7d50c78e39
60 changed files with 19865 additions and 1 deletions
--- a/Les03-Cursor-Basics/DEBUG-CHALLENGES-OVERVIEW.md
+++ 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)