Este proyecto se dessarrolló dentro del Bootcamp de Desarrollo Frontend de Factoría F5. La actividad consistía en crear un clon funcional de la pantalla principal de la plataforma Filmin utilizando el framework Svelte, aplicando una metodología de trabajo ágil basada en hitorias de usuario, Trello y validaciones interativas.
El objetivo era poner en práctica los conocimientos de componentización, diseño con Figma, estructuración de código y flujo de trabajo ágil, simulando un entorno real de desarrollo.
Clon de Filmin creado con Svelte, inspirado en la interfaz original de la plataforma.
Haz clic en la imagen para visitar la web.
PROCESO CREATIVO
Durante el desarrollo del proyecto se siguió una metodología interativa y organizada en diferentes etapas:
- Planificación en Trello: Se creó un tablero con tres columnas (Vaclog, Doing, Done) donde se añadieron todas las historias de usuario. Este sistema permitió priorizar tareas y mantener un flujo de trabajo claro y visual.
- Diseño en Figma: Antes de implementar cada historia de usuario, se realizó un diseño específico en Figma para definir la estructura visual y la experiencia del usuario.
- Implementación en Svelte: Se desarrollaron los distintos componenetes de la interfaz siguiendo las historias de usuario propuestas:
- Catálogo de películas: Vista inicial con la lista de películas disponibles.
- Listas de películas: Organización del contenido en secciones temáticas, imitando la distribución de Filmin.
- Carrusel principal: Componente dinámico que destaca títulos seleccionados.
- Vista de detalle al hacer hover: Interacción que muestra información adicional de cada película.
- Validación continua: Al completar cada historia, se revisaba su funcionamiento con el equipo formador para garantizar que cumplía los criterios de aceptación antes de avanzar a la siguiente.
- Alcance y limitaciones: Durante el desarrollo se completaron casi todas historias de usuario previstas. Sin embargo, debido a limitaciones de tiempo, no fue posible implementar la vista de detalle al hacer hover.
El resultado fué una aplicación funcional y visualmente coherente, desarrollada con buenas prácticas de código y diseño, que reproduce la experiencia de navegación de Filmin desde un enfoque técnico y didáctico.