angular-movies

This is a Movies App built using Angular and The Movie Database (TMDB) API.

Demo

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

Comparison to next app

Performance Improvements

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

Initial Chunk Files Names Size
main.0537ac5709d0b1e2.js main 316.55 kB
styles.13c939b5c2369df2.css styles 5.00 kB
runtime.793b54f5d026691d.js runtime 2.73 kB
Initial Total 324.39 kB
Lazy Chunk Files Names Size
849.c98331a772ee31b8.js 12.18 kB
common.80ee1cdf1082c3de.js common 10.10 kB
614.4143cf052f9e5361.js 3.36 kB

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
  • rx-angular

Authors

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

License

MIT

GitHub

View Github