[Laravel + Angular] Fenix Tasks 1.0

 

En este proyecto se hizo un sistema para registrar espacios de trabajo en los cuales se pueden asignar tareas y registrar los tiempos de trabajo. Este sistema usa Laravel como Backend y desde el lado de Frontend usa Angular con Material. La base de datos elegida para este proyecto fue MySQL.

Las funciones incorporadas son :

Inicio de sesión obligatorio para usar el sistema protegido con JWT.

Posibilidad de cambiar usuario y contraseña.

Posibilidad de cambiar el theme completo del sistema a un modo oscuro o claro.

Se puede agregar, editar y borrar espacios de trabajo. En la misma sección se maneja un filtro de redux para buscar por nombre. En cada espacio de trabajo se puede establecer la fecha de inicio, la fecha de finalización y el estado en el que se encuentra el espacio.

Dentro de los espacios se pueden crear, editar y borrar tareas, las mismas también se manejan por fechas de inicio y finalización, además poseen un cronómetro para medir el tiempo que lleva cada tarea.

En el inicio del dashboard se muestran unas estadísticas del sistema que consisten en mostrar dos gráficos, en el primero se muestran los espacios que tuvieron más días de trabajo y en el segundo gráfico se muestran los que demoraron menos. También se muestran dos tablas, en la primera se muestran las 3 tareas que llevaron más tiempo y en la segunda se muestran las que menos.

Se incluye un calendario donde se muestran las fechas de inicio y finalización de todas los espacios y tareas creados.

A continuación se muestran unas imágenes del sistema en funcionamiento.

 

Para la correcta instalación del sistema se deben seguir los siguiente pasos.

En la carpeta del Backend que sería "sistema-api" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL, el SECRET_KEY que sería la clave para generar el JWT.

Una vez editado el archivo .env se deben ejecutar los siguiente comandos :

composer install

php artisan key:generate

php artisan migrate

php artisan db:seed --class=DatabaseSeeder

php artisan storage:link

Finalmente para iniciar el servidor se debe ejecutar este comando :

php artisan serve --port=7777

En la carpeta del Frontend que sería "sistema-frontend" se debe ejecutar el siguiente comando para instalar las dependencias :

npm install

En esa misma carpeta deben ir al directorio "environments" para modificar los archivos environment.ts reemplazando las variables "apiUrl" y "imagesUrl" por la ruta de su servidor Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

  

Github

[NextJS] Nygma 1.0

En este proyecto se hizo un encriptador de documentos y mensajes que usa AES-256 para lograr ese propósito, esta hecho en NextJS y usa una base de datos MySQL para gestionar los documentos. Las tecnologías que usa son Sequelize, Material UI, Redux y NextAuth para asegurar las rutas de la aplicación.

Las funciones incorporadas son :

Inicio de sesión obligatorio para usar el sistema protegido con JWT.

Rutas protegidas con NextAuth.

Posibilidad de cambiar usuario y contraseña.

Posibilidad de cambiar el theme completo del sistema a un modo oscuro o claro.

Se puede agregar, editar y borrar documentos. En la misma sección se maneja un filtro de Redux persistente para buscar por nombre. Además en la sección de gestionar documentos se pueden importar y descargar.

Se puede esconder y recuperar mensajes encriptados en imágenes que se pueden descargar.

Cuando se descarga un documento, se genera en formato HTML, el mensaje es encriptado en AES-256 con la clave seleccionada, al ejecutar el archivo HTML se puede desencriptar el mensaje ingresando la clave que se uso en el documento.

A continuación se muestran unas imágenes del sistema en funcionamiento.

 

 

 

 

Para la correcta instalación del sistema se deben seguir los siguiente pasos.

Se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL, el NEXT_PUBLIC_API_URL que seria la URL serial la ruta completa que se esta usando apuntando a "/api", el NEXT_PUBLIC_JWT_SECRET_KEY que seria la clave para generar el JWT. Para la configuración de NextAuth se necesita editar en NEXTAUTH_URL con la url de la aplicación y una contraseña en NEXTAUTH_SECRET.

Una vez editado el archivo .env se deben ejecutar los siguiente comandos :

npm install

npm run migrate

npm run seed

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run dev 

Github

[Laravel + ReactJS] Agenda Fénix

En este proyecto se hizo una agenda completa que usa Laravel como Backend y desde el lado de Frontend, ReactJS con Vite, Material UI y Redux. La base de datos elegida para este proyecto fue MySQL.

Las funciones incorporadas son :

Inicio de sesión obligatorio para usar el sistema protegido con JWT.

Posibilidad de cambiar usuario y contraseña.

