diff --git a/Les03-Cursor-Basics/00-START-HERE.md b/Les03-Cursor-Basics/00-START-HERE.md deleted file mode 100644 index f203a59..0000000 --- a/Les03-Cursor-Basics/00-START-HERE.md +++ /dev/null @@ -1,260 +0,0 @@ -# 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 deleted file mode 100644 index 21e7b5a..0000000 --- a/Les03-Cursor-Basics/DEBUG-CHALLENGES-OVERVIEW.md +++ /dev/null @@ -1,222 +0,0 @@ -# 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-ANTWOORDEN.md b/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md deleted file mode 100644 index 0e3be1d..0000000 --- a/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md +++ /dev/null @@ -1,175 +0,0 @@ -# Debug Challenge - Antwoordenblad (ALLEEN VOOR TIM) - -**⚠️ NIET DELEN MET STUDENTEN** - ---- - -## Overzicht Fouten - -Het project bevat **4 typen fouten**, verspreid over **8 bestanden**. - ---- - -## FOUT 1: Missing Dependency — `lucide-react` - -**Bestanden:** `components/Hero.tsx`, `components/FeatureCards.tsx` -**Symptoom:** `npm install` werkt, maar `npm run dev` geeft: -``` -Module not found: Can't resolve 'lucide-react' -``` - -**Oorzaak:** `lucide-react` wordt geïmporteerd in Hero.tsx en FeatureCards.tsx, maar staat NIET in package.json. - -**Fix:** -```bash -npm install lucide-react -``` - -**Leerdoel:** Studenten leren dat je imports moet matchen met dependencies in package.json. - ---- - -## FOUT 2: Typo in Import Path - -**Bestand:** `app/page.tsx` (regel 1) -**Symptoom:** -``` -Module not found: Can't resolve '@/componenst/Hero' -``` - -**Oorzaak:** Typo: `@/componenst/Hero` i.p.v. `@/components/Hero` - -**Fix:** -```tsx -// FOUT: -import Hero from "@/componenst/Hero"; - -// CORRECT: -import Hero from "@/components/Hero"; -``` - -**Leerdoel:** Lezen van error messages, herkennen van typos in import paden. - ---- - -## FOUT 3: Missing Import — `TestimonialSection` - -**Bestand:** `app/page.tsx` (regel 9) -**Symptoom:** -``` -ReferenceError: TestimonialSection is not defined -``` - -**Oorzaak:** `` wordt gebruikt in page.tsx maar is niet geïmporteerd. - -**Fix:** Voeg import toe bovenaan page.tsx: -```tsx -import TestimonialSection from "@/components/TestimonialSection"; -``` - -**Leerdoel:** Begrijpen dat elk component geïmporteerd moet worden. - ---- - -## FOUT 4: Missing Imports in layout.tsx — `Navbar` en `Footer` - -**Bestand:** `app/layout.tsx` (regels 17-18) -**Symptoom:** -``` -ReferenceError: Navbar is not defined -ReferenceError: Footer is not defined -``` - -**Oorzaak:** `` en `