- Realizamos un clon de los principales elementos de la UI del sitio https://www.netflix.com.
- Utilizamos React como base mediante
create-react-app
, dividiendo responsabilidades en distintas carpetas (Routes, Layouts, Pages, Contexts, Components, etc). - Para los estilos utilizamos principalmente los estilos de material UI mediante
makeStyles
. (Tener en cuenta que para que sobrescriban los que trae Material UI, deben estar declarados dentro del mismo componente o bien utilizando la sentencia!important
en su declaración).
- Clonar repositorio desde la rama
frontend_develop
: https://github.com/jpromanonet/guayerd_netflixClone - Ingresar a la carpeta "client":
cd client
- Instalar localmente dependencias necesarias:
npm i
- Iniciar el cliente:
npm start
Header
- Completar Contenido y su renderizado condicional en las diferentes rutasFooter
- Mejorar con display grid, renderizado condicional con variantes en las diferentes rutas.- Lógica en componentes con envío de datos (
UserLogin
yMailLogin
) - Agregar contexts según necesario (Para usuario, highlightedMedia, etc)
- Refactorizar en custom hooks según necesario
/browse
- Renderizado dinámico según info de usuario recibida por context.
- Mejorar el comportamiento responsive al achicar viewport.
- Agregar un loader/spinner
- Continuar con la parte más interactiva. Extra bonus: integrar algo de video (GOD-mode)
UserLogin
- Puede personalizarse aún más la lógica de validación para que evalúe por separado si es un mail o teléfono (ver utilización de métodowhen()
enyup
)- Manejo de error "404 Not Found".
- Lo que se les ocurra!
- React
- Create React App - Creación/build del proyecto base y configuración inicial.
- Material UI (v4) - Componentes de Interfaz Gráfica, estilos, theme, íconos
- Swipe - Sweeper de imágenes
- Formik - Manejo de estado en formularios
- Yup - Validación de datos
- Axios - Conexión a DB (Aún no utilizado)