A Netflix-inspired educational case study built with Angular, RxJS and Nx. It explores a monorepo structure, reusable UI, routing and lazy loading, with movie and TV data from TVmaze and TMDB.
Project status: Educational prototype
Netflicks is a portfolio project for exploring Angular and Nx, not a production streaming service. The home page is the main implemented experience; several other pages and interactions are placeholders or mocks. See Feature status for details.
Disclaimer: this project was created for educational purposes only and is not affiliated with, sponsored by, or endorsed by Netflix, TV Maze, or TMDB. Netflix and its logos are trademarks of their respective owners. Images, logos, and data belong to their respective owners and are used in compliance with their licenses and terms of use. The author assumes no responsibility for how this code or project may be used by others.
The demo showcases the implemented UI. Some navigation items and interactions are placeholders; refer to the feature status table below.
- Angular Netflicks
- Getting Started
- Goals
- Stack
- Nx
- Testing
- Linting
- Implementation notes
- Support
- License
git clone https://github.com/ac4mm/angular-netflicks.git
cd angular-netflicks
yarn install
yarn startThe main goal of this project is to explore reactive programming with RxJS and Angular features such as routing and lazy loading, as well as project organization with Nx.
| Feature | Status | Notes |
|---|---|---|
| Home page | Implemented | Main implemented browsing experience |
| Responsive layout | Implemented | The UI is designed to adapt to different screen sizes |
| Routing and lazy loading | Implemented | Used to organize and load application sections |
| TV Shows, Movies, Latest and My List pages | Demo only | Placeholder loading UI; browsing flows are not implemented |
| Search | Mock | The search bar is present, but search is not implemented |
| Kids and Refer Friends | Mock | These links do not provide complete feature flows |
| Notifications | Not implemented | Not available in the current demo |
| TVmaze and TMDB data | Partial | APIs are combined where needed for content and media information |
Frontend
API
Hosting
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
nx generate @nx/angular:directive [name-directive] --project=netflicks --path=libs/shared/src/lib/directive
nx generate @nx/angular:lib [nameLib]
nx g lib --help
yarn testExample
nx test shared [or feature/netflicks]yarn lint- TVmaze and TMDB are combined because some information, such as trailers or logos, may not be available from one source.
- Some cover images are combined with logos; depending on the source assets, this can result in duplicated logos.
- Match scores and maturity ratings are generated for demonstration purposes and should not be treated as authoritative information.
- API response models were initially generated with Quicktype.
This project is an evolving implementation for learning Angular, RxJS and Nx. It is not intended to provide a complete streaming service.
Feedback, issues, and significant contributions are welcome.
by @_ac4mm
Distributed under the MIT License. See the LICENSE file for more details.
This product uses the TMDB API but is not endorsed or certified by TMDB. Data from TV Maze is licensed under CC BY-SA.