516 lines
10 KiB
Markdown
516 lines
10 KiB
Markdown
# /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.
|