Overview

Developed as an individual project for the Factoría F5 Frontend Bootcamp, this project focused on designing and building a functional web clone of Filmin—a leading independent streaming and VOD service. Over a intensive 1-week execution window, the initiative spanned the complete frontend lifecycle: from translating platform requirements into high-fidelity Figma prototypes to implementing a reactive frontend application using Svelte powered by real-time data from The Movie Database (TMDB) API.

The Challenge

Replicating an established VOD platform UI presents complex technical and visual challenges under tight time constraints:
     - Short Delivery Timeframe: Building a fully functioning, styled, and API-driven application within a strict 1-week deadline as a solo developer.

     - UI/UX Fidelity vs. Platform Scale: Translating Filmin’s distinct, media-heavy visual identity into interactive Figma wireframes before touching production code.

     - Dynamic API Data Handling: Structuring seamless asynchronous requests to fetch external movie catalogs, handle localized data parameters (Catalan/Spanish queries), and map raw JSON payloads into clean UI components.

     - Scope & Priority Management: Navigating project constraints while prioritizing core features (catalog lists, main carousel hero) and strategically managing non-critical deliverables within the sprint window.

Our Approach

To ensure structured execution and high code quality within the 7-day timeline, an Agile, design-first workflow was implemented:
Agile Planning & Figma Prototyping:
     - Formulated user stories and organized a dedicated Trello board (Backlog, Doing, Done) to track incremental progress.

     - Designed high-fidelity prototypes in Figma to establish UI components, layout structures, typography hierarchy, and hero carousel layouts prior to coding.

Component-Driven Svelte Architecture:
     - Leveraged Svelte’s reactive state management and lightweight compiled architecture to build reusable frontend components (Hero Carousel, Movie Grid Cards, Categorized Row Lists).

API Integration & Dynamic Localization:
     - Integrated TMDB REST API endpoints to dynamically populate movie collections.

     - Implemented custom query parameters (language=ca / language=es) to support localized streaming metadata.

Agile Scope Management:
     - Prioritized core platform navigation, hero carousels, and dynamic catalog feeds to deliver a solid, fully operational MVP.

     - Documented secondary feature backlogs (such as detailed hover state overlays) for future iterative releases.

Project Gallery

Results

The 1-week sprint resulted in a fully functional, visually faithful frontend web application that demonstrates strong UI/UX prototyping and reactive JavaScript framework execution:
     - High-Fidelity Platform Clone: Successfully replicated the aesthetic and structural essence of Filmin’s web client with a modern, responsive user interface.

     - Seamless API & State Management: Implemented reliable asynchronous data flow from TMDB API, rendering dynamic movie collections smoothly across components.

     - Efficient Solo Execution: Delivered a complete design-to-code workflow under strict 1-week constraints using disciplined Agile task management.

     - Solid Technical Foundation: Established a modular, scalable Svelte codebase ready for future feature expansions and enhanced interactive UI details.