Gabriel Fajardo

[gabo-hacStyle]

Prueba técnica SunnyApp

Solución de Gabriel Fajardo

Descripcion básica

Una aplicacion web simple, donde se puede contemplar un flujo comun de un usuario para registrarse, loggearse y acceder a su 'dashboard'. Dentro de la vista del dashboard se observa la grafica, el boton para generar datos y una tabla con todos los datos hasta el momento. La grafica y la tabla se actualizan sin necesidad de refrescar la pagina al oprimir el boton.

Los campos para login y registro tienen sus propias validaciones evitando el incorrecto acceso de datos al sistema.

Se guarda en localStorage el acces-token dado por el backend para poder más adelante mantener al usuario logeado. Así mismo, por seguridad, se restringe el acceso a dashboard sin el token.

Lenguajes Utilizados

• Frontend: ReactJs instalado con vitejs. Esta herramienta ya trae estilos para dark-mode y light-mode, junto con fuentes y colores agradables. Por lo que el resto de estilos fueron puestos como inline styles sin problema dentro del html (gracias a que la aplicacion es simple). Use react-router-dom para la navegación.
• Backend: Python a travez de su framework más famoso: Django. La considere perfecta para el proyecto ya que una de sus herramientas (Django Rest Framework) trae la logica para crear una API REST de manera sencilla y facilita el proceso de autenticación
• Para generar la gráfica: Use la libreria matplotlib de python. A travez de esta se lee el modelo de 'data' y se genera la gráfica como una imagen que se envía al cliente junto con la data mediante base64 (una imagen) en el mismo pedido JSON.

Estructura del Proyecto

El proyecto tiene la siguiente estructura de carpetas:

• Código se divide en dos: Backend y Frontend
• En Backend trabaje un entorno virtual venv, proyecto api y aplicacion api_rest
• En frontend dentro de src esta todo el codigo con su lógica.

Para probarlo

Si desean probarlo en su sistema:

• Descarga de repositorio en su pc
• Dentro de la carpeta de frontend corren el comando

npm i

para instalar dependencias, y luego

npm run dev

para habilitar el cliente frontend por el puerto 5173.

• Dentro de la carpeta backend, tambien instala todas las dependencias, activa el proyecto y corre el servidor. Este por defecto corre en el puerto 8000.

pip install -r requirements.txt
source Scripts/activate
python manage.py runserver

Con eso ya se puede probar efectivamente la app. 😎👍