Real-time Sync List
Firestore đồng bộ danh sách yêu thích trên nhiều thiết bị.
Báo cáo project
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.
1 thành viên (Cá nhân)React 19TypeScriptFirebaseTMDB APIFramer Motion
Cuộn xuống để khám phá
Chức năng chính
Tạo và chuyển đổi nhiều profile với PIN bảo mật riêng.
Trailer Integration
Xem trailer YouTube trong giao diện cinematic tùy biến.
Continue Watching
Lưu tiến độ xem theo profile để người dùng quay lại đúng nội dung đang xem dở.
Đề xuất theo lịch sử
Gợi ý phim dựa trên lịch sử xem, thể loại và hành vi trong từng profile.
TMDB search/detail
Tìm kiếm, xem chi tiết phim/series và metadata từ TMDB API.
Firestore security rules
Quy tắc Firestore tách dữ liệu user/profile, tránh đọc ghi chéo tài khoản.
ID normalization
Chuẩn hóa ID giữa TMDB, Firestore và UI để tránh lỗi duplicate/watch progress.
Chức năng chính
Tạo và chuyển đổi nhiều profile với PIN bảo mật riêng.
01
Real-time Sync List
Firestore đồng bộ danh sách yêu thích trên nhiều thiết bị.
02
Trailer Integration
Xem trailer YouTube trong giao diện cinematic tùy biến.
03
Continue Watching
Lưu tiến độ xem theo profile để người dùng quay lại đúng nội dung đang xem dở.
04
Đề xuất theo lịch sử
Gợi ý phim dựa trên lịch sử xem, thể loại và hành vi trong từng profile.
05
TMDB search/detail
Tìm kiếm, xem chi tiết phim/series và metadata từ TMDB API.
06
Firestore security rules
Quy tắc Firestore tách dữ liệu user/profile, tránh đọc ghi chéo tài khoản.
07
ID normalization
Chuẩn hóa ID giữa TMDB, Firestore và UI để tránh lỗi duplicate/watch progress.
Situation - Bối cảnh
Tôi chọn Netflix vì bề ngoài quen thuộc nhưng bên trong có nhiều bài toán state: profile, watch progress, list sync, recommendation và media detail.
Người dùng theo profile
Một tài khoản có nhiều profile, mỗi profile có PIN, lịch sử xem, danh sách yêu thích và tiến độ xem riêng.
Firebase làm backend nhanh
Firebase Auth/Firestore phù hợp MVP streaming clone vì có realtime sync, security rules và deploy-friendly cho frontend.
TMDB làm nguồn dữ liệu
TMDB API cung cấp metadata phim/series, ảnh, thể loại và search để UI có nội dung thật thay vì hardcode.
Docs ghi bug thật
Repo có nhiều tài liệu fix như ID normalization, Continue Watching, cache lock, YouTube layout và recommendation upgrade, cho thấy dự án có debugging thật.
Giá trị portfolio
Project này chứng minh tôi biết làm product UI phức tạp, xử lý dữ liệu realtime và sửa bug state thay vì chỉ cắt giao diện.
Situation - Bối cảnh
Tôi chọn Netflix vì bề ngoài quen thuộc nhưng bên trong có nhiều bài toán state: profile, watch progress, list sync, recommendation và media detail.
01
Người dùng theo profile
Một tài khoản có nhiều profile, mỗi profile có PIN, lịch sử xem, danh sách yêu thích và tiến độ xem riêng.
02
Firebase làm backend nhanh
Firebase Auth/Firestore phù hợp MVP streaming clone vì có realtime sync, security rules và deploy-friendly cho frontend.
03
TMDB làm nguồn dữ liệu
TMDB API cung cấp metadata phim/series, ảnh, thể loại và search để UI có nội dung thật thay vì hardcode.
04
Docs ghi bug thật
Repo có nhiều tài liệu fix như ID normalization, Continue Watching, cache lock, YouTube layout và recommendation upgrade, cho thấy dự án có debugging thật.
05
Giá trị portfolio
Project này chứng minh tôi biết làm product UI phức tạp, xử lý dữ liệu realtime và sửa bug state thay vì chỉ cắt giao diện.
Task - Nhiệm vụ
Nếu không tách dữ liệu theo user/profile, My List hoặc Continue Watching có thể hiển thị nhầm giữa các profile trong cùng tài khoản.
ID phim không đồng nhất
TMDB movie/tv/search và Firestore có thể sinh ID khác format, gây duplicate item, mất progress hoặc recommendation sai.
Firestore cần rule chặt
Client app dùng Firestore trực tiếp nên security rules phải đảm bảo user chỉ đọc/ghi dữ liệu của chính họ.
Continue Watching nhiều edge case
Cần xử lý play mới, resume, remove khỏi danh sách, update progress và tránh item chưa xem đủ vẫn xuất hiện sai.
Trailer/embed không ổn định
YouTube trailer có thể thiếu video, layout iframe dễ vỡ trên mobile và cần fallback khi TMDB không trả trailer phù hợp.
Recommendation dễ giả
Nếu chỉ random phim thì không có giá trị; recommendation cần dựa vào lịch sử xem/thể loại để có logic sản phẩm rõ ràng.
Task - Nhiệm vụ
Nếu không tách dữ liệu theo user/profile, My List hoặc Continue Watching có thể hiển thị nhầm giữa các profile trong cùng tài khoản.
01
ID phim không đồng nhất
TMDB movie/tv/search và Firestore có thể sinh ID khác format, gây duplicate item, mất progress hoặc recommendation sai.
02
Firestore cần rule chặt
Client app dùng Firestore trực tiếp nên security rules phải đảm bảo user chỉ đọc/ghi dữ liệu của chính họ.
03
Continue Watching nhiều edge case
Cần xử lý play mới, resume, remove khỏi danh sách, update progress và tránh item chưa xem đủ vẫn xuất hiện sai.
04
Trailer/embed không ổn định
YouTube trailer có thể thiếu video, layout iframe dễ vỡ trên mobile và cần fallback khi TMDB không trả trailer phù hợp.
05
Recommendation dễ giả
Nếu chỉ random phim thì không có giá trị; recommendation cần dựa vào lịch sử xem/thể loại để có logic sản phẩm rõ ràng.
Action - Quyết định & Thực thi
Tôi tổ chức Firestore theo user/profile để My List, PIN và Continue Watching không trộn dữ liệu giữa các profile.
Chuẩn hóa movie ID
Tôi xử lý ID normalization giữa TMDB và Firestore để giảm lỗi duplicate, progress mismatch và item không update đúng.
Xây Continue Watching
Tôi lưu tiến độ xem, cập nhật trạng thái resume và hiển thị lại nội dung đang xem dở theo từng profile.
Tạo recommendation có logic
Tôi dùng lịch sử xem/thể loại làm tín hiệu gợi ý thay vì random, giúp tính năng có câu chuyện kỹ thuật rõ hơn.
Bảo vệ Firestore
Tôi bổ sung Firestore rules/indexes để query tốt hơn và giới hạn quyền đọc/ghi dữ liệu theo user.
Polish cinematic UI
Tôi dùng React/TypeScript/Framer Motion để làm profile selection, hero, modal detail, trailer và transition mượt.
Action - Quyết định & Thực thi
Tôi tổ chức Firestore theo user/profile để My List, PIN và Continue Watching không trộn dữ liệu giữa các profile.
01
Chuẩn hóa movie ID
Tôi xử lý ID normalization giữa TMDB và Firestore để giảm lỗi duplicate, progress mismatch và item không update đúng.
02
Xây Continue Watching
Tôi lưu tiến độ xem, cập nhật trạng thái resume và hiển thị lại nội dung đang xem dở theo từng profile.
03
Tạo recommendation có logic
Tôi dùng lịch sử xem/thể loại làm tín hiệu gợi ý thay vì random, giúp tính năng có câu chuyện kỹ thuật rõ hơn.
04
Bảo vệ Firestore
Tôi bổ sung Firestore rules/indexes để query tốt hơn và giới hạn quyền đọc/ghi dữ liệu theo user.
05
Polish cinematic UI
Tôi dùng React/TypeScript/Framer Motion để làm profile selection, hero, modal detail, trailer và transition mượt.
Result - Kết quả đạt được
Netflix Clone không chỉ giống giao diện mà có auth, profile, PIN, realtime My List, progress, search, trailer và recommendation.
Bug history là bằng chứng
Các file docs về ID normalization, Continue Watching fix, cache lock và recommendation cho thấy tôi từng debug state/data thật.
Demo dễ hiểu
Người xem có thể hiểu nhanh luồng chính: đăng nhập, chọn profile, xem phim, lưu list, resume và nhận gợi ý.
Điểm mạnh technical
Project giúp nói sâu về Firebase data modeling, Firestore rules, third-party API, state management và UI motion.
Limitation thật
Không stream video thật vì vấn đề bản quyền; trailer/metadata phụ thuộc TMDB/YouTube API nên cần fallback khi API thiếu dữ liệu.
Hướng phát triển
Có thể thêm test e2e cho profile/progress, caching tốt hơn cho TMDB và recommendation ranking rõ điểm hơn.
Nhận Thức Chuyên Môn Cốt Lõi
Tôi học được rằng clone UI chỉ có giá trị khi có dữ liệu, auth, state, security rules và edge-case handling đi kèm.
Dự án giúp tôi
Dự án giúp tôi cải thiện khả năng thiết kế state model cho frontend nhiều tầng: account, profile, saved list, watch progress và recommendation.
Đây là ví dụ
Đây là ví dụ cho thấy tôi quan tâm đến trải nghiệm người dùng và chi tiết sản phẩm, không chỉ dựng layout nhìn giống bản gốc.
Result - Kết quả đạt được
Netflix Clone không chỉ giống giao diện mà có auth, profile, PIN, realtime My List, progress, search, trailer và recommendation.
01
Bug history là bằng chứng
Các file docs về ID normalization, Continue Watching fix, cache lock và recommendation cho thấy tôi từng debug state/data thật.
02
Demo dễ hiểu
Người xem có thể hiểu nhanh luồng chính: đăng nhập, chọn profile, xem phim, lưu list, resume và nhận gợi ý.
03
Điểm mạnh technical
Project giúp nói sâu về Firebase data modeling, Firestore rules, third-party API, state management và UI motion.
04
Limitation thật
Không stream video thật vì vấn đề bản quyền; trailer/metadata phụ thuộc TMDB/YouTube API nên cần fallback khi API thiếu dữ liệu.
05
Hướng phát triển
Có thể thêm test e2e cho profile/progress, caching tốt hơn cho TMDB và recommendation ranking rõ điểm hơn.
06
Nhận Thức Chuyên Môn Cốt Lõi
Tôi học được rằng clone UI chỉ có giá trị khi có dữ liệu, auth, state, security rules và edge-case handling đi kèm.
07
Dự án giúp tôi
Dự án giúp tôi cải thiện khả năng thiết kế state model cho frontend nhiều tầng: account, profile, saved list, watch progress và recommendation.
08
Đây là ví dụ
Đây là ví dụ cho thấy tôi quan tâm đến trải nghiệm người dùng và chi tiết sản phẩm, không chỉ dựng layout nhìn giống bản gốc.
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ế.
Xem toàn màn hình
01
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 đó.
Xem toàn màn hình
02
đă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 đó.
Xem toàn màn hình
03
đă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 đó.
Xem toàn màn hình
04
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 đó.
Xem toàn màn hình
05
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 đó.
Mã nguồn & DemoTrải nghiệm dự án
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ế.
DỰ ÁN TIẾP THEO