261 lines
7.7 KiB
Markdown
261 lines
7.7 KiB
Markdown
# 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
|