Practice and reinforce the concepts from Lesson 13
Master professional code quality workflows: configure linting, run build pipelines, write conventional commits, and implement quality gates. Practice fixing real linting errors, running production builds, and creating professional version control histories.
Prerequisites: Concept 13, Spelling Bee project, Node.js/npm, Git | Download: AI3-Template-activity-13-quality.zip | Setup: Extract template, npm install, verify ESLint with npm run lint
| Task | Command/Action | Success Criteria |
|---|---|---|
| Install ESLint | npm install --save-dev eslint && npx eslint --version |
Version number displays (e.g., "v8.x.x") |
| Configure ESLint | Template includes .eslintrc.js with rules: no-console, no-unused-vars, prefer-const, eqeqeq, no-var |
File exists in project root |
| Add Scripts | Template includes package.json scripts: lint, lint:fix |
Scripts appear in package.json |
| Run Linting | npm run lint |
Output shows errors/warnings count |
| Document Errors | Create linting-report.md with sections: Total Errors, Error Breakdown by Rule, Most Common Errors |
Report lists 3+ error types with file/line numbers |
| Auto-Fix | npm run lint:fix && git diff |
Some errors auto-fixed, diff shows changes |
| Manual Fixes | Fix remaining errors, re-run npm run lint |
Output: "✔ All files pass linting" |
💡 Tip: Template includes intentional linting errors (unused vars, console.logs) for practice.
| Pipeline Stage | Command | Document in Report |
|---|---|---|
| Linting | npm run lint:fix |
Status (PASS/FAIL), Errors Fixed, Time |
| Type Check (TS only) | npm run type-check |
Status, Type Errors count, Time |
| Build | npm run build |
Status, Output Size (KB/MB), Build Time, File List |
| Full Validation | npm run validate |
Screenshot of successful pipeline completion |
Troubleshooting Practice:
| Error Type | Introduce Error | Expected Output | Fix |
|---|---|---|---|
| Type Error (TS) | const state: GameState = { score: 0 } (missing difficulty) |
Property 'difficulty' is missing |
Add missing property |
| Import Error | import Foo from './DoesNotExist' |
Cannot find module |
Remove or correct import |
| Unused Vars | Declare bonus, penalty but don't use |
ESLint warns about unused vars | Use or remove variables |
Deliverable: troubleshooting-log.md with 3 error scenarios, each documented with: Error Message, Root Cause, Solution, Prevention
Rewrite Bad Commits:
| Bad Commit | Context | Your Rewrite (Conventional Format) |
|---|---|---|
| "update" | Added difficulty selector (Easy/Medium/Hard) | feat: Add difficulty selector with Easy/Medium/Hard options |
| "fixed bug" | Timer continued after game ended | fix: Stop timer when game ends to prevent extra time penalty |
| "wip" | Refactored scoring logic to utils | refactor: Extract scoring logic into separate utility module |
| "changes" | Updated README with setup instructions | docs: Add installation instructions and screenshots to README |
| "final final v2" | Completed all project requirements | chore: Complete final submission - passed all quality checks |
Multi-File Commit Practice:
# Stage related changes together
git add src/components/Game.jsx src/styles/game.css
git commit -m "feat: Add hint button with point penalty system"
# Multi-line descriptive commit
git commit -m "feat: Implement progressive difficulty system
- Easy: 3-4 letter words, unlimited hints
- Medium: 5-7 letter words, 3 hints
- Hard: 8+ letter words, no hints"
# Verify history
git log --oneline -5
Deliverable: Screenshot of git log showing 5+ conventional commits
Quality Checklist (complete all items):
| Category | Checklist Items | Verification |
|---|---|---|
| Code Quality | npm run validate passes, No console.log, No unused vars, Consistent style |
Run validation command |
| Functionality | All features work, Tested edge cases (empty input, invalid input, API failures) | Manual testing |
| Documentation | README with title/description/features/install/usage/screenshots, Code comments, .env.example |
Check files exist |
| Version Control | Conventional commits, .gitignore includes node_modules/.env/dist, Pushed to GitHub |
git log, check .gitignore |
| Professional Polish | No TODOs, Error handling, Loading states, User-friendly messages | Code review |
Final Validation Workflow:
# Pre-flight
npm run clean && git status
# Full validation
npm run validate
# Final commit
git commit -m "chore: Final submission - passed all quality checks"
# Push
git push origin main
# Clean install test (simulate evaluator)
cd /tmp && git clone YOUR_REPO && cd PROJECT
npm install && npm run validate && npm run dev
Deliverable: validation-report.md with timestamps, validation results (PASS/FAIL for each stage), build output sizes, clean install test results
Deliverables:
linting-report.md - Error analysis with 3+ error types documentedtroubleshooting-log.md - 3 error scenarios with fixesvalidation-report.md - Pipeline results with timestamps and sizesnpm run validate, git log with 5+ conventional commitsProject Structure:
spelling-bee/
├── .eslintrc.js
├── package.json (with lint/build scripts)
├── linting-report.md
├── troubleshooting-log.md
└── validation-report.md
| Error | Cause | Solution |
|---|---|---|
eslint: command not found |
ESLint not installed | npm install -g eslint or use npx eslint . |
Cannot find module 'vite' |
Dependencies missing | rm -rf node_modules package-lock.json && npm install |
tsc: command not found |
TypeScript not installed | npm install --save-dev typescript (or skip type-check for JS projects) |
| Git push rejected | Remote has newer commits | git pull origin main && git push origin main |
max-len, no-magic-numbers, prefer-arrow-callback to .eslintrc.jsnpm install --save-dev husky && npx husky init && echo "npm run lint" > .husky/pre-commit.github/workflows/validate.yml for GitHub Actions automationSubmit: (1) linting-report.md, (2) validation-report.md, (3) Clean ESLint screenshot, (4) npm run validate screenshot, (5) Git log screenshot, (6) GitHub repository link
Format: ZIP file or GitHub URL