Las siguientes funcionalidades son requisitos mínimos necesarios para la aprobación del final y es fundamental que funcionen correctamente.
La aplicación deberá contar con cuatro (4) páginas: Home, Contacto, Detalle de cada dentista, Destacados
La correcta navegacion entre las paginas por medio de Links propios de React Router sera obligatoria para la aprobacion
Es crucial la presencia homogenea en todas las paginas del Navbar y Footer
Deberán crear un contexto global en su aplicación que ponga a disposición la siguiente información:
- Tema de colores para toda la app (claro u oscuro)
- Información traída por la API (pueden utilizar fetch o axios para realizar la llamada)
- Para el manejo y actualización del estado global deberán implementar el hook useReducer. Con dicho hook deberán implementar el cambio de tema de colores (con un botón en la app específico para ello dentro de Navbar), de claro a oscuro y viceversa.
Utilizando React Router deberán crear las siguientes direcciones descriptas en rutas
- Cada card renderizada debe tener la opción de poder agregarse a destacados.
- Deberan guardar las cards destacadas en la sesión actual del localStorage
- Manejar dicho comportamiento con el hook useReducer
En base al tema (claro u oscuro) consumido del contexto global, estilar las cuatro rutas de la App (asignar determinados estilos si es “dark” o “light”).
En esta página se deberá mostrar un listado en forma de grilla de los dentistas devueltos por la API
Se deberá tener en cuenta lo siguiente:
- Deberá ser la página de inicio de la web.
- La grilla deberá mostrar una Card por cada dentista devuelto por la API.
- Cada dentista deberá contener
nameyusername, junto con un botonADD FAV(para agregar al localStorage como fav) y unlinkque permita su navegacion a la pagina dentist/:id en base al id del dentista. - Cada Card debe integrar la funcionalidad de agregar a destacados
En esta pagina deberán implementar un Form (con sus validaciones pertinentes) que capture la información del usuario que desea contactar con la empresa. Los campos serán los siguientes:
- Nombre completo (con longitud mayor a 5)
- Email (con formato correcto de email)
- En caso de haber un error mostrar el siguiente mensaje de error: Por favor verifique su información nuevamente
- Una vez "enviado"( no se envía a ningún servidor pero podemos mostrar por consola los datos submiteados) el formulario deberán mostrar un mensaje de éxito que contenga el siguiente formato: Gracias [nombre del usuario], te contactaremos cuando antes vía mail
En esta página se deberá mostrar un detalle de un dentista individual de la API.
Se deberá tener en cuenta lo siguiente:
- Deberá estar en la ruta
/dentist/:id. - La página deberá indicar al menos la siguiente información:
- Nombre del personaje
- Telefono
- Sitio web
En esta pagina se debera renderizar las Cards pertinentes a los dentistas destacados. Dicha información deberá estar almacenada dentro del localStorage del browser y ser consumida dentro de la pagina
- Se deberá estar en la ruta
/favs.
Te dejamos un video como ejemplo de cómo debería funcionar tu aplicación, en la carpeta public