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

Names	Size
main.js	343.15 KB
styles.css	6.17 KB
runtime.js	2.61 KB
Initial Total	351.93 KB
Names	Size
app_pages_movie-detail-page_movie-detail-page_component_ts.js	16.83 KB
app_pages_person-detail-page_person-detail-page_component_ts.js	11.79 KB
a-6a8199.js	10.07 KB
app_pages_account-feature_list-detail-page_list-movies_list-movies_compon-d13d08.js	9.83 KB
common.js	7.69 KB
app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-13eb42.js	7.23 KB
app_pages_movie-list-page_movie-list-page_component_ts.js	5.84 KB
app_pages_account-feature_list-create-page_list-create-page_component_ts--1f481e.js	5.7 KB
app_app-shell_account-menu_account-menu_component_ts.js	5.63 KB
app_pages_account-feature_account-list-page_account-list-page_component_ts.js	4.89 KB
app_pages_account-feature_list-detail-page_list-image_list-image_componen-cb4b89.js	4.36 KB
default-node_modules_rx-angular_template_fesm2022_template-if_mjs.js	4.23 KB
app_pages_account-feature_list-detail-page_list-remove_list-remove_compon-a10eb2.js	3.41 KB
app_pages_account-feature_list-detail-page_list-detail-page_component_ts--a2c81d.js	3.24 KB
app_pages_not-found-page_not-found-page_component_ts.js	1.77 KB
app_pages_account-feature_list-detail-page_list-detail-page_routes_ts.js	1.54 KB
app_pages_account-feature_account-feature-page_routes_ts.js	926 Bytes

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. Take a copy of src/environments/environment.local.example.ts and re-name to src/environments/environment.production.ts
2. Get your TMDb API key
3. Get your TMDB API read access token
4. Enter the details into the src/environments/environment.production.ts file

Running locally

• nx run movies:serve: dev server

Tech Stack

Built with:

• Angular
• rx-angular

Measures:

• Bundle size listed from dist folder
• Comparison videos with webpagetest
• Lighthoure reports with lighthouse-metrics
• User-flows created with @push-based/user-flow

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