Netflix Clone.
Bản sao giao diện truyền hình Netflix cinematic hoàn chỉnh với quản lý nhiều profile bảo mật, tìm kiếm nâng cao và đồng bộ danh sách phim thời gian thực.
Chi tiết dự án (START)
Câu chuyện dự án
Situation - Bối cảnh
Netflix UI clone với multi-profile, My List đồng bộ Firestore real-time và xem trailer YouTube.
Task - Nhiệm vụ
Xác định phạm vi sản phẩm thuộc nhóm Streaming UI và tập trung vào các flow người dùng chính.
Action - Quyết định & Thực thi
Triển khai bằng React 19, TypeScript, Firebase, TMDB API và chia nhỏ theo từng feature để dễ báo cáo, kiểm thử và bảo trì.
Result - Kết quả đạt được
Dự án có demo/source và đủ ảnh minh chứng để trình bày trong portfolio hoặc báo cáo học phần.
Takeaway - Bài học kinh nghiệm
Rút ra nhiều bài học quý báu về phát triển Streaming UI và tối ưu hóa trải nghiệm người dùng.
Preview & Trải nghiệm thực tế
Mỗi màn hình đi kèm phần mô tả chi tiết để làm rõ luồng hoạt động và trải nghiệm người dùng thực tế.
cardhover
Ảnh này dùng làm bằng chứng cho flow Netflix Clone. Màn hình "cardhover" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
đăng nhập bằng google
Ảnh này dùng làm bằng chứng cho flow Netflix Clone. Màn hình "đăng nhập bằng google" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
đăng nhập hồ sơ bị khóa mã pin
Ảnh này dùng làm bằng chứng cho flow Netflix Clone. Màn hình "đăng nhập hồ sơ bị khóa mã pin" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
màn hình chọn hồ sơ
Ảnh này dùng làm bằng chứng cho flow Netflix Clone. Màn hình "màn hình chọn hồ sơ" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
chức năng tiếp tục xem và đề xuất thông minh dựa trên phim đã coi
Ảnh này dùng làm bằng chứng cho flow Netflix Clone. Màn hình "chức năng tiếp tục xem và đề xuất thông minh dựa trên phim đã coi" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Trải nghiệm dự án
Source Code & Demo
Xem toàn bộ mã nguồn trên GitHub hoặc mở bản demo hoạt động thực tế.