Learning Objectives

  • Integrate previous weeks’ work into a cohesive SaaS admin portal capstone.
  • Implement production-level concerns: documentation, analytics, logging, accessibility, and deployment automation.
  • Harden performance with SSR/hydration checks, PWA support, and bundle budgets.
  • Prepare demo artifacts (README, architecture diagrams, walkthrough video).

Core Concepts & References

Hands-On Checklist

  1. Assemble feature modules/routes (dashboard, customers, admin) under shared design system.
  2. Enable SSR + hydration for marketing/dashboard routes; verify with Angular Universal.
  3. Add PWA support (service worker, offline caching, manifest) via ng add @angular/pwa.
  4. Configure logging/monitoring (e.g., Sentry, OpenTelemetry) and environment-specific configs.
  5. Finalize CI/CD pipeline to run lint/tests/build/deploy (GitHub Actions sample provided below).
  6. Prepare documentation: README, ADRs, architecture diagrams, deployment instructions.
  7. Record demo video or storyboard showing user journeys and technical highlights.

Deliverable: SaaS Admin Portal Demo & Documentation

  • Deployed demo or local instructions with seeded data.
  • Documentation bundle with architecture overview, setup steps, testing strategy, and performance report.
  • Lighthouse scores: Performance ≥ 90, Accessibility ≥ 95, Best Practices ≥ 95, SEO ≥ 90.
  • Testing pipeline results attached/summarized.

Suggested Daily Breakdown

  • Day 1: Integrate modules, verify navigation, tighten design system usage.
  • Day 2: SSR + hydration checks, adjust API calls for server runtime.
  • Day 3: PWA/service worker setup, offline smoke tests.
  • Day 4: Add monitoring/logging + environment configs; run performance audits.
  • Day 5: Polish docs (README, ADR), capture architecture diagram (PlantUML/Mermaid).
  • Day 6: Script and record demo video; gather screenshots.
  • Day 7: Final QA pass, update backlog for future improvements.

Supporting Assets

  • CI Workflow Template (.github/workflows/ci.yml): lint → test → build → e2e.
  • Performance Audit Template (docs/performance-audit-template.md): capture metrics pre/post optimization.
  • Release Checklist:
  • ✅ Increment version + changelog
  • ✅ Run ng test, ng e2e, ng build --configuration production
  • ✅ Verify Lighthouse PWA/SSR scores on staging URL
  • ✅ Confirm error monitoring dashboards receiving events
  • ✅ Update README with latest deployment instructions

Reflection & Extension

  • Identify automation gaps (data seeding, migrations) and plan future sprints.
  • Explore multi-tenant features (per-tenant theming, RBAC) as next steps.
  • Stretch goal: implement infrastructure as code (Pulumi/Terraform) for hosting environment.