A comprehensive demonstration of Angular 20's cutting-edge features and modern development practices

This project serves as a complete learning resource for developers who want to master modern Angular development. It demonstrates the migration from traditional Angular patterns to Angular 20's revolutionary features, making it perfect for:

• Frontend Developers learning Angular 20's latest features
• Angular Developers migrating from older versions (v14-19)
• Students studying modern reactive programming patterns
• Teams looking for best practice examples
• Educators teaching modern web development

• Standalone Components: Complete migration from NgModule architecture
• Angular Signals: Revolutionary reactive state management
• New Control Flow: Modern @for, @if syntax replacing structural directives
• Modern Input API: input.required<T>() replacing @Input() decorators
• Computed Values: Automatic derived state with perfect performance
• Event-Driven Architecture: Modern component communication patterns

• OnPush Change Detection: Maximize rendering performance
• Signal-Based Reactivity: Minimal re-renders with computed signals
• Immutable State Updates: Functional programming principles
• Modern Build System: Angular 20's optimized application builder

• 100% Test Coverage: Comprehensive unit testing strategy
• Modern Testing Patterns: Standalone component testing
• Signal Testing: Testing reactive state management
• CI/CD Ready: Headless browser testing for automation

• ESLint + Prettier: Professional code quality standards
• TypeScript Strict Mode: Type safety and modern patterns
• Modern Tooling: Latest Angular CLI and build optimizations
• Git Best Practices: Conventional commits and clean history

• ✅ Dynamic Article Voting with real-time sorting
• ✅ Add New Articles with form validation
• ✅ Automatic URL Domain Extraction
• ✅ Responsive Design with Semantic UI

• ✅ Event-Driven Communication between components
• ✅ Immutable State Management with signals
• ✅ Reactive Sorting with computed values
• ✅ Clean Component Architecture with clear separation of concerns

• Node.js 18+
• npm 9+ or yarn
• Angular CLI 20+

# Clone the repository
git clone https://github.com/your-username/angular-reddit-clone.git
cd angular-reddit-clone

# Install dependencies
npm install

# Start development server
npm start
# or
ng serve

# Navigate to http://localhost:4200

npm start          # Development server
npm test           # Run tests
npm run test:ci    # CI tests with coverage
npm run test:watch # Watch mode testing
npm run build      # Production build
npm run lint       # Code linting
npm run format     # Code formatting

1. Explore the App: Run locally and test voting functionality
2. Study Components: Examine AppComponent and ArticleComponent
3. Understand Signals: See how reactive state works
4. Review Tests: Learn modern testing patterns

1. Architecture Analysis: Study the event-driven communication
2. State Management: Understand immutable updates with signals
3. Performance Patterns: Learn OnPush and computed optimizations
4. Code Quality: Examine ESLint and Prettier configurations

1. Migration Patterns: Study the commit history for upgrade process
2. Testing Strategy: Examine comprehensive test coverage approach
3. Build Optimization: Understand Angular 20's build improvements
4. Extend Features: Add persistence, search, or authentication

This project demonstrates professional testing practices:

# Run all tests with coverage
npm run test:ci

# Watch mode for development
npm run test:watch

# Coverage report
open coverage/upp-reddit/index.html

Testing Highlights:

• ✅ 35 Test Cases covering all functionality
• ✅ 100% Coverage across statements, branches, functions, lines
• ✅ Signal Testing for reactive state management
• ✅ Event Testing for component communication
• ✅ Edge Case Testing for robust error handling

src/
├── app/
│   ├── app.component.*           # Main app with signals & computed values
│   └── article/
│       ├── article.component.*   # Standalone component with events
│       ├── article.model.*       # Data model with comprehensive tests
│       └── *.spec.ts            # Modern testing patterns
├── main.ts                      # Modern bootstrap with standalone components
└── test.ts                      # Optimized test configuration

• ESLint: 65+ Angular-specific rules for code quality
• Prettier: Consistent formatting across all files
• TypeScript Strict: Enhanced type safety and error prevention
• Conventional Commits: Clean git history with semantic versioning

• Demonstrates patterns you'll actually use in production
• Shows migration strategies from older Angular versions
• Implements proper error handling and edge cases

• Angular 20's latest features and recommendations
• Performance-optimized with OnPush and signals
• Professional testing and code quality standards

• Clear commit history showing step-by-step modernization
• Comprehensive comments explaining complex concepts
• Multiple learning levels from beginner to advanced

• Angular Signals Guide
• Standalone Components
• Angular Testing
• Change Detection

This project welcomes contributions! Whether you're:

• Adding new features to demonstrate additional Angular concepts
• Improving documentation and learning materials
• Fixing bugs or enhancing test coverage
• Suggesting better patterns or practices

Please read CONTRIBUTING.md for details.

This project is licensed under the MIT License - see the LICENSE file for details.

• Learning Angular 20's revolutionary features
• Understanding modern reactive programming
• Studying professional testing practices
• Building production-ready applications
• Teaching modern web development

⭐ Star this repo if it helps you learn Angular 20!