Course Recap and What's Next
You built CinemaVault. You deployed it. Let’s look at what you know now.
What you built
Section titled “What you built”CinemaVault is a fully deployed Angular SPA that:
- Fetches live movie data from the TMDb API and types every response with TypeScript interfaces
- Shows trending and popular movies on the Home page with a responsive grid
- Lets users browse movies by genre, year, and sort order using a reactive form with debounced API calls
- Searches movies with an instant search form in the NavBar that cancels in-flight requests with
switchMap - Shows full movie details — backdrop, cast, tagline, runtime — on a dedicated detail page
- Maintains a Watchlist that persists across browser sessions via localStorage
- Protects the Watchlist route with a guard that shows a toast notification when it is empty
You can explore the live app and browse the source code.
What you learned across 7 modules
Section titled “What you learned across 7 modules”M01 — Getting Started: The Angular CLI, project structure, and the component tree model.
M02 — Components: The @Component decorator, templates, @Input/@Output, lifecycle hooks, and standalone components.
M03 — Templates and Data Binding: Interpolation, property binding, event binding, [(ngModel)], @if/@for control flow, and pipes.
M04 — Routing: Client-side routing, <router-outlet>, RouterLink, route parameters, ActivatedRoute, and functional route guards.
M05 — Services and DI: @Injectable, singleton services, signals for reactive state, and the inject() function.
M06 — Reactive Forms and HTTP: FormBuilder, FormGroup, validators, HttpClient, and the RxJS operators map, catchError, switchMap, debounceTime, and distinctUntilChanged.
M07 — CinemaVault Build: Wiring everything together — MovieService, WatchlistService, ToastService, and the complete component and routing structure.
The Angular features that appeared throughout
Section titled “The Angular features that appeared throughout”| Feature | Where it appeared |
|---|---|
@Component | Every component |
@Input({ required: true }) | MovieCard receiving a movie |
@Output | (Used where child-to-parent events were needed) |
ngOnInit | Every page that fetches data |
| Standalone components | Every component — no NgModules |
RouterLink, routerLinkActive | NavBar |
| Route parameters | MovieDetail (/movies/:id) |
queryParamMap | SearchResults (?q=) |
CanActivateFn guard | watchlistGuard |
inject() | Every service and guard |
signal(), computed() | WatchlistService, ToastService |
HttpClient | MovieService |
FormBuilder, FormGroup | Browse filter form |
valueChanges, debounceTime | Browse, search |
switchMap, catchError | SearchResults, Browse |
@if, @for, @empty | Every page template |
Pipes: date, number, slice, async | MovieCard, detail pages |
What to explore next
Section titled “What to explore next”Deployment: The CinemaVault GitHub Actions workflow shows how to inject the TMDb API key as a secret and deploy to GitHub Pages automatically on every push.
Angular Material: Angular’s official component library — provides ready-made buttons, dialogs, forms, and navigation components that match Material Design.
Signals everywhere: Angular is rapidly adopting signals as a replacement for RxJS-heavy patterns. Explore signal, computed, effect, and Angular’s Signal-based inputs (input() instead of @Input()).
NgRx: The Redux-pattern state management library for Angular. Worth learning when your app has complex, cross-cutting state that needs strict control.
Unit testing: Angular’s testing tools (TestBed, ComponentFixture, HttpTestingController) let you verify components and services in isolation. The spec.ts files generated alongside every component are the entry point.
Lazy loading and code splitting: CinemaVault uses loadComponent for lazy loading. Explore route-level code splitting for larger apps.
You have the foundation. The patterns you used in CinemaVault — services, signals, reactive forms, switchMap, guards — appear in every production Angular app. Build something with what you know. That is where the real learning happens.
Continue the track
Section titled “Continue the track”The next course in the JavaScript Development Track is React Foundations — the most widely used frontend library in the industry. React takes a different philosophy than Angular: a library rather than a framework, function components instead of class decorators, hooks instead of lifecycle methods and DI. Coming from Angular gives you a strong sense of what React is trading away for simplicity and flexibility.