examples: complete WP8.2 - examples/web with Next.js 14 blueprint demo

Created comprehensive Next.js 14 example application (~800 lines, 15 files):

Application Structure:
- README.md (~400 lines)
  * Comprehensive setup and usage guide
  * 10-step workflow walkthrough
  * Testing instructions
  * Troubleshooting section
  * Quick start in <5 commands

Configuration Files:
- package.json (Next.js 14, TypeScript, Jest, Testing Library)
- tsconfig.json (strict TypeScript configuration)
- next.config.js (Next.js configuration)
- .eslintrc.json (ESLint rules)
- jest.config.js + jest.setup.js (Jest configuration)
- .gitignore (standard Next.js gitignore)

Source Files:
- src/app/layout.tsx (root layout with metadata)
- src/app/page.tsx (demo home page with documentation links)
- src/app/globals.css (professional responsive design)
- src/app/__tests__/page.test.tsx (example Jest test)

Example Data:
- plan.json (5-task Todo app plan with dependencies)
  * Task 1: Project structure
  * Task 2: Data model (dependency for tasks 3-5)
  * Task 3: List UI (depends on task 2)
  * Task 4: CRUD operations (depends on tasks 2, 3)
  * Task 5: Filtering (depends on tasks 2, 3, 4)
- test-data/example-issue.json (sample issue format from workflow)
- test-data/example-pr.json (sample PR format from workflow)

Features:
✅ Works out of the box (`pnpm install && pnpm dev`)
✅ All quality checks pass (lint, type-check, test, build)
✅ Pre-configured for blueprint workflows
✅ Comprehensive README with step-by-step guide
✅ Example plan demonstrates dependencies
✅ Professional UI with responsive design
✅ Clear learning path for new users

Quality Checks:
- pnpm run lint ✅ (ESLint validation)
- pnpm run type-check ✅ (TypeScript strict)
- pnpm run test ✅ (Jest with React Testing Library)
- pnpm run build ✅ (Production build)

Progress Update:
- Phase 3: 80% → 87% complete (12/15 → 13/15 deliverables)
- WP8: 25% → 50% complete (1/4 → 2/4 deliverables)
  - ✅ scenarios.md (~1,100 lines)
  - ✅ examples/web (~800 lines, 15 files)
  - ⏳ examples/mobile (next)
  - ⏳ examples/fullstack

Also updated:
- .gitignore (removed examples/ exclusion to include new examples)

🎯 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: alirezarezvani

.gitignore

@@ -1,4 +1,3 @@
-examples/
 anthropics-claude-code-gh-actions.md
 claude-code-github-document.md
 gh-workflow-master-instructions.md

.phase3-state.md

@@ -1,7 +1,7 @@
 # Phase 3 Implementation State
 
 **Date**: 2025-11-06
-**Status**: In Progress (80% Complete)
+**Status**: In Progress (87% Complete)
 
 ---
 
@@ -12,9 +12,9 @@
 ### Implementation Progress
 - **Phase 1**: ✅ 100% Complete (19 files, 3,342 lines) - Workflows + Composites + Templates
 - **Phase 2**: ✅ 100% Complete (12 files, 8,738 lines) - Slash Commands + Agents
-- **Phase 3**: 🟡 80% Complete (12/15 deliverables, ~13,200 lines documented)
+- **Phase 3**: 🟡 87% Complete (13/15 deliverables, ~14,000 lines documented)
 
-**Total**: 35 core files + 10 docs + 10 setup files + 1 test doc = 56 deliverables (~25,400 lines)
+**Total**: 35 core files + 10 docs + 10 setup files + 1 test doc + 1 web example = 57 deliverables (~26,200 lines)
 
 ---
 
@@ -237,9 +237,9 @@
    - Exit code 0 (success) or 1 (failure) for CI integration
    - Summary report with statistics
 
-### Session 9 - Testing Scenarios (1/4 deliverables) ✅ STARTED
+### Session 9 - Testing Scenarios (1/4 deliverables) ✅
 
-**Commit [current]** - Test Scenarios:
+**Commit e83dc1b** - Test Scenarios:
 
 17. **tests/scenarios.md** (COMPLETE - ~1,100 lines)
    - Comprehensive end-to-end test scenarios document
@@ -265,15 +265,46 @@
    - Test summary template
    - Certification section
 
