Cinematic Local Gallery

Tổng quan dự án (Project Overview) Ứng dụng web Fullstack phục vụ việc quản lý, lưu trữ và trình chiếu thư viện media (ảnh/video) cục bộ. Dự án tập trung vào việc tối ưu hóa trải nghiệm xem video cao cấp (cinematic) và xây dựng các luồng tự động hóa để xử lý dữ liệu, đồng bộ hóa và tạo ảnh thu nhỏ (thumbnail) mà không cần can thiệp thủ công.

Vai trò & Công việc đảm nhận (Key Responsibilities) Là người phát triển duy nhất (Sole Developer), tôi chịu trách nhiệm thiết kế toàn bộ luồng vận hành từ Frontend đến các script xử lý ngầm:

• Phát triển Trình phát Video Tùy chỉnh (Custom Video Player): Ứng dụng HTML5 Video API và Fullscreen API để xây dựng player nâng cao hỗ trợ Theater mode, Fullscreen chân thực, hệ thống phím tắt điều khiển (shortcuts) và thuật toán gợi ý video ngẫu nhiên.

• Tự động hóa Xử lý Media (FFmpeg Integration): Viết các kịch bản dòng lệnh (CLI scripts) trên nền tảng Node.js kết hợp fluent-ffmpeg để tự động quét thư mục, trích xuất khung hình và sinh thumbnail hàng loạt cho video. Xây dựng cơ chế fallback thông minh tự động map ảnh dựng sẵn trên giao diện.

• Thiết kế Cơ chế Đồng bộ & Auto-save: Giải quyết bài toán lưu trữ tĩnh bằng cách kết hợp localStorage (cho tốc độ phản hồi tức thời, như bộ đếm lượt xem realtime) và luồng API gọi xuống Backend Server để tự động sao lưu (auto-save) dữ liệu vĩnh viễn vào file hệ thống (db.ts) mỗi 5 phút hoặc khi đóng trình duyệt.

• Xây dựng CMS & Quản trị Dữ liệu (Admin Panel): Phát triển phân hệ quản trị cho phép lọc/tìm kiếm đa chiều (Categories & Tags), chỉnh sửa siêu dữ liệu (metadata), can thiệp trực tiếp vào luồng dữ liệu thông qua cơ chế Import/Export file JSON.

Kỹ năng & Công nghệ sử dụng (Technologies & Skills)

• Nền tảng/Ngôn ngữ: React (TypeScript - thông qua cấu trúc .tsx), Node.js.

• Công cụ & Thư viện: FFmpeg (fluent-ffmpeg), HTML5 Web APIs.

• Kỹ năng chuyên môn: Data Synchronization (Đồng bộ dữ liệu client-server), CLI Scripting, Media Processing, Web Automation & Auto-save Mechanisms.