Capstone: Production Angular Application

The capstone combines routing, forms, HTTP, and state management in one deployable production application.

Project Structure

src/app/
├── core/
│   ├── services/
│   │   ├── auth.service.ts
│   │   └── api.service.ts
│   ├── guards/
│   │   └── auth.guard.ts
│   ├── interceptors/
│   │   ├── auth.interceptor.ts
│   │   └── error.interceptor.ts
│   └── models/
│
├── shared/
│   ├── components/
│   │   ├── button/
│   │   ├── modal/
│   │   └── card/
│   ├── pipes/
│   └── directives/
│
├── features/
│   ├── auth/
│   │   ├── login/
│   │   ├── register/
│   │   └── auth.routes.ts
│   ├── dashboard/
│   │   ├── dashboard.component.ts
│   │   └── dashboard.routes.ts
│   ├── users/
│   │   ├── user-list/
│   │   ├── user-detail/
│   │   ├── user-form/
│   │   ├── user.service.ts
│   │   ├── user.facade.ts
│   │   └── users.routes.ts
│   └── admin/
│       ├── admin-dashboard/
│       └── admin.routes.ts
│
└── app.config.ts

Key Features

1. Authentication — Login, register, JWT tokens, route guards
2. CRUD Operations — Create, read, update, delete users
3. State Management — NgRx or signals for shared state
4. Reactive Forms — Complex forms with validation
5. Routing — Lazy-loaded feature routes with guards
6. HTTP — Typed API service with interceptors
7. Error Handling — Global error interceptor with user feedback
8. Performance — OnPush, lazy loading, trackBy, signals

CI runs lint, unit tests, and Lighthouse budgets on every pull request before merge.

GitHub Actions Workflow

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - run: npm ci

      - name: Lint
        run: npm run lint

      - name: Unit Tests
        run: npm run test -- --watch=false --browsers=ChromeHeadless

      - name: Build
        run: npm run build

      - name: Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun

Quality Gates

Feature Flags

// Using a feature flag service
@Injectable({ providedIn: 'root' })
export class FeatureFlagService {
  private flags = signal<Record<string, boolean>>({
    newDashboard: true,
    betaFeature: false,
  });

  isEnabled(key: string): boolean {
    return this.flags()[key] ?? false;
  }
}

@if (featureFlags.isEnabled('newDashboard')) {
  <app-new-dashboard />
} @else {
  <app-old-dashboard />
}

Deployment Checklist

• All tests pass
• Lint passes with 0 errors
• Build succeeds
• Bundle budgets met
• Lighthouse score > 90
• Accessibility score > 90
• Feature flags configured
• Environment variables set
• Error monitoring configured (Sentry, etc.)
• Analytics configured