A responsive and feature-rich Netflix Clone built with Angular 15, designed to deliver a seamless movie browsing and viewing experience. It integrates with The Movie Database (TMDB) API to fetch real-time movie data, including trending titles, genres, and detailed descriptions.
- 🎥 Dynamic Movie Listings: Browse trending, action, adventure, animation, comedy, documentary, sci-fi, and thriller movies.
- 🏠 Home Page Carousel: Display featured movies in an auto-sliding banner.
- 🔍 Search Functionality: Instantly find movies by title using the search page.
- 🧩 Movie Details Page: View complete details for a selected movie, including overview, ratings, and backdrop.
- 🌗 Responsive Design: Fully responsive layout built with Bootstrap 5 and Angular components.
- ⚡ API Integration: Fetches real-time data from TMDB API using Angular’s HttpClient.
- 🧠 Clean Architecture: Modular Angular structure following best practices for scalability.
| Category | Technology |
|---|---|
| Framework | Angular 15 |
| Styling | Bootstrap 5 |
| Language | TypeScript |
| API | TMDB (The Movie Database) |
| HTTP Client | Angular HttpClientModule |
| Forms | Reactive Forms |
| Build Tool | Angular CLI |
othman-shbeir-netflix-clone-angular/
├── src/
│ ├── app/
│ │ ├── pages/
│ │ │ ├── home/ # Home page with carousels and movie categories
│ │ │ ├── movie-details/ # Movie details component
│ │ │ └── search/ # Search page for finding movies
│ │ └── service/ # API service layer
│ ├── assets/ # Static assets
│ ├── index.html # Main HTML entry
│ ├── main.ts # App bootstrap file
│ └── styles.css # Global styles
└── angular.json # Angular project config
git clone https://github.com/othman-shbeir/netflix-clone-angular.git
cd netflix-clone-angularnpm install-
Open the movie API service file:
src/app/service/movie-api-service.service.ts
-
Replace the placeholder API key with your TMDB API key.
ng serveVisit http://localhost:4200/ to explore the app.
| Command | Description |
|---|---|
ng serve |
Run the development server |
ng build |
Build the project for production |
ng test |
Execute unit tests with Karma |
ng generate component <name> |
Generate a new component |
Run unit tests using:
ng testTests are powered by Karma and Jasmine.
The layout is optimized for desktop, tablet, and mobile devices, ensuring a Netflix-like viewing experience across all screens.
- 🔐 User authentication and profile management.
- ❤️ Favorite movies and watchlist feature.
- 🌍 Multi-language support.
- 🎞️ Video streaming simulation with trailers.
Othman Shbeir
This project is licensed under the MIT License. Feel free to use and modify it for learning or development purposes.