Glassflix
Modern web-based movie, series, and anime streaming web app engineered with Vue 3 and TMDB API, featuring Kids Mode content filtering, auto-resume playback tracking, custom watchlists, Supabase backend, and PWA support.
Architecture & Technology Stack
Architectural Overview & Case Study
Glassflix (glassflix.velascode.com) is a full-featured, responsive streaming web application designed to deliver an immersive entertainment browsing experience. Built with a sleek glassmorphism UI design language, Kids Mode content safety, and optimized for cross-device performance.
Key Features & Functional Highlights:
• TMDB API Metadata Integration: Dynamically fetches real-time movie/TV show metadata, trending lists, cast information, high-res posters, and ratings.
• Kids Mode Toggle: One-click safe browsing filter that automatically restricts content to family-friendly and age-appropriate media listings.
• Continue Watching & Auto-Resume Playback: Automatically syncs and persists user video progress, timestamp markers, and last-watched episodes.
• Streaming Network Filters: Quick-category filtering across major media providers (Netflix, Prime Video, Disney+, Max, Hulu, Apple TV+, Crunchyroll, Vivamax).
• Custom Collections & Watchlist Management: Users can build personalized media watchlists, save favorite titles, and organize custom collections.
• PWA & Smart Display Support: Fully installable Progressive Web App with offline caching, TV mode, and responsive layout scaling across desktop, mobile, and smart TVs.
Technical Stack & Hosting Disclaimer:
• Stack: Vue 3, Pinia (Global State), Tailwind CSS, Supabase (Serverless Backend), Vercel Edge Deployment.
• Hosting Disclaimer: Glassflix functions strictly as an architectural frontend interface utilizing the public TMDB API for media metadata. All media playback is handled via third-party external embeds; no video files or copyrighted media are stored or hosted on Glassflix servers.