This is a purely demonstrative web app built with React UI and Firebase backend, emulating the well-designed Netflix.com web app UI.
This app implements technologies like "styled-components" for UI styling, "prop-types" for static checking of props, "react-router-dom" for handling routes and "fuse.js" for lightweight fuzzy search.
As best practices, this app follows React patterns such as separating presentational components from display components and component composition. It also implements PropTypes checking and "eslint-plugin-react" rules.
The entire app is built with functional components, hooks, and custom hooks. State is managed with the Context mechanism and useContext hook.
The higher-order component React.memo is used for rendering container components, not because it's needed in every case, but to prepare them to be used by larger applications, specifically those components called "generics" which were built to be highly reusable and scalable.
It was not necessary to implement mechanisms like useMemo and useCallback because there are no expensive calculations to memorize between renderings, and the use of the "eslint-plugin-react" rules avoids the need to use useCallback in this application.
Material and guidance were provided by Karl Hadwen at https://www.youtube.com/watch?v=x_EEwGe-a9o, however, this app uses a different approach to how to structure it.
Thanks Karl for spreading knowledge.
