Angular Netflicks

A case study of Netflix Clone, using Angular framework, RxJS library for manage state with Observable, Nx for manage library and shared component in monorepo, Bootstrap for style (Scss), Swipe.js for animation carousel, Tv Maze API and The Movie DB API for the data and Youtube player, that wrap the embed Youtube player API.

Preview

Live

Netflicks

Table of Content

• Angular Netflicks
  • Preview
  • Live
• Getting Started
• Goals
• Features
• Stack
• Nx
• Testing
• Linting
• Thinks to know
• Support

Getting Started

git clone https://github.com/ac4mm/angular-netflicks.git
cd angular-netflicks
yarn install
yarn start

Goals

Tha main goal of this simple repository is to learn how to use reactive programming (with RxJS) and Angular with routing, lazy loading and the main feature of framework.

The project has evolved over time, starting from a situation in which I started to learn the framework and library, up to today, with all the best practices and evolutions of the monorepo, with the addition of the API for images and video trailers of Youtube.

Features

• Lazy loading
• Fully responsive design
• Routing
• Used TV Maze API for fetching cover images

Stack

Frontend

• Angular
• RxJS
• Bootstrap
• Swiper

API

• Tv Maze API
• The movie DB (TMDB)

Hosting

• Firebase

Nx

Generate Components

Feature

nx generate @nx/angular:component [name-feature-component] --project=netflicks --module=feature --path=libs/feature/src/lib --export=true --style=scss

Shared

nx generate @nx/angular:component [name-feature-component] --project=netflicks --module=shared --path=libs/shared/src/lib/components --export=true --style=scss    

Generate Directive with Nx

nx generate @nx/angular:directive [name-directive] --project=netflicks  --path=libs/shared/src/lib/directive

Generate Library

nx generate @nx/angular:lib [nameLib]

Lib help options

nx g lib --help

Testing with Jest

yarn test

For a specific lib

Example

nx test shared [or feature/netflicks]

Linting with ESLint

yarn lint

Thinks to know

• I used the combination of two API, since some information was not present (e.g. trailer) in TvMaze API or logo, etc;
• I combined the cover images with the logo, since some images did not have the logo, so images with a double logo could be presented;
• for the match of the films/TV series I used a random value between 64 and 100, while for the maturity rating, I used a probability with a weight: 7+ Kids (10%), 13+ teenagers (20%), 16 + (40%), 18+ adults (60%);
• Pages Tv Shows, Movie, Latest and My List, Kids, Referral friends and notification aren't implemented;
• I used Quicktype app for generate response model (TV maze and TMDB API);
• I only implemented the home page, so the other pages (Tv Shows, Movies, Latest and My list) are just mocks with the loader;
• Furthermore, the search bar, the kids page and the refer friends link are also mocks;

Final considerations

Is it possible to do better? absolutely yes, my project is just an implementation, used to experiment and discover the features of Angular and in particular test the best scalable organization of a project with Nx.

Finally any new merge requests, significant changes or feedback are welcome, just let me know.

Support

by @_ac4mm