{"id":2508,"date":"2026-07-29T14:40:50","date_gmt":"2026-07-29T12:40:50","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=2508"},"modified":"2026-08-04T14:00:24","modified_gmt":"2026-08-04T12:00:24","slug":"filmin-frontend-platform-clone","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/en\/filmin-frontend-platform-clone\/","title":{"rendered":"Filmin – Frontend Platform Clone"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \n \t\t\t

Web Development<\/p>\n\t\t\n<\/a>\n

\n\t\t\t\t\t
\n\t\t\t\t\t

Filmin - Frontend Platform Clone<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n
\n \t\t\t

Overview<\/h2>\n\t\t\t\t\t

Developed as an individual project for the Factor\u00eda F5 Frontend Bootcamp<\/strong>, this project focused on designing and building a functional web clone of Filmin<\/strong>\u2014a 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<\/strong> powered by real-time data from The Movie Database (TMDB) API<\/strong>.<\/p>\n\t\t\t\t\t

The Challenge<\/h2>\n\t\t\t\t\t

Replicating an established VOD platform UI presents complex technical and visual challenges under tight time constraints:
     - Short Delivery Timeframe<\/strong>: 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<\/strong>: Translating Filmin\u2019s distinct, media-heavy visual identity into interactive Figma wireframes before touching production code.

     - Dynamic API Data Handling<\/strong>: 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<\/strong>: Navigating project constraints while prioritizing core features (catalog lists, main carousel hero) and strategically managing non-critical deliverables within the sprint window.<\/p>\n\t\t\t\t\t

Our Approach<\/h2>\n\t\t\t\t\t

To ensure structured execution and high code quality within the 7-day timeline, an Agile, design-first workflow was implemented:
Agile Planning & Figma Prototyping<\/strong>:
     - Formulated user stories and organized a dedicated Trello board (Backlog, Doing, Done<\/em>) 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<\/strong>:
     - Leveraged Svelte\u2019s reactive state management and lightweight compiled architecture to build reusable frontend components (Hero Carousel, Movie Grid Cards, Categorized Row Lists).

API Integration & Dynamic Localization<\/strong>:
     - 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<\/strong>:
     - 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.<\/p>\n\t\t\t\t\t

Project Gallery<\/h2>\n\t\t
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visit the Website<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t<\/a>\t\t\n<\/div>\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visit Figma<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t\t\n \t\t\t

Visit Trello<\/p>\n\t\t\n<\/a>\n\n<\/div>\n\n<\/div>\n\t\t\t

Results<\/h2>\n\t\t\t\t\t

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<\/strong>: Successfully replicated the aesthetic and structural essence of Filmin\u2019s web client with a modern, responsive user interface.

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

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

     - Solid Technical Foundation<\/strong>: Established a modular, scalable Svelte codebase ready for future feature expansions and enhanced interactive UI details.<\/p>\n\t\t\n<\/div>\n

\n
\n
\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

YEAR<\/p>\n\t\t\n<\/div>\n\t\t\t

2023<\/p>\n\t\t\n<\/div>\n

\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

SERVICES<\/p>\n\t\t\n<\/div>\n\t\t\t

Frontend Web Development
UI\/UX Design & Prototyping
API Integration & State Management<\/p>\n\t\t\t\t\t

TOOLS & TECHNOLOGY<\/p>\n\t\t

\n
\n \t\t\t

Svelte<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Figma<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Git<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

The Movie Database<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

VS Code<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Trello<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Vercel<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t

TAGS<\/p>\n\t\t

\n
\n \t\t\t

Web Development<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Frontend Development<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Svelte<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

UX\/UI Design<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Web Aplication<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

REST API Integration<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Figma Prototyping<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

Interested in a similar project?<\/p>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tGet in Touch<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Web Development Filmin – Frontend Platform Clone Overview Developed as an individual project for the Factor\u00eda F5 Frontend Bootcamp, this project focused on designing and building a functional web clone of Filmin\u2014a leading independent streaming and VOD service. Over a intensive 1-week execution window, the initiative spanned the complete frontend lifecycle: from translating platform requirements […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2508","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/comments?post=2508"}],"version-history":[{"count":31,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2508\/revisions"}],"predecessor-version":[{"id":2719,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2508\/revisions\/2719"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/media?parent=2508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}