+### Session 10 - Web Example (2/4 deliverables) ✅
+
+**Commit [current]** - Web Example:
+
+18. **examples/web/** (COMPLETE - ~800 lines)
+   - Minimal working Next.js 14 application with blueprint pre-configured
+   - Complete application files:
+     * README.md (~400 lines - comprehensive setup and usage guide)
+     * package.json (Next.js 14, TypeScript, Jest, Testing Library)
+     * tsconfig.json (TypeScript strict configuration)
+     * next.config.js (Next.js configuration)
+     * .gitignore (standard Next.js gitignore)
+     * .eslintrc.json (ESLint configuration)
+     * jest.config.js + jest.setup.js (Jest configuration)
+   - Source files:
+     * src/app/layout.tsx (root layout with metadata)
+     * src/app/page.tsx (home page with demo content)
+     * src/app/globals.css (global styles)
+     * src/app/__tests__/page.test.tsx (example test)
+   - Example data:
+     * plan.json (5-task Todo app plan with dependencies)
+     * test-data/example-issue.json (sample issue format)
+     * test-data/example-pr.json (sample PR format)
+   - Features:
+     * Works out of the box (`pnpm install && pnpm dev`)
+     * All quality checks pass (lint, type-check, test, build)
+     * Pre-configured for blueprint workflows
+     * Comprehensive README with 10-step workflow guide
+     * Sample plan demonstrates dependencies and priorities
+     * Professional UI with responsive design
+
 ---
 
 ## Remaining Phase 3 Work
 
 ### WP6: Core Documentation ✅ COMPLETE (8/8 files)
 ### WP7: Setup Automation ✅ COMPLETE (10 files: 1 wizard + 6 configs + 1 validator)
-### WP8: Testing & Examples 🟡 25% COMPLETE (1/4 deliverables)
+### WP8: Testing & Examples 🟡 50% COMPLETE (2/4 deliverables)
 - ✅ tests/scenarios.md - 8 end-to-end test scenarios (~1,100 lines)
-- ⏳ examples/web/ - Minimal Next.js example with blueprint
+- ✅ examples/web/ - Minimal Next.js example (~800 lines)
 - ⏳ examples/mobile/ - Minimal Expo/React Native example
 - ⏳ examples/fullstack/ - Minimal MERN stack example
 
@@ -364,35 +395,35 @@ CLAUDE.md ✅ (updated)
 **🎉 WP6 (Core Documentation) COMPLETE!**
 **🎉 WP7 (Setup Automation) COMPLETE!**
 **🎉 scenarios.md COMPLETE!**
+**🎉 examples/web/ COMPLETE!**
 
-**Continue WP8: Testing & Examples** (3 remaining deliverables - 2-3 hours)
+**Continue WP8: Testing & Examples** (2 remaining deliverables - 1-2 hours)
 
-**Next Deliverable**: `examples/web/` - Minimal Next.js example
+**Next Deliverable**: `examples/mobile/` - Minimal Expo/React Native example
 
 **Structure**:
 ```
-examples/web/
+examples/mobile/
 ├── README.md (setup and usage instructions)
-├── package.json (Next.js 14+ with TypeScript)
+├── package.json (Expo SDK 50+)
+├── app.json (Expo configuration)
+├── App.tsx (main app component)
 ├── src/
-│   └── app/
-│       ├── page.tsx (simple home page)
-│       └── layout.tsx
-├── .github/ (blueprint workflows - copied)
-├── plan.json (example 5-task plan)
-├── .gitignore
+│   ├── screens/ (example screens)
+│   └── components/ (shared components)
+├── plan.json (example 5-task mobile plan)
 └── test-data/
     ├── example-issue.json
     └── example-pr.json
 ```
 
 **Requirements**:
-- Minimal working Next.js app
+- Minimal working Expo app
 - Pre-configured with blueprint workflows
-- Example plan with 5 realistic tasks
-- Works out of the box (`pnpm install && pnpm dev`)
-- Clear README with setup steps
-- Sample test data for demonstrations
+- Example plan with 5 mobile-specific tasks
+- Works with Expo Go (`pnpm start`)
+- Clear README with mobile-specific setup
+- Sample test data
 
 **Estimated**: 1 hour
 

CLAUDE.md

@@ -194,7 +194,7 @@ claudecode-github-bluprint/
 ---
 
 ### **Phase 3: Documentation & Polish** (Week 3)
-**Status**: 🟡 In Progress (80% Complete - 12/15 deliverables)
+**Status**: 🟡 In Progress (87% Complete - 13/15 deliverables)
 
 **Detailed Work Plan**: See `docs/PHASE3_WORKPLAN.md` for comprehensive implementation guide
 
@@ -225,27 +225,29 @@ claudecode-github-bluprint/
   - [x] configs/standard-fullstack.json (pre-built configuration)
   - [x] configs/custom-template.json (customization template)
   - [x] validate.sh (546 lines - post-setup validation)
-- [x] **WP8: Testing & Examples** 🟡 25% (1/4 deliverables - 1 hour completed)
+- [x] **WP8: Testing & Examples** 🟡 50% (2/4 deliverables - 2 hours completed)
   - [x] scenarios.md (~1,100 lines - 8 end-to-end test scenarios)
-  - [ ] examples/web (minimal Next.js app)
+  - [x] examples/web (~800 lines - Next.js 14 example)
   - [ ] examples/mobile (minimal Expo app)
   - [ ] examples/fullstack (minimal MERN stack)
 
-**Phase 3 Status**: 12/15 deliverables complete (~13,200 lines documented)
+**Phase 3 Status**: 13/15 deliverables complete (~14,000 lines documented)
 - **Commit 2ce8c02**: README.md + QUICK_START.md (735 lines)
 - **Commit dc116d1**: COMPLETE_SETUP.md + TROUBLESHOOTING.md (1,582 lines)
 - **Commit f098a82**: WORKFLOWS.md (2,555 lines)
 - **Commit efed977**: COMMANDS.md (3,078 lines)
 - **Commit b99caa0**: CUSTOMIZATION.md (989 lines)
 - **Commit 9d2afcb**: ARCHITECTURE.md (1,287 lines) + WP6 COMPLETE
 - **Commit 1bb36ee**: wizard.sh + 6 configs + validate.sh (~1,329 lines) + WP7 COMPLETE
-- **Commit [current]**: scenarios.md (~1,100 lines)
+- **Commit e83dc1b**: scenarios.md (~1,100 lines)
+- **Commit [current]**: examples/web (~800 lines)
 
 **🎉 WP6 (Core Documentation) COMPLETE!**
 **🎉 WP7 (Setup Automation) COMPLETE!**
 **🎉 scenarios.md COMPLETE!**
+**🎉 examples/web/ COMPLETE!**
 
-**Next**: WP8 - Testing & Examples (3 example projects: web, mobile, fullstack)
+**Next**: WP8 - Testing & Examples (2 remaining: mobile + fullstack)
 
 ---
 
@@ -324,17 +326,17 @@ The blueprint supports three strategies (user choice):
 
 ## 🚦 Current Status
 
-**Phase**: 2 ✅ **COMPLETE** | Phase 3 (Documentation) 🟡 **IN PROGRESS** (80%)
+**Phase**: 2 ✅ **COMPLETE** | Phase 3 (Documentation) 🟡 **IN PROGRESS** (87%)
 **Week**: 3
 **Last Updated**: 2025-11-06
 **Overall Progress**:
 - Phase 1: ✅ 100% Complete (19 files, 3,342 lines)
 - Phase 2: ✅ 100% Complete (12 files, 8,738 lines)
-- Phase 3: 🟡 80% Complete (12/15 deliverables, ~13,200 lines documented)
+- Phase 3: 🟡 87% Complete (13/15 deliverables, ~14,000 lines documented)
   - **WP6: Core Documentation** ✅ 100% COMPLETE (8/8 files)
   - **WP7: Setup Automation** ✅ 100% COMPLETE (10 files: wizard + 6 configs + validator)
-  - **WP8: Testing & Examples** 🟡 25% COMPLETE (1/4 deliverables: scenarios.md)
-**Total Implementation**: 31 core files + 8 docs + 10 setup files + 1 test doc = 50 deliverables (~25,400 lines)
+  - **WP8: Testing & Examples** 🟡 50% COMPLETE (2/4 deliverables: scenarios + web example)
+**Total Implementation**: 31 core files + 8 docs + 10 setup files + 1 test doc + 1 web example = 51 deliverables (~26,200 lines)
 
 ### Completed ✅
 - ✅ PRD created (implementation.md)
@@ -395,13 +397,14 @@ The blueprint supports three strategies (user choice):
   - TROUBLESHOOTING.md (1000+ lines - comprehensive issue resolution)
   - **Commit dc116d1**: 1,582 lines added
 
-**🔄 PHASE 3 IN PROGRESS! 12/15 deliverables complete (80%)**
+**🔄 PHASE 3 IN PROGRESS! 13/15 deliverables complete (87%)**
 **🎉 WP6 (Core Documentation) 100% COMPLETE!**
 **🎉 WP7 (Setup Automation) 100% COMPLETE!**
 **🎉 scenarios.md COMPLETE!**
+**🎉 examples/web/ COMPLETE!**
 
 ### Next Steps
-**Phase 3: Documentation & Polish** (Week 3 - 80% Complete)
+**Phase 3: Documentation & Polish** (Week 3 - 87% Complete)
 
 **✅ WP6: Core Documentation (COMPLETE)**
 - ✅ README.md (professional first impression)
@@ -423,10 +426,10 @@ The blueprint supports three strategies (user choice):
 - ✅ configs/custom-template.json (customization template)
 - ✅ validate.sh (post-setup validation - 546 lines)
 
-**✅ WP8: Testing & Examples (25% COMPLETE - 3 remaining)**
+**✅ WP8: Testing & Examples (50% COMPLETE - 2 remaining)**
 - ✅ tests/scenarios.md (8 end-to-end test scenarios - ~1,100 lines)
-- ⏳ examples/web/ (Next.js example) - NEXT
-- ⏳ examples/mobile/ (Expo example)
+- ✅ examples/web/ (Next.js 14 example - ~800 lines, 15 files)
+- ⏳ examples/mobile/ (Expo example) - NEXT
 - ⏳ examples/fullstack/ (MERN example)
 
 See `docs/PHASE3_WORKPLAN.md` for detailed Phase 3 implementation plan

examples/web/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ]
+  }
+}

examples/web/.gitignore

@@ -0,0 +1,40 @@
+# Dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Next.js
+/.next/
+/out/
+next-env.d.ts
+
+# Production
+/build
+/dist
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Local env files
+.env
+.env*.local
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+
+# IDE
+.vscode
+.idea