GeeksHubs Academy, Proyecto 5 :
- Objetivo 🎯
- Vistas 🖥️
- Desarrollo 🔧
- Credenciales 🔐
- Repositorio 💾
- Instalación en Local 💽
- Agradecimientos 👏
El objetivo de este proyecto es crear el frontend de una clinica dental funciona y conectar con un backend y una base de datos creados en el proyecto anterior (Proyecto 4).
Para alcanzar el objetivo se han incluido las vistas para cumplir con la funcionalidades básicas de una página web con las siguientes carácteristicas: login, registro,visualización de datos del usuario, modificación de datos del usuario y eliminación del usuario, creación de citas, visualización de todas las citas y búsqueda de citas por fecha, modificación y eliminación de citas.
La API ha sido desarrollada por Joaquin Ruiz Padrós como parte de la formación Full Stack Developer de GeeksHubs.
Para la realización del proyecto, se han utilizado el siguiente stack tecnologico:
Se ha utilizado Vite-React-JS como base del proyecto y estructura básica para conseguir una SPA funcional.
Para la gestión de información entre los diferentes componentes de la APP se ha implementado REDUX. En este caso, el uso de REDUX se ha limitado a las credenciales del usuario ya que no se ha sido necesario implementarlo en el resto de vistas/componentes.
REDUX-PERSIST y REDUX-THUNK se han añadido como librerias adicionales para la conservación de las credenciales de la página a pesar del cierre de la pestaña o ventana del navegador.
En cuanto al diseño, se han utilizado componentes de Bootstrap y MDB-Bootstrap para conseguir un diseño atractivo y responsive.
Para levantar el backend se usa docker en los puertos 3006 y 3007. Una vez levantado el contenedor del docker se puede levantar el servidor del backend y ya se podria usar todas las funcionalidades del frontend con las consultas a la BD.
Por último, como herramientas utilitarias hemos usado JWC_DECODED para desencriptar los datos del token recibido por el backend e importar las credenciales correspondientes.
Para poder comprobar el funcionamiento puedes logearte como Admin, Doctor y usuario:
Email => ximo@mail.com
Logeandote como Admin muestra el botón en el header de usuarios donde puedes ver todos los usuarios registrados.
Email => jesus@mail.com ó carlos@mail.com
Logeandote como doctor muestra el botón Agenda donde puedes ver todas las citas pendientes y un buscador que filtra las citas por fecha.
Email => alex@mail.com ó javi@mail.com ó marta@mail.com ó noelia@mail.com
Puedes Registar tantos usuarios como quieras siendo el email unico, es decir, solo puedes registrar un email una vez al igual que el Teléfono.
Frontend: https://github.com/xIMet3/frontendDentista Backend: https://github.com/xIMet3/baseDatosDentista
Gracias a todos los compañeros que me han ayudado en especial a Jesus y Edu que me han apoyado desde el minuto uno.