Initial commit

2025-11-30 08:47:33 +08:00
commit e430757b63
23 changed files with 5332 additions and 0 deletions
--- a/commands/projects.md
+++ b/commands/projects.md
@@ -0,0 +1,515 @@
+# /projects - Hands-On Projects
+
+## Practice Your Angular Skills
+
+Master Angular through 50+ carefully designed hands-on projects. Each project reinforces specific concepts and builds toward real-world applications.
+
+---
+
+## 🎯 Projects by Difficulty Level
+
+### Beginner Projects (1-2 weeks each)
+
+#### Project 1: Personal Portfolio Website
+**Topics**: Components, templates, basic routing, styling
+**Duration**: 5-7 days
+**Skills**: HTML, CSS, TypeScript basics
+
+**Requirements**:
+- Home page with personal info
+- About page
+- Projects showcase
+- Contact section
+- Responsive design
+
+**Learning Outcomes**:
+✅ Component structure
+✅ Template syntax
+✅ Routing between pages
+✅ CSS in Angular
+
+**Code Starter**:
+```typescript
+@Component({
+  selector: 'app-portfolio',
+  template: `
+    <nav>
+      <a routerLink="/home">Home</a>
+      <a routerLink="/about">About</a>
+      <a routerLink="/projects">Projects</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+```
+
+---
+
+#### Project 2: Todo Application
+**Topics**: Component interaction, event binding, @Input/@Output
+**Duration**: 3-5 days
+**Skills**: Components, services, lists
+
+**Requirements**:
+- Add, delete, complete todos
+- Filter (all, active, completed)
+- Save to localStorage
+- Edit todo titles
+
+**Learning Outcomes**:
+✅ Component communication
+✅ Event handling
+✅ List rendering
+✅ Local storage
+
+**Key Components**:
+- TodoListComponent
+- TodoItemComponent
+- TodoService
+
+---
+
+#### Project 3: Weather App
+**Topics**: HTTP requests, services, API integration
+**Duration**: 5-7 days
+**Skills**: HttpClient, services, templates
+
+**Requirements**:
+- Search for cities
+- Display weather information
+- Show 5-day forecast
+- Store favorites
+- Display weather icons
+
+**Learning Outcomes**:
+✅ HTTP GET requests
+✅ Service architecture
+✅ API integration
+✅ Data display
+
+**API Suggestion**: OpenWeatherMap API
+
+---
+
+#### Project 4: Registration Form
+**Topics**: Template-driven forms, validation, user input
+**Duration**: 3-5 days
+**Skills**: Forms, validation, ngModel
+
+**Requirements**:
+- Form fields (name, email, password)
+- Client-side validation
+- Display errors
+- Submit handling
+- Confirmation page
+
+**Learning Outcomes**:
+✅ Template-driven forms
+✅ Built-in validators
+✅ Form state
+✅ Form submission
+
+---
+
+#### Project 5: Blog Application
+**Topics**: CRUD operations, routing, services
+**Duration**: 7-10 days
+**Skills**: Services, routing, HTTP, templates
+
+**Requirements**:
+- List blog posts
+- View post detail
+- Create new post
+- Edit existing post
+- Delete post
+- Comment system
+
+**Learning Outcomes**:
+✅ CRUD operations
+✅ Route parameters
+✅ Service patterns
+✅ Navigation
+
+---
+
+### Intermediate Projects (2-4 weeks each)
+
+#### Project 6: E-Commerce Shopping Cart
+**Topics**: Reactive forms, state management basics, cart operations
+**Duration**: 10-14 days
+
+**Requirements**:
+- Product listing with filters
+- Shopping cart functionality
+- Checkout form (reactive)
+- Order summary
+- Product reviews
+
+**Learning Outcomes**:
+✅ Reactive forms
+✅ State management
+✅ Cart operations
+✅ Complex forms
+
+---
+
+#### Project 7: Real-Time Chat Application
+**Topics**: WebSockets, services, component communication
+**Duration**: 14-21 days
+
+**Requirements**:
+- User registration/login
+- Real-time messaging
+- User list
+- Typing indicators
+- Message history
+- Notifications
+
+**Learning Outcomes**:
+✅ WebSocket integration
+✅ Real-time data
+✅ User authentication
+✅ Service patterns
+
+---
+
+#### Project 8: Analytics Dashboard
+**Topics**: RxJS operators, data transformation, charting
+**Duration**: 10-14 days
+
+**Requirements**:
+- Multiple data sources
+- Real-time updates
+- Various chart types
+- Data filtering
+- Export functionality
+- Performance metrics
+
+**Learning Outcomes**:
+✅ RxJS operators
+✅ combineLatest, mergeMap
+✅ Chart libraries
+✅ Data transformation
+
+---
+
+#### Project 9: Task Management System
+**Topics**: Drag-and-drop, forms, services, notifications
+**Duration**: 12-16 days
+
+**Requirements**:
+- Create tasks with details
+- Kanban board (drag-and-drop)
+- Task filtering/sorting
+- Team collaboration
+- Due date reminders
+- Activity log
+
+**Learning Outcomes**:
+✅ Angular CDK drag-drop
+✅ Complex component interactions
+✅ Service architecture
+✅ User notifications
+
+---
+
+#### Project 10: Job Portal
+**Topics**: Advanced routing, filtering, search, forms
+**Duration**: 14-21 days
+
+**Requirements**:
+- Job listings with filters
+- Advanced search
+- Job detail page
+- Application form
+- User profiles
+- Saved jobs
+
+**Learning Outcomes**:
+✅ Query parameters
+✅ Complex filtering
+✅ Route parameters
+✅ Form patterns
+
+---
+
+### Advanced Projects (4-8 weeks each)
+
+#### Project 11: Social Media Platform
+**Topics**: NgRx state management, lazy loading, authorization
+**Duration**: 28-42 days
+
+**Requirements**:
+- User authentication
+- Post creation and feed
+- Follow/unfollow users
+- Comments and likes
+- Notifications system
+- User profiles
+- Search functionality
+
+**Learning Outcomes**:
+✅ NgRx patterns
+✅ Authentication guards
+✅ Lazy loading features
+✅ Complex state management
+
+---
+
+#### Project 12: Project Management Tool
+**Topics**: State management, drag-drop, complex forms, real-time
+**Duration**: 28-42 days
+
+**Requirements**:
+- Project creation
+- Task boards (Kanban)
+- Team management
+- Notifications
+- File uploads
+- Comments on tasks
+- Time tracking
+
+**Learning Outcomes**:
+✅ NgRx entity adapters
+✅ Complex UI interactions
+✅ Real-time updates
+✅ File handling
+
+---
+
+#### Project 13: Learning Platform
+**Topics**: Advanced routing, lazy loading, progress tracking, assessments
+**Duration**: 35-49 days
+
+**Requirements**:
+- Course catalog
+- Lesson content with video
+- Progress tracking
+- Quizzes and assessments
+- Certificate generation
+- User dashboard
+- Discussion forums
+
+**Learning Outcomes**:
+✅ Feature module organization
+✅ Lazy loading patterns
+✅ Complex state
+✅ Advanced routing
+
+---
+
+#### Project 14: Health & Fitness App
+**Topics**: Charts, data visualization, PWA, offline support
+**Duration**: 28-42 days
+
+**Requirements**:
+- User health data tracking
+- Workout logging
+- Progress charts
+- Nutrition tracking
+- Social features
+- Offline functionality
+- Mobile optimization
+
+**Learning Outcomes**:
+✅ Data visualization
+✅ PWA implementation
+✅ Offline support
+✅ Mobile optimization
+
+---
+
+#### Project 15: Enterprise Dashboard
+**Topics**: Performance optimization, accessibility, testing, monitoring
+**Duration**: 35-49 days
+
+**Requirements**:
+- Complex analytics
+- Real-time data
+- Multiple chart types
+- Export to PDF/Excel
+- Accessibility compliance
+- Comprehensive testing
+- Monitoring/logging
+
+**Learning Outcomes**:
+✅ Performance optimization
+✅ Accessibility (WCAG)
+✅ Advanced testing
+✅ Monitoring
+
+---
+
+## 📋 Project Selection Guide
+
+### By Topic Focus
+
+**Learning TypeScript?**
+- Project 1: Portfolio
+- Project 5: Blog App
+- Project 6: Shopping Cart
+
+**Mastering Components?**
+- Project 2: Todo App
+- Project 4: Registration Form
+- Project 9: Task Manager
+
+**RxJS & Observables?**
+- Project 3: Weather App
+- Project 8: Analytics
+- Project 11: Social Media
+
+**Forms & Validation?**
+- Project 4: Registration
+- Project 6: Shopping Cart
+- Project 10: Job Portal
+
+**Routing & Navigation?**
+- Project 1: Portfolio
+- Project 5: Blog
+- Project 7: Chat
+
+**State Management?**
+- Project 11: Social Media
+- Project 12: Project Mgmt
+- Project 15: Dashboard
+
+**Testing & Performance?**
+- Project 14: Health App
+- Project 15: Dashboard
+- Any advanced project
+
+---
+
+## 🎓 Project Progression Path
+
+```
+Beginner
+├── Project 1: Portfolio
+├── Project 2: Todo App
+├── Project 3: Weather App
+├── Project 4: Registration
+└── Project 5: Blog
+
+    ↓
+
+Intermediate
+├── Project 6: Shopping Cart
+├── Project 7: Chat
+├── Project 8: Analytics
+├── Project 9: Task Manager
+└── Project 10: Job Portal
+
+    ↓
+
+Advanced
+├── Project 11: Social Media
+├── Project 12: Project Mgmt
+├── Project 13: Learning Platform
+├── Project 14: Health App
+└── Project 15: Enterprise Dashboard
+```
+
+---
+
+## 🚀 Project Best Practices
+
+### Before Starting
+- [ ] Understand all project requirements
+- [ ] Break down into smaller tasks
+- [ ] Plan component structure
+- [ ] Design database schema (if applicable)
+- [ ] Setup version control (Git)
+
+### During Development
+- [ ] Follow Angular style guide
+- [ ] Commit regularly with clear messages
+- [ ] Write unit tests as you go
+- [ ] Document complex code
+- [ ] Test edge cases
+
+### After Completion
+- [ ] Review code quality
+- [ ] Add E2E tests
+- [ ] Optimize performance
+- [ ] Write documentation
+- [ ] Deploy to production
+- [ ] Get code review
+
+---
+
+## 💡 Getting Help
+
+For each project:
+- **Stuck on concept?** → Use `/explore` to find relevant agent
+- **Need specific skills?** → Review agent's SKILL.md
+- **Want to learn more?** → Use `/learn` for detailed guidance
+- **Test your knowledge?** → Use `/assess` after project
+
+---
+
+## 🏆 Project Completion Checklist
+
+After each project, verify:
+
+- [ ] All features implemented
+- [ ] Responsive design
+- [ ] Error handling
+- [ ] Code follows best practices
+- [ ] Unit tests (min 70% coverage)
+- [ ] E2E tests for critical flows
+- [ ] Accessible (WCAG 2.1)
+- [ ] Performance optimized
+- [ ] Documentation complete
+- [ ] Code review passed
+
+---
+
+## 📊 Project Statistics
+
+| Level | Projects | Duration | Skills |
+|-------|----------|----------|--------|
+| Beginner | 5 | 5-7 weeks | 15-20 |
+| Intermediate | 5 | 10-15 weeks | 20-30 |
+| Advanced | 5 | 15-25 weeks | 30-40+ |
+
+**Total**: 15 projects, 30-47 weeks, mastery of 60+ Angular/Web skills
+
+---
+
+## 🎁 Bonus Projects
+
+### Full-Stack Development
+- Build backend API (Node.js/Express)
+- Connect Angular frontend
+- Deploy together
+- Full CRUD with backend
+
+### Open Source Contributions
+- Contribute to Angular libraries
+- Fix bugs in projects
+- Create reusable components
+- Publish to npm
+
+### Portfolio Showcase
+- Deploy projects online
+- Create GitHub portfolios
+- Document your work
+- Build personal brand
+
+---
+
+## Next Steps
+
+1. **Choose your level**: Beginner, Intermediate, or Advanced
+2. **Pick your first project**: Start with recommended sequence
+3. **Study required topics**: Review agent skills needed
+4. **Build the project**: Implement all requirements
+5. **Get feedback**: Share on GitHub, get reviews
+6. **Move to next project**: Progress through the path
+
+---
+
+**Ready to Build?** Choose a project and start coding! 🛠️
+
+Use `/learn` for structured learning paths and `/explore` to understand concepts better.