Netflix Clone tái tạo hành trình khám phá nội dung với dữ liệu TMDB, từ landing page, đăng nhập, chọn profile đến màn hình Browse, tìm kiếm, My List và trình phát. Dữ liệu phim và series từ nhiều endpoint được đưa về cùng cấu trúc để các hàng nội dung, billboard và modal có thể dùng chung.

Mỗi profile có trạng thái riêng cho mã PIN, lịch sử xem, danh sách đã lưu và tiến độ đang xem. Nhờ vậy một tài khoản có thể phục vụ nhiều người mà gợi ý và hành trình xem của từng profile không bị trộn lẫn.

Browse tổ chức nội dung theo xu hướng, Netflix Originals, đánh giá cao và các thể loại; modal tải thêm diễn viên, video và phim tương tự. Người dùng có thể tìm đồng thời phim lẫn series, xem trailer, lưu vào My List và quay lại đúng phần nội dung còn dang dở.

Cloud Function tạo nguồn gợi ý từ watch history, saved shows và dữ liệu profile rồi lưu cache theo profile. Phần giao diện đọc nguồn này qua hook riêng, trong khi Continue Watching được tách thành một luồng dữ liệu độc lập để dễ cập nhật và xử lý trạng thái tải.

React và React Router tổ chức các route công khai, route xác thực và route bắt buộc chọn profile. Firebase Authentication quản lý tài khoản; Firestore lưu cấu trúc user, profile, saved shows, watch history và feed gợi ý.

TMDB là nguồn metadata và video; Cloud Functions giữ phần tổng hợp gợi ý ở phía server và thực hiện retry khi gọi API. Framer Motion được dùng cho chuyển động của card và modal, còn các hook gom logic xem tiếp, gợi ý và infinite scroll khỏi component hiển thị.

Công nghệ sử dụng: React 19, TypeScript, Firebase, TMDB API, Framer Motion.

Mã nguồn tách API requests, dịch vụ Firebase, hooks dữ liệu và component trình bày. Ranh giới này giải quyết sự khác nhau giữa response phim, series, search và recommendation trước khi dữ liệu đi vào cùng một card hoặc modal.

Luồng bảo vệ route kiểm tra cả trạng thái đăng nhập lẫn profile hiện hành. PIN lock, xác minh email và trạng thái tải ban đầu được xử lý trước khi mở Browse để tránh hiển thị nhầm dữ liệu của profile khác.