Netflix Layout.
Layout of the Netflix homepage.
Data Sheet.
Technologies:
- HTML
- CSS
- JavaScript
- React.Js
- 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.