[Laravel + ReactJS] Agenda Fénix

Este proyecto es una agenda full-stack que usa Laravel para el backend y ReactJS con Vite, Material UI y Redux para el frontend, con MySQL como base de datos.

## Funcionalidades principales

- Autenticación: Inicio de sesión obligatorio con JWT, con opción de cambiar usuario y contraseña.

- Personalización: Permite cambiar el tema a modo claro u oscuro.

- Gestión de categorías: Se pueden agregar, editar y eliminar categorías.

- Gestión de notas: Las notas se pueden agregar, editar y eliminar. Su contenido, creado con el editor Tiptap, está protegido con AES-128-ECB. Las notas pueden tener imágenes, múltiples categorías y una fecha de expiración.

- Filtros: Ambas secciones, notas y categorías, cuentan con filtros persistentes para una mejor navegación.

- Visualización: La página principal lista las notas fijadas. Incluye un gráfico con las tres categorías más usadas.

## Capturas de pantalla

A continuación, se muestran algunas imágenes del sistema en funcionamiento:

## Instalación del proyecto

### Backend (Laravel)

Se necesitan seguir estos pasos para configurar la API de Laravel ubicada en la carpeta sistema-api.

1. Configuración inicial

Copia y configura el archivo de entorno: Renombra el archivo .env.example a .env y ábrelo para editarlo.

Ajusta las variables de entorno: Dentro del archivo .env, configura los siguientes parámetros con tu información:

Conexión a la base de datos: Introduce las credenciales de tu base de datos MySQL.

Claves de seguridad: Define el SECRET_KEY para la generación de tokens JWT y el ENCRYPT_KEY para la encriptación AES-128-ECB.

2. Ejecución de comandos

Abre la terminal en la carpeta sistema-api y ejecuta los siguientes comandos en orden:

Instala las dependencias:

composer install

Genera la clave de la aplicación:

php artisan key:generate

Ejecuta las migraciones de la base de datos:

php artisan migrate

Siembra los datos iniciales:

php artisan db:seed --class=DatabaseSeeder

Crea un enlace simbólico para el almacenamiento:

php artisan storage:link

3. Iniciar el servidor

Para iniciar el servidor del backend, ejecuta este comando:

php artisan serve --port=7777

### Frontend (React.js)

Se necesitan seguir estos pasos para configurar el frontend ubicado en la carpeta sistema-frontend.

1. Configuración inicial

Copia y configura el archivo de entorno: Renombra el archivo .env.example a .env.

Ajusta la URL de la API: Dentro del archivo .env, edita el parámetro para que apunte a la URL donde se está ejecutando tu backend. Por defecto, será la URL del servidor que acabas de iniciar.

2. Iniciar el servidor

Instala las dependencias: Abre la terminal en la carpeta sistema-frontend y ejecuta este comando:

npm install

Inicia el servidor de desarrollo:

npm run dev

### Iniciar los servidores

Se necesitan seguir estos pasos para arrancar tanto el servidor de la API de Laravel como el de la aplicación de React.

1. Iniciar el Backend (Laravel)

Abre una terminal, navega hasta la carpeta sistema-api y ejecuta el siguiente comando:

php artisan serve --port=7771

Este comando iniciará el servidor de desarrollo de Laravel en el puerto 7771.

2. Iniciar el Frontend

Abre una nueva terminal, navega hasta la carpeta sistema-frontend y ejecuta este comando:

npm run dev

Este comando arrancará la aplicación de React en modo de desarrollo, la cual se conectará al backend que acabas de iniciar.

### Pruebas unitarias

Este proyecto incluye pruebas unitarias tanto para el backend como para el frontend. Se necesitan seguir las siguientes instrucciones para ejecutarlas.

1. Pruebas del Backend (Laravel)

El entorno de pruebas del backend usa su propio archivo .env para evitar cualquier alteración de tu base de datos de desarrollo.

Configura el archivo .env.testing: En la raíz del proyecto, renombra el archivo .env.testing.example a .env.testing. Luego, abre el archivo y edita los campos de la base de datos (DB_DATABASE, DB_USERNAME, DB_PASSWORD) para que apunten a una base de datos de pruebas dedicada.

Ejecuta las pruebas: Abre la terminal en el directorio sistema-api y usa el siguiente comando. Laravel se encargará de migrar la base de datos de pruebas automáticamente.

php artisan test

2. Pruebas del Frontend

Para ejecutar las pruebas del frontend, solo necesitas un comando.

Ejecuta las pruebas: Abre la terminal en el directorio sistema-frontend y usa este comando:

npm run test

Este comando ejecutará todas las pruebas configuradas para el frontend.

### Uso con Docker

Para poner en marcha el backend de Laravel y el frontend de React con Docker, se necesitan seguir estos pasos:

1. Configuración inicial

Copia el archivo de entorno: En la raíz de tu proyecto, renombra el archivo .env.example a .env. Este archivo se usará para configurar las variables de entorno de tus contenedores.

Ajusta las variables de entorno: Abre el archivo .env y asegúrate de que los siguientes valores estén configurados correctamente:

Variables de MySQL: MYSQL_ROOT_PASSWORD, MYSQL_DATABASE, MYSQL_USER y MYSQL_PASSWORD.

Clave de encriptación: ENCRYPT_KEY.

URLs del Frontend: VITE_API_URL y VITE_IMAGES_URL.

2. Levantar los servicios

Desde la raíz del proyecto, ejecuta el siguiente comando para construir y levantar todos los servicios en segundo plano:

docker compose up -d --build

3. Acceder a las aplicaciones

Una vez que los contenedores estén activos, se pueden acceder a los servicios en las siguientes URLs:

Backend (Laravel): http://localhost:7771
Frontend (React): http://localhost:9991
phpMyAdmin: http://localhost:8080

 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

Gestor de libros en NodeJS

Este proyecto se encarga de organizar libros mediante tipo y género, se pueden editar y borrar los mismos, además también ofrece estadísticas con gráficos sobre cuanto libros tenemos por tipo y categoría. Usa NodeJS como Backend y ReactJS 18 como Frontend, como base de datos usa MySQL.

Unas imágenes : 

Github

Catálogo de productos en PHP

Es un programa que funciona como catálogo de productos en PHP, esta hecho en Symfony 6 como Rest API con MySQL y ReactJS 18 como frontend.

Se puede cargar productos con fotos y categorías con iconos, también tiene una sección donde se muestran los productos y categorías a los visitantes y una sección de administración para gestionar los productos y categorías.

Unas imágenes : 

Github

Fenix Music 0.5 en ReactJS

 Un programa hecho en Laravel 10 con ReactJS, también se utiliza Material UI en el frontend. 

Para instalar los modulos necesarios, se tiene que usar el comando "composer install" en el backend y "npm install --legacy-peer-deps" en el frontend, despues para ejecutar el frontend se tiene que usar el comando "npm run dev".

Una vez instalado los módulos se tiene que crear un nuevo usuario con postman desde el backend de la siguiente manera : 

Después para generar las canciones, se tiene que ir a la sección de configuración y usar la función de escanear canciones, en esa función se tiene que especificar la carpeta 

en el que esta la música y habilitar la misma carpeta con apache y hosts para que funcione como un servidor que permite reproducir música online.

Unas imágenes del proyecto : 

Github