From ad8b25e70ced50338dde4192524279d7aca4f023 Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Wed, 17 Jun 2026 07:15:32 +0200 Subject: [PATCH] fix: les --- Les03-Cursor-Basics/00-START-HERE.md | 260 - .../DEBUG-CHALLENGES-OVERVIEW.md | 222 - .../Les03-Debug-Challenge-ANTWOORDEN.md | 175 - .../Les03-Debug-Challenge-Hard-ANTWOORDEN.md | 322 - .../Les03-Debug-Challenge-Hard-Opdracht.pdf | 212 - ...03-Debug-Challenge-SuperHard-ANTWOORDEN.md | 638 -- ...s03-Debug-Challenge-SuperHard-Opdracht.pdf | 269 - .../Les03-Docenttekst-Autocue.md | 232 + .../Les03-Docenttekst-Autocue.pdf | 187 + .../Les03-Docenttekst-Notes.md | 231 - Les03-Cursor-Basics/Les03-Docenttekst.md | 632 +- Les03-Cursor-Basics/Les03-Docenttekst.pdf | 149 + .../Les03-Hands-On-Opdracht.pdf | 231 - Les03-Cursor-Basics/Les03-Huiswerk.md | 375 -- Les03-Cursor-Basics/Les03-Huiswerk.pdf | 225 - .../Les03-Huiswerkopdracht.pdf | 231 - Les03-Cursor-Basics/Les03-Lesopdracht.md | 585 +- Les03-Cursor-Basics/Les03-Lesopdracht.pdf | 224 +- Les03-Cursor-Basics/Les03-Lesplan.md | 240 - Les03-Cursor-Basics/Les03-Lesstof.md | 489 +- Les03-Cursor-Basics/Les03-Lesstof.pdf | 119 +- Les03-Cursor-Basics/Les03-Slide-Overzicht.md | 1184 +--- Les03-Cursor-Basics/Les03-Slides.pdf | Bin 350925 -> 327597 bytes Les03-Cursor-Basics/Les03-Slides.pptx | Bin 55459 -> 61020 bytes .../les3-debug-challenge/.gitignore | 6 - .../les3-debug-challenge/app/about/page.tsx | 103 - .../les3-debug-challenge/app/contact/page.tsx | 124 - .../les3-debug-challenge/app/globals.css | 3 - .../les3-debug-challenge/app/layout.tsx | 23 - .../les3-debug-challenge/app/page.tsx | 12 - .../components/FeatureCards.tsx | 85 - .../components/Footer.tsx | 82 - .../les3-debug-challenge/components/Hero.tsx | 53 - .../components/Navbar.tsx | 59 - .../components/TestimonialSection.tsx | 73 - .../les3-debug-challenge/next.config.mjs | 4 - .../les3-debug-challenge/package-lock.json | 5671 ----------------- .../les3-debug-challenge/package.json | 27 - .../les3-debug-challenge/postcss.config.mjs | 9 - .../les3-debug-challenge/tailwind.config.ts | 13 - .../les3-debug-challenge/tsconfig.json | 20 - Les03-Cursor-Basics/zi4PuQhg | Bin 11311 -> 0 bytes .../Les13-Slides.key | Bin 1286148 -> 1399767 bytes .../.~lock.Les14-Slides.pdf# | 1 - .../Les14-Docenttekst-Autocue.md | 427 ++ .../Les14-Docenttekst-Autocue.pdf | 289 + .../Les14-Docenttekst.md | 525 +- .../Les14-Docenttekst.pdf | 143 + Les14-Cursor-Vercel-Deploy/Les14-Huiswerk.md | 313 - Les14-Cursor-Vercel-Deploy/Les14-Huiswerk.pdf | 194 - .../Les14-Lesopdracht.md | 322 +- .../Les14-Lesopdracht.pdf | 102 +- Les14-Cursor-Vercel-Deploy/Les14-Lesstof.md | 860 ++- Les14-Cursor-Vercel-Deploy/Les14-Lesstof.pdf | 180 +- .../Les14-Slide-Overzicht.md | 827 ++- Les14-Cursor-Vercel-Deploy/Les14-Slides.key | Bin 1313670 -> 1447054 bytes Les14-Cursor-Vercel-Deploy/Les14-Slides.pdf | Bin 421029 -> 476222 bytes Les14-Cursor-Vercel-Deploy/Les14-Slides.pptx | Bin 60061 -> 74832 bytes .../lesbestanden/cursor-templates/AGENTS.md | 29 + .../lesbestanden/cursor-templates/README.md | 9 + .../cursor-templates/feature-prompts.md | 28 + .../lesbestanden/cursor-templates/general.mdc | 21 + .../lesbestanden/pokedex-finished.zip | Bin 3935 -> 0 bytes .../lesbestanden/pokedex-starter.zip | Bin 2636 -> 0 bytes Les15-MCP/Les15-Docenttekst-Autocue.md | 228 + Les15-MCP/Les15-Docenttekst-Autocue.pdf | 187 + Les15-MCP/Les15-Docenttekst.md | 213 + Les15-MCP/Les15-Docenttekst.pdf | 162 + Les15-MCP/Les15-Huiswerk.md | 147 + Les15-MCP/Les15-Huiswerk.pdf | 118 + Les15-MCP/Les15-Lesopdracht.md | 264 + Les15-MCP/Les15-Lesopdracht.pdf | 187 + Les15-MCP/Les15-Lesstof.md | 325 + Les15-MCP/Les15-Lesstof.pdf | 206 + Les15-MCP/Les15-Slide-Overzicht.md | 404 ++ Les15-MCP/Les15-Slides.pdf | Bin 0 -> 405784 bytes Les15-MCP/Les15-Slides.pptx | Bin 0 -> 62303 bytes Les15-MCP/lesbestanden/cursor-mcp-config.zip | Bin 0 -> 1583 bytes .../lesbestanden/polderfest-mcp-finished.zip | Bin 0 -> 7554 bytes .../lesbestanden/polderfest-mcp-starter.zip | Bin 0 -> 6944 bytes Les15-RAG-Embeddings/lu43khle3.tmp | Bin 414966 -> 0 bytes Les16-MCP/.~lock.Les16-Slides.pdf# | 1 - Les16-MCP/Les16-Docenttekst.md | 412 -- Les16-MCP/Les16-Huiswerk.md | 301 - Les16-MCP/Les16-Huiswerk.pdf | 137 - Les16-MCP/Les16-Lesopdracht.md | 218 - Les16-MCP/Les16-Lesopdracht.pdf | 143 - Les16-MCP/Les16-Lesstof.md | 523 -- Les16-MCP/Les16-Lesstof.pdf | 257 - Les16-MCP/Les16-Slide-Overzicht.md | 377 -- Les16-MCP/Les16-Slides.key | Bin 1284071 -> 0 bytes Les16-MCP/Les16-Slides.pdf | Bin 393856 -> 0 bytes Les16-MCP/Les16-Slides.pptx | Bin 56983 -> 0 bytes Les16-MCP/lesbestanden/mcp-starter.zip | Bin 1599 -> 0 bytes .../lesbestanden/polderfest-mcp-finished.zip | Bin 2302 -> 0 bytes Les16-MCP/lu45lvnjc.tmp | Bin 393856 -> 0 bytes .../.~lock.Les14-Slides.pdf# | 0 .../Les16-Docenttekst.md | 6 +- .../Les16-Huiswerk.md | 0 .../Les16-Huiswerk.pdf | 0 .../Les16-Lesopdracht.md | 0 .../Les16-Lesopdracht.pdf | 0 .../Les16-Lesstof.md | 0 .../Les16-Lesstof.pdf | 0 .../Les16-Slide-Overzicht.md | 0 .../Les16-Slides.pdf | Bin .../Les16-Slides.pptx | Bin .../lesbestanden/rag-finished.zip | Bin .../lesbestanden/rag-starter.zip | Bin OPLEVERING.md | 4 +- Samenvattingen/Les03-Samenvatting.md | 132 +- Samenvattingen/Les14-Samenvatting.md | 93 +- Samenvattingen/Les15-Samenvatting.md | 92 +- Samenvattingen/Les16-Samenvatting.md | 77 +- readme.md | 4 +- 115 files changed, 6316 insertions(+), 16971 deletions(-) delete mode 100644 Les03-Cursor-Basics/00-START-HERE.md delete mode 100644 Les03-Cursor-Basics/DEBUG-CHALLENGES-OVERVIEW.md delete mode 100644 Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md delete mode 100644 Les03-Cursor-Basics/Les03-Debug-Challenge-Hard-ANTWOORDEN.md delete mode 100644 Les03-Cursor-Basics/Les03-Debug-Challenge-Hard-Opdracht.pdf delete mode 100644 Les03-Cursor-Basics/Les03-Debug-Challenge-SuperHard-ANTWOORDEN.md delete mode 100644 Les03-Cursor-Basics/Les03-Debug-Challenge-SuperHard-Opdracht.pdf create mode 100644 Les03-Cursor-Basics/Les03-Docenttekst-Autocue.md create mode 100644 Les03-Cursor-Basics/Les03-Docenttekst-Autocue.pdf delete mode 100644 Les03-Cursor-Basics/Les03-Docenttekst-Notes.md create mode 100644 Les03-Cursor-Basics/Les03-Docenttekst.pdf delete mode 100644 Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf delete mode 100644 Les03-Cursor-Basics/Les03-Huiswerk.md delete mode 100644 Les03-Cursor-Basics/Les03-Huiswerk.pdf delete mode 100644 Les03-Cursor-Basics/Les03-Huiswerkopdracht.pdf delete mode 100644 Les03-Cursor-Basics/Les03-Lesplan.md delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/.gitignore delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/app/about/page.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/app/contact/page.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/app/globals.css delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/app/layout.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/app/page.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/components/FeatureCards.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/components/Footer.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/components/Hero.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/components/Navbar.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/components/TestimonialSection.tsx delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/next.config.mjs delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/package-lock.json delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/package.json delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/postcss.config.mjs delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/tailwind.config.ts delete mode 100644 Les03-Cursor-Basics/les3-debug-challenge/tsconfig.json delete mode 100644 Les03-Cursor-Basics/zi4PuQhg rename Les15-RAG-Embeddings/Les15-Slides.key => Les13-Agents/Les13-Slides.key (67%) delete mode 100644 Les14-Cursor-Vercel-Deploy/.~lock.Les14-Slides.pdf# create mode 100644 Les14-Cursor-Vercel-Deploy/Les14-Docenttekst-Autocue.md create mode 100644 Les14-Cursor-Vercel-Deploy/Les14-Docenttekst-Autocue.pdf create mode 100644 Les14-Cursor-Vercel-Deploy/Les14-Docenttekst.pdf delete mode 100644 Les14-Cursor-Vercel-Deploy/Les14-Huiswerk.md delete mode 100644 Les14-Cursor-Vercel-Deploy/Les14-Huiswerk.pdf create mode 100644 Les14-Cursor-Vercel-Deploy/lesbestanden/cursor-templates/AGENTS.md create mode 100644 Les14-Cursor-Vercel-Deploy/lesbestanden/cursor-templates/README.md create mode 100644 Les14-Cursor-Vercel-Deploy/lesbestanden/cursor-templates/feature-prompts.md create mode 100644 Les14-Cursor-Vercel-Deploy/lesbestanden/cursor-templates/general.mdc delete mode 100644 Les14-Cursor-Vercel-Deploy/lesbestanden/pokedex-finished.zip delete mode 100644 Les14-Cursor-Vercel-Deploy/lesbestanden/pokedex-starter.zip create mode 100644 Les15-MCP/Les15-Docenttekst-Autocue.md create mode 100644 Les15-MCP/Les15-Docenttekst-Autocue.pdf create mode 100644 Les15-MCP/Les15-Docenttekst.md create mode 100644 Les15-MCP/Les15-Docenttekst.pdf create mode 100644 Les15-MCP/Les15-Huiswerk.md create mode 100644 Les15-MCP/Les15-Huiswerk.pdf create mode 100644 Les15-MCP/Les15-Lesopdracht.md create mode 100644 Les15-MCP/Les15-Lesopdracht.pdf create mode 100644 Les15-MCP/Les15-Lesstof.md create mode 100644 Les15-MCP/Les15-Lesstof.pdf create mode 100644 Les15-MCP/Les15-Slide-Overzicht.md create mode 100644 Les15-MCP/Les15-Slides.pdf create mode 100644 Les15-MCP/Les15-Slides.pptx create mode 100644 Les15-MCP/lesbestanden/cursor-mcp-config.zip create mode 100644 Les15-MCP/lesbestanden/polderfest-mcp-finished.zip create mode 100644 Les15-MCP/lesbestanden/polderfest-mcp-starter.zip delete mode 100644 Les15-RAG-Embeddings/lu43khle3.tmp delete mode 100644 Les16-MCP/.~lock.Les16-Slides.pdf# delete mode 100644 Les16-MCP/Les16-Docenttekst.md delete mode 100644 Les16-MCP/Les16-Huiswerk.md delete mode 100644 Les16-MCP/Les16-Huiswerk.pdf delete mode 100644 Les16-MCP/Les16-Lesopdracht.md delete mode 100644 Les16-MCP/Les16-Lesopdracht.pdf delete mode 100644 Les16-MCP/Les16-Lesstof.md delete mode 100644 Les16-MCP/Les16-Lesstof.pdf delete mode 100644 Les16-MCP/Les16-Slide-Overzicht.md delete mode 100755 Les16-MCP/Les16-Slides.key delete mode 100644 Les16-MCP/Les16-Slides.pdf delete mode 100644 Les16-MCP/Les16-Slides.pptx delete mode 100644 Les16-MCP/lesbestanden/mcp-starter.zip delete mode 100644 Les16-MCP/lesbestanden/polderfest-mcp-finished.zip delete mode 100644 Les16-MCP/lu45lvnjc.tmp rename {Les15-RAG-Embeddings => Les16-RAG-Embeddings}/.~lock.Les14-Slides.pdf# (100%) rename Les15-RAG-Embeddings/Les15-Docenttekst.md => Les16-RAG-Embeddings/Les16-Docenttekst.md (99%) rename Les15-RAG-Embeddings/Les15-Huiswerk.md => Les16-RAG-Embeddings/Les16-Huiswerk.md (100%) rename Les15-RAG-Embeddings/Les15-Huiswerk.pdf => Les16-RAG-Embeddings/Les16-Huiswerk.pdf (100%) rename Les15-RAG-Embeddings/Les15-Lesopdracht.md => Les16-RAG-Embeddings/Les16-Lesopdracht.md (100%) rename Les15-RAG-Embeddings/Les15-Lesopdracht.pdf => Les16-RAG-Embeddings/Les16-Lesopdracht.pdf (100%) rename Les15-RAG-Embeddings/Les15-Lesstof.md => Les16-RAG-Embeddings/Les16-Lesstof.md (100%) rename Les15-RAG-Embeddings/Les15-Lesstof.pdf => Les16-RAG-Embeddings/Les16-Lesstof.pdf (100%) rename Les15-RAG-Embeddings/Les15-Slide-Overzicht.md => Les16-RAG-Embeddings/Les16-Slide-Overzicht.md (100%) rename Les15-RAG-Embeddings/Les15-Slides.pdf => Les16-RAG-Embeddings/Les16-Slides.pdf (100%) rename Les15-RAG-Embeddings/Les15-Slides.pptx => Les16-RAG-Embeddings/Les16-Slides.pptx (100%) rename {Les15-RAG-Embeddings => Les16-RAG-Embeddings}/lesbestanden/rag-finished.zip (100%) rename {Les15-RAG-Embeddings => Les16-RAG-Embeddings}/lesbestanden/rag-starter.zip (100%) 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 `