A full-body photograph of me with large mountains in the background.R. Agustín Morán
  • Blog
  • About me
  • Portafolio
  • Projects
  • Photos
Ricardo Agustín Morán R.
  • LinkedIn
  • GitHub
  • Instagram
Sitemap
  • Home
  • Portafolio
  • Projects
  • About me
  • Photos
  • My mission
  • Experience
  • Education
  • Sitemap.xml
  • Blog
Contact

You can contact me through my social media or via email: agustin.moranr@gmail.com. I'll be delighted to meet you!

©

Ricardo Agustín Morán Rivas

. 2025 🇲🇽
Hecho con cariño.

Netflix Layout.

Layout of the Netflix homepage.

Image of the Home page of my 'Netflix Layout' project.
Image of the modal with the details of a series in my 'Netflix Layout' project.
Image of the bottom part of the modal with the details of a series in my 'Netflix Layout' project.
Image of watching a series in my 'Netflix Layout' project.
14

Project gallery.

Desktop
Mobile
Image of the Home page of my 'Netflix Layout' project.
Image of the modal with the details of a series in my 'Netflix Layout' project.
Image of the bottom part of the modal with the details of a series in my 'Netflix Layout' project.
Image of watching a series in my 'Netflix Layout' project.

Data Sheet.

Visit the website
Development Period: From February 23rd, 2021 to March 16th, 2021.

Technologies:

  • 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

Introduction:

This project started as an opportunity for growth for me. On one hand, I wanted to have a personal project that would give me more visibility as a web developer.

But also, at that time, I was in my first job as a developer and wanted to support the Frontend development we were doing with greater scope, which was done with React.js and Next.js.

However, I didn't have mastery over the library and was not very agile in development. So, this personal project would help me to have greater fluency and knowledge about the library.

Objective:

My main goal in undertaking this project was to have a greater mastery of the React.js library. Although I had already been introduced to the library, honestly, I had little understanding and experience using it.

On the other hand, I also wanted to implement Sass in a project to explore the potential of this CSS preprocessor.

Lastly, I wanted to make this project something visually appealing and challenging. That's why I chose the Netflix user interface (UI) as the basis for this project.

Challenges:

Completing this project was a great challenge in terms of styling; however, the section that gave me the most trouble was the carousel for displaying TV shows and movies. Since I didn't use any external library, it was difficult to achieve a good result in building the carousel and its navigation.

I experienced significant growth in my CSS skills during the development of this project. Likewise, state management with React.js was challenging at the time. But upon finishing this project, I felt that I had much more fluency and understanding of the basic concepts of React.js.

Features:

  • Possibility to add and remove movies and series to 'My List'.
  • Navigation through carousel of movies and series.
  • Replay, Mute, and Unmute buttons in trailer player.
  • Expand information of movies or series when hovering over an item within the lists.

Conclusion and Learnings:

This is perhaps my favorite personal project. I put a lot of effort and dedication into it for several weeks.

Undoubtedly, along the way, I experienced significant growth in my CSS, React.js, and overall Frontend development skills.

Some of the learnings I had were:

  • Managing the state of a React.js application using useState and useContext.
  • Fetching data from an external API in React.js using useEffect.
  • Implementation of simple animations.
  • Creating reusable components with React.js.

References:
  • Next.js. Official Documentation: https://nextjs.org.
  • React.js. Official Documentation: https://react.dev.
  • CSS. Official Documentation: https://developer.mozilla.org/es/docs/Web/CSS.
  • Sass. Official Documentation: https://sass-lang.com.