Posibilidad de cambiar el theme completo del sistema a un modo oscuro o claro.

Se puede agregar, editar y borrar categorías. En la misma sección se maneja un filtro de redux persistente para buscar por nombre.

Se pueden agregar, editar y borrar notas, en las cuales se puede elegir el titulo de la misma, un contenido protegido con AES-128-ECB que usa el editor Tiptap que permite usar estilos, colores, links, alineaciones de texto, listas, códigos. También se permiten agregar imágenes que se suben al backend del sistema. Se permite seleccionar una o varias categorías, fijar la nota como favorita o no, y establecer una fecha de expiración que una vez cumplida se borrar la nota de la base de datos. En ese misma ventana se maneja un filtro de redux persistente para buscar por titulo, una o varias categorías, y seleccionar si se busca una nota que es favorita o no, lo que permite una cómoda navegación mientras se agregan y editan mas registros.

En la pagina principal se listan todas las notas fijadas ordenadas por la fecha de actualización de la misma, se permite visualizar su contenido en un modal con la posibilidad de ir directamente a la sección de edición de la nota seleccionada.

Se incluye un modal que permite visualizar en un gráfico con las 3 categorías mas utilizadas cuando se crean las notas.

A continuación se muestran unas imágenes del sistema en funcionamiento.

Para la correcta instalación del sistema se deben seguir los siguiente pasos.

En la carpeta del Backend que seria "sistema-api" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL, el SECRET_KEY que seria la clave para generar el JWT y el ENCRYPT_KEY que seria la clave para encriptación AES-128-ECB.

Una vez editado el archivo .env se deben ejecutar los siguiente comandos :

composer install

php artisan key:generate

php artisan migrate

php artisan db:seed --class=DatabaseSeeder

php artisan storage:link

Finalmente para iniciar el servidor se debe ejecutar este comando :

php artisan serve --port=7777

En la carpeta del Frontend que seria "sistema-frontend" se debe ejecutar el siguiente comando para instalar las dependencias :

npm install

En esa misma carpeta también se debe renombrar el archivo .env.example a solo .env y editar la configuración con la URL del Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run dev

Github

[Laravel + ReactJS] Generador de tutoriales

Este proyecto sirve para generar tutoriales de guitarra basado en vídeos para después crear un tutorial con imágenes ordenadas que se pueden ver en pantalla completa. Utiliza Laravel como Backend y desde el lado de Frontend, ReactJS con Vite, Material UI y Redux. La base de datos elegida para este proyecto es MySQL.

Las funciones incorporadas son : 

• Inicio de sesión obligatorio para usar el sistema protegido con JWT.
• Posibilidad de cambiar usuario y contraseña.
• Posibilidad de cambiar el theme del sistema completo con Redux, la paleta de colores para los themes red, blue y green fueron extraídos de la siguiente fuente. Ademas de la paleta de colores cada theme incluye un modo oscuro y claro.
• Se puede agregar, editar y borrar canciones con opción de elegir géneros, dificultades y afinaciones.
• Se pueden agregar, editar y borrar capturas, en las cuales se puede elegir el nombre y seleccionar una imagen local del sistema.
• En el listado de las canciones se pueden filtrar por nombre, género, dificultad y afinación usando Redux lo cual permite recordar la configuración de la búsqueda al cambiar de página. Ademas se puede generar el tutorial que contendrá todas las imágenes ordenadas en una galería que puede activar la opción de pantalla completa.
• En el listado de capturas esta habilitada una función para ordenar las capturas creadas, por defecto al crear una nueva se ordena automáticamente como la ultima, pero en esta ventana se pueden ordenar todas las capturas por orden.
• En el menú se puede cargar una ventana que contiene un gráfico que muestra los 3 géneros mas usados con su cantidad de canciones correspondientes.

A continuación se muestran unas imágenes del sistema en funcionamiento.

Para la correcta instalación del sistema se deben seguir los siguiente pasos. 

En la carpeta del Backend que seria "sistema-api" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL y el SECRET_KEY que seria la clave para generar el JWT.

Una vez editado el archivo .env se deben ejecutar los siguiente comandos : 

composer install

php artisan key:generate

php artisan migrate

php artisan db:seed --class=DatabaseSeeder

php artisan storage:link

Finalmente para iniciar el servidor se debe ejecutar este comando : 

php artisan serve --port=7777

En la carpeta del Frontend que seria "sistema-frontend" se debe ejecutar el siguiente comando para instalar las dependencias : 

npm install

En esa misma carpeta también se debe renombrar el archivo .env.example a solo .env y editar la configuración con la URL del Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando : 

npm run dev

Github