Skip to content

yharaskrik/angular-movies

 
 

Repository files navigation

angular-movies

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

angular-and-rx-angular

Demo

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

Performance Optimizations

before-vs-after

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

Measures before optimization angular-movies-before_michael-hladky

Measures after optimization angular-movies-after-optimization_michael-hladky

Bundle Stats

Names Size
main.1431126081e2681f.js 329.95 KB
styles.be05b375b7ddee56.css 6.14 KB
runtime.af723d0a2b526126.js 3.73 KB
Initial Total 339.81 KB
Names Size
app_pages_movie-detail-page_movie-detail-page 15.3 KB
app_pages_not-found-page_not-found-page 12.15 KB
app_pages_person-detail-page_person-detail-page 11.58 KB
common.977fee21c1077856.js 10.72 KB
app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-393246.1eb4a0cb99024cb4.js 7.04 KB
app_pages_account-feature_account-list-page_account-list-page 4.9 KB
app_app-shell_account-menu_account-menu_component_lazy_ts.d5cbf929bd9d5bf6.js 4.32 KB
app_pages_account-feature_list-detail-page_list-detail-page 4.23 KB
app_pages_account-feature_list-detail-page_list-image_list-image 3.47 KB
app_pages_account-feature_list-detail-page_list-remove_list-remove 3.43 KB
app_pages_account-feature_list-detail-page_list-movies_list-movies 837 Bytes

Comparison to next and nuxt

angular-vs-next-vs-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.prod.ts
  2. Get your TMDb API key
  3. Get your TMDB API read access token
  4. Enter the details into the src/environments/environment.prod.ts file

Running locally

  • npm run build:dev: dev build
  • npm run build:prod: production build
  • npm run build:prod:ssr: production build for SSR
  • npm run start: serve the project locally for development
  • npm run start:ssr:dev: serve the project locally SSR for development
  • npm run start:ssr:prod: serve the project locally SSR for production
  • npm run analyze:bundlesize: bundle size analysis

Tech Stack

Built with:

angular-and-rx-angular

Authors

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

License

MIT

About

A Angular Movies App Optimized for Performance

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 95.9%
  • TypeScript 3.2%
  • Other 0.9%