223 lines
6.2 KiB
Markdown
223 lines
6.2 KiB
Markdown
# 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)
|