Skip to content

Jicaffo/g_netflixClone-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend

Descripción general

  • 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).

Instalación / Ejecutar

Pendientes / posibles mejoras / ideas para continuar

  • Header - Completar Contenido y su renderizado condicional en las diferentes rutas
  • Footer- Mejorar con display grid, renderizado condicional con variantes en las diferentes rutas.
  • Lógica en componentes con envío de datos (UserLogin y MailLogin)
  • 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étodo when() en yup)
  • Manejo de error "404 Not Found".
  • Lo que se les ocurra!

Tecnologías utilizadas

  • 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)