Fotografía mía de cuerpo completo con grandes montañas de fondo.R. Agustín Morán
  • Blog
  • Sobre mí
  • Portafolio
  • Proyectos
  • Fotos
Ricardo Agustín Morán R.
  • LinkedIn
  • GitHub
  • Instagram
Sitemap
  • Home
  • Portafolio
  • Proyectos
  • Sobre mí
  • Fotos
  • Mi misión
  • Experiencia
  • Educación
  • Sitemap.xml
  • Blog
Contacto

Puedes contactarme a través de mis redes sociales o vía email: agustin.moranr@gmail.com ¡Estaré encantado de conocerte!

©

Ricardo Agustín Morán Rivas

. 2025 🇲🇽
Hecho con cariño.

Netflix Layout.

Maquetación del Home Page de Netflix.

Imagen de la página de Home de mi proyecto "Netflix Layout".
Imagen del modal con los detalles de una serie de mi proyecto "Netflix Layout".
Imagen del la parte inferior del modal con los detalles de una serie de mi proyecto "Netflix Layout".
Imagen viendo una serie en mi proyecto "Netflix Layout".
14

Galería del proyecto.

Escritorio
Móvil
Imagen de la página de Home de mi proyecto "Netflix Layout".
Imagen del modal con los detalles de una serie de mi proyecto "Netflix Layout".
Imagen del la parte inferior del modal con los detalles de una serie de mi proyecto "Netflix Layout".
Imagen viendo una serie en mi proyecto "Netflix Layout".

Ficha Técnica.

Visita el sitio web
Periodo de desarrollo: Del 23 de Febrero del 2021 al 16 de Marzo del 2021.

Tecnologías utilizadas:

  • Logo de la tecnología HTML
    HTML
  • Logo de la tecnología CSS
    CSS
  • Logo de la tecnología JavaScript
    JavaScript
  • Logo de la tecnología React.js
    React.Js
  • Logo de la tecnología Sass
    Sass

Introducción:

Este proyecto comenzó como una oportunidad de crecimiento para mí. Por una parte, quería tener un proyecto personal que me diera más visibilidad como desarrollador web.

Pero también, en aquel momento, estaba en mi primer empleo como desarrollador y quería apoyar con mayor alcance el desarrollo Frontend que realizábamos, el cual estaba hecho con React.js y Next.js.

Sin embargo, no tenía dominio sobre la librería y era poco ágil al desarrollar. Por lo que este proyecto personal me ayudaría a tener mayor soltura y conocimiento sobre la librería.

Objetivo:

Mi principal objetivo al realizar este proyecto fue tener un mayor dominio sobre la librería React.js. Aunque ya había tenido acercamiento a la librería, honestamente, tenía poco entendimiento y experiencia haciendo uso de ella.

Por otra parte, también quería implementar Sass en un proyecto para conocer el potencial de este preprocesador de CSS.

Por último, quise hacer de este proyecto algo que fuera vistoso y retador. Es por eso que escogí la interfaz de usuario (UI) de Netflix como la base de este proyecto.

Dificultades:

Realizar este proyecto fue un gran reto a nivel de estilos; sin embargo, la sección que más me costó trabajo fue la del carrusel para mostrar las series y películas. Ya que no utilicé ningún tipo de librería externa, fue complicado lograr un buen resultado para construir el carrusel y su navegación.

Tuve bastante crecimiento en mis habilidades de CSS durante el desarrollo de este proyecto. Asimismo, la gestión de estado con React.js fue retadora en su momento. Pero al terminar este proyecto, sentía que tenía bastante más soltura y entendimiento de los conceptos básicos de React.js.

Funcionalidades:

  • Posibilidad de añadir y eliminar películas y series a "Mi Lista".
  • Navegación mediante carrusel de películas y series.
  • Botón de Replay, Mute y Unmute en reproductor de tráiler.
  • Expandir información de películas o series al poner el cursor sobre algún elemento dentro de las listas.

Conclusión y Aprendizajes:

Este es quizás mi proyecto personal favorito. Puse mucho esfuerzo y dedicación durante varias semanas en él.

Sin duda, durante el camino tuve un gran crecimiento en mis habilidades de CSS, React.js y como desarrollador Frontend en general.

Algunos aprendizajes que tuve fueron:
  • Gestionar el estado de una aplicación de React.js utilizando useState y useContext.
  • Consultar datos de una API externa en React.js utilizando useEffect.
  • Implementación de animaciones sencillas.
  • Creación de componentes reutilizables con React.js.
Referencias:
  • Next.js. Documentación oficial de Next.js: https://nextjs.org.
  • React.js. Documentación oficial de React.js: https://react.dev.
  • CSS. Documentación oficial de CSS: https://developer.mozilla.org/es/docs/Web/CSS.
  • Sass. Documentación oficial de la tecnología Sass: https://sass-lang.com.