fix: add lesson 3
This commit is contained in:
Tim Rijkse
260
Les03-Cursor-Basics/00-START-HERE.md
Normal file
260
Les03-Cursor-Basics/00-START-HERE.md
Normal file
@@ -0,0 +1,260 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user