Angular Advanced Capstone: Build and Ship a Production-Ready App

You have learned Angular from the first component to server rendering and CI. This capstone asks you to use everything in one app and ship it. It is a brief with a checklist, not a walkthrough. Making the decisions yourself is how the knowledge sticks.

The brief: a learning and community platform

Build a small platform called LearnBoard with:

Public area (indexable by search engines)

• A home page and a course catalogue with search and filter.
• A course page with lessons and a table of contents.
• Proper titles, meta descriptions and canonical URLs for every public page.

Signed-in area

• Sign in and sign out (a real identity provider or your own API, or a mock for practice).
• A "My learning" dashboard with progress per course.
• A profile page with a form that uses a custom form control (for example a skills tag input).
• An admin page, visible only to admin users, to add and edit courses with a dynamic form (FormArray for lessons).

Required architecture

• Folders by feature: core, shared, features/catalog, features/learning, features/admin, features/account.
• Lazy loaded feature routes, with canMatch for admin and canActivate where needed.
• Smart and presentational components, OnPush everywhere, state in signals.
• A signal store for learning progress, with optimistic updates and rollback.
• Data loaded with httpResource for reads, and HttpClient for writes.
• Interceptors for the auth header, global errors and a loading indicator.
• Settings via an InjectionToken and app.config.ts, so the API URL is not hard-coded.

Required quality

• Types: strict TypeScript, no any.
• Accessibility: keyboard-only use works, focus moves on navigation, forms have labels and error messages, Lighthouse accessibility score of 95 or higher.
• Performance: initial bundle under your budget, images optimised with NgOptimizedImage, @defer for heavy sections, Lighthouse performance 90 or higher on a mobile profile.
• SSR: public pages server-rendered or prerendered, private pages client-rendered. Check them with curl to prove the content is in the HTML.
• Security: no bypassSecurityTrust on user data, security headers, allowedHosts set, no secrets in the bundle, authorisation enforced on the server.
• Tests: unit tests for stores, guards, interceptors and form logic; at least three component tests; at least five e2e tests for the main journeys.
• CI/CD: a pipeline that lints, tests, builds, runs e2e tests, and deploys from main.

Suggested plan

1. Day 1: plan. Write the routes, data models and folder structure. Sketch the main pages.
2. Days 2 to 3: public catalogue. Build the catalogue, course page and SSR. Add SEO tags.
3. Days 4 to 5: signed-in features. Auth, guards, interceptors, progress store.
4. Day 6: forms. Profile form with the custom control, admin dynamic form.
5. Day 7: quality. Accessibility pass, performance pass, security review.
6. Day 8: tests and CI. Fill testing gaps, add e2e tests, set up the pipeline.
7. Day 9: deploy and write the README.

Definition of done

Check every line before you call it finished:

• [ ] ng build has no errors or budget warnings.
• [ ] ng test --watch=false passes.
• [ ] npx playwright test passes.
• [ ] Lighthouse scores meet the targets above.
• [ ] A visitor without JavaScript still sees the public page content.
• [ ] Wrong URLs show a helpful not-found page.
• [ ] Errors show friendly messages and a way to retry.
• [ ] The README has a screenshot, a live link, setup steps, an architecture diagram or list, and a "decisions and trade-offs" section.

Stretch goals

• Internationalisation with Angular's @angular/localize.
• A Progressive Web App with a service worker for offline lessons.
• Real-time progress sync with WebSockets or server-sent events.
• Incremental hydration for the course page.
• Move shared code to a library inside an Nx or Angular workspace.

How to present it

Hiring managers and clients look for:

• A live link that loads fast and works on a phone.
• A clean repository: readable commits, a README, passing CI badge.
• Decisions explained: why you chose a store, where you used SSR, what you did not build.
• Honest limits: mention what is mocked or unfinished.

Where to go next

• Read the official guides on angular.dev when new versions arrive. Angular releases twice a year, so run ng update regularly and read the release notes.
• Learn a UI foundation such as Angular CDK and Angular Material, or a design system your team uses.
• Study a state library such as NgRx Signals if you join a large team.
• Learn the backend side: build or consume an API with Node.js, authentication, and databases.
• Contribute to open source, or rebuild a real tool you use every day.

Quick check

1. Which pages of the capstone should be server-rendered, and why?
2. Where is authorisation really enforced?
3. What four things should your README show?

Congratulations. You went from "What is Angular?" to production-ready skills. Look back at the beginner lessons any time, and keep building.