tastejs/angular-movies

angular-movies

This is a Movies App built using Angular and RxAngular.
As data source the The Movie Database (TMDB) API is used.

Demo

A live deployment of this app is available to try it out.

Performance Optimizations

For now you can search the codebase for "Perf Tip" later on there will be propper documentation here.

Measures before optimization

Measures after optimization

Bundle Stats

Comparison to next and nuxt

• angular
• next
• nuxt

Contributing

Contributions are always welcome!

For large changes, please file an issue to discuss your proposed changes with us before working on a PR :)

Installation

Clone and install the dependencies for angular-movies locally:

  git clone https://github.com/tastejs/angular-movies.git
  cd angular-movies
  npm install

Quick setup

1. Use the Node version from .nvmrc (enforced via engine-strict in .npmrc):

   nvm install
   nvm use
   npm ci
   

   npm start and npm run e2e select the .nvmrc Node version automatically via scripts/with-node.sh (installs via nvm locally; uses setup-node in CI).
2. Copy projects/movies/src/environments/environment.local.example.ts to projects/movies/src/environments/environment.ts (or environment.production.ts for prod builds).
3. Add your TMDb API key and read access token.
4. If port 4200 is stuck, stop the old process: lsof -ti:4200 | xargs kill -9

Running locally

Per Angular serve docs, the dev server uses @angular/build:dev-server (Vite). When ready it prints Local: http://localhost:4200/.

• nx run movies:build:development: development build
• nx run movies:build:production: production build (output: dist/projects/movies)
• npm start / nx run movies:serve:development: dev server on port 4200
• nx run movies:serve-static:production: serve the production build locally
• npm run e2e / nx e2e movies: Playwright E2E (Chromium; starts dev server automatically). Multi-browser: PLAYWRIGHT_ALL_BROWSERS=1 npm run e2e
• nx run movies:user-flow:development: legacy Lighthouse user-flow (local only, not in CI)

Playwright specs (legacy .uf.ts files kept under projects/movies/user-flows/):

Run auth E2E locally: nx e2e movies --grep @auth

• nx run docs:build: regenerate README bundle stats (output: dist/measures/movies)

Tech Stack

Built with:

• Angular
• rx-angular

Measures:

• Bundle size listed from dist folder
• Comparison videos with webpagetest
• Lighthoure reports with lighthouse-metrics
• E2E: Playwright (npm run e2e)
• Legacy perf user-flows: @push-based/user-flow (manual, not CI)

Authors

• push-based.io
• Michael Hladky
• Kirill Karnaukhov
• Julian Jandl
• Vojtech Mašek
• Enea Jahollari
• Matthieu Riegler

Based on the original angular-movies foundation by @clamarque.

License

MIT