novi-lessons/Les03-Cursor-Basics/DEBUG-CHALLENGES-OVERVIEW.md

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:

# 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)