[.Net Core + Next.Js] Examenes NET

Este proyecto es una aplicación web desarrollada con .NET Core 8 como backend y Next.js como frontend, diseñada para gestionar cursos, exámenes y usuarios de manera eficiente y dinámica.

## Funcionalidades principales

### Gestión de Usuarios

- Alumnos y Profesores: CRUD completo (Crear, Leer, Actualizar, Eliminar) con filtros por nombre utilizando Redux.

- El administrador pueden modificar sus propios datos: nombre, contraseña e imagen de perfil.

### Gestión de Cursos

- CRUD completo para cursos con asignación de profesor al momento de la creación.

- Se pueden inscribir alumnos a múltiples cursos.

- Gestión de documentos relacionados a los cursos, almacenados en el backend.

### Gestión de Exámenes

- Creación de exámenes personalizados por curso.

- Permite asignar preguntas y respuestas, y utilizar un simulador de examen para visualizar cómo lo vería el estudiante.

### Funcionalidades avanzadas

- Búsqueda y filtrado: Todos los CRUD permiten filtrar por nombre usando Redux.

- Paginación: Todos los listados están paginados para un mejor manejo de la información.

- Estadísticas: Se incluyen dos gráficos principales: Top 5 Cursos por alumnos inscritos y Top 5 Profesores por cursos impartidos.

## Capturas de pantalla

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

 

 

 

 

 

 

 

## Instalación del proyecto

### Backend (.NET Core)

Sigue estos pasos para configurar la API de .NET Core ubicada en la carpeta SistemaAPI.

1 - Configuración inicial

* Copia y configura el archivo de entorno:

* Renombra el archivo appsettings.json.example a appsettings.json y ábrelo para editarlo.

* Ajusta los valores necesarios dentro del archivo. Los campos principales que debes revisar son los siguientes:

"ConnectionStrings": {
  "SqlServer": "",
  "MySQL": "Server=localhost;Database=db;User Id=root;Password=root;"
},
"Jwt": {
  "Key": "",
  "Issuer": "",
  "Audience": ""
}

 
Conexiones a base de datos:

* El proyecto permite utilizar SQL Server o MySQL.
* Configura una de las dos cadenas de conexión según la base de datos que vayas a usar.

Por ejemplo:

* Para MySQL:

"MySQL": "Server=localhost;Database=db;User Id=root;Password=root;"

* Para SQL Server:

"SqlServer": "Server=localhost;Database=db;User Id=sa;Password=TuPassword;"
 

Configuración de JWT:

* Estos valores se utilizan para la autenticación basada en tokens.

* Debes completar los campos Key, Issuer y Audience.

Para generar una clave segura (Key) en .NET, puedes ejecutar el siguiente comando en tu terminal de PowerShell o Bash:

openssl rand -base64 32

Copia el valor generado y pégalo en el campo "Key" dentro del archivo appsettings.json.
 

2 - Ejecución de comandos

Abre la terminal en la carpeta SistemaAPI y ejecuta los siguientes comandos en orden:

dotnet tool install --global dotnet-ef --version 8.*
dotnet ef migrations add MigracionInicial
dotnet ef database update

Estos comandos instalan la herramienta de Entity Framework, crean la primera migración y actualizan la base de datos con el esquema inicial.

### Frontend (Next.js)

Sigue estos pasos para configurar el frontend de Next.js ubicado en la carpeta SistemaFrontend:

- Renombra el archivo .env.example a .env en el directorio raíz del proyecto frontend.

- Edita el archivo .env y configura las siguientes variables de entorno según tu configuración:

NEXT_PUBLIC_BACKEND_URL=http://localhost:7777 # URL de tu backend de Net Core
NEXTAUTH_SECRET=supersecreto123 # Una cadena secreta larga y aleatoria para NextAuth
NEXT_PUBLIC_TIMEOUT_TOAST=4000
NEXT_PUBLIC_TIMEOUT_REDIRECT=5000

- Cambia NEXTAUTH_SECRET por una cadena de caracteres larga, compleja y aleatoria para la seguridad de la autenticación.

Instalación de dependencias:

- Abre tu terminal en el directorio raíz del proyecto frontend.

- Ejecuta el siguiente comando para instalar todas las dependencias de Node.js:

npm install

---

### Iniciar la aplicación

Para poner en marcha la aplicación completa, asegúrate de que tanto el backend de .NET Core como el frontend de Next.js estén configurados correctamente siguiendo las instrucciones de instalación respectivas.

1. Iniciar el backend (.NET Core):

- Abre una nueva terminal.

- Navega hasta el directorio raíz de tu proyecto .NET Core.

- Ejecuta el siguiente comando para iniciar el servidor de desarrollo de .NET Core:

dotnet run

2. Iniciar el frontend (Next.js):

- Abre otra nueva terminal (manteniendo la del backend abierta).

- Navega hasta el directorio raíz de tu proyecto Next.js.

Ejecuta el siguiente comando para iniciar el servidor de desarrollo de Next.js:

npm run dev

Una vez que ambos servidores estén en funcionamiento, la aplicación completa estará accesible a través de la URL del frontend (http://localhost:3000).

 

Github

 

[NodeJS + VueJS] Registro de series 1.0

En este proyecto se hizo un sistema para registrar series y todos los datos necesarios para poder organizarlas, esta hecho en NodeJS con Sequelize y VueJS con Vuetify. Permite usar como base de datos MySQL y PostgreSQL.

Las funciones incorporadas son :

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

Rutas protegidas para poder acceder al dashboard.

Posibilidad de cambiar usuario y contraseña.

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

Se pueden agregar, editar y borrar géneros. En esta misma sección se usa Pinia para poder filtrar por nombre en el buscador y poder recordar el filtro al cambiar de página.

Se pueden agregar, editar y borrar series. En esta misma sección se usa Pinia para poder filtrar por nombre, géneros y estados.

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.

Desde la carpeta "backend", se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión a la base de datos. En el caso de la variable "DB_CONNECTION" se puede elegir entre "mysql" y "postgres" dependiendo de que motor se desee usar.

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

npm install

sequelize db:migrate

sequelize db:seed:all

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

Desde la carpeta "frontend", se debe renombrar el archivo .env.example a solo .env y editar las variables con el nombre de "VITE_API_URL" y "VITE_API_URL_IMAGES" por la URL correspondiente a su backend.

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

npm install

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run dev

 Github

 

[Django + Angular] Fast Music 1.0

En este proyecto se hizo un completo reproductor de música, las tecnologías que usa son Django como Backend y Angular como Frontend, la base de datos que usa 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 completo del sistema a un modo oscuro o claro.

Se puede sincronizar una carpeta de Google Drive con la carpeta local del sistema donde se guardara toda la música, también se puede hacer el efecto contrario, que seria sincronizar la carpeta local del sistema con la carpeta de Google Drive.

Incorpora un escaneo de carpeta local donde se deben registrar todas las canciones guardadas cada una en su playlist o carpeta correspondiente.

En el reproductor de música se puede filtrar por playlists que serán guardadas en Redux, lo mismo seria para filtrar por nombre de canción. Ademas se pueden fijar canciones como favoritas lo que hará que se cree una playlist aparte al principio de la lista para poder localizar de una forma mas eficiente.

También incorpora un reproductor de estaciones o streams, en esa sección se pueden registrar, editar y borrar estaciones, para mayor comodidad incorpora un buscador por nombre que usa Redux. Ademas contiene las funciones de importar las estaciones en formato json, exportar las estaciones para descargar en formato json y la función de validar todas las estaciones para verificar su correcto funcionamiento y borrarlas en caso de no estén funcionando.

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 "sistemaApi" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL. También se debe editar el SECRET_KEY con tu propia clave, se puede generar una con el siguiente comando :

python3 -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'

Después se tienen que crear las credenciales para el servicio "Google Drive API" en la URL https://console.cloud.google.com, una vez creado todo se descargan las credenciales y se guardan en el mismo directorio del archivo manage.py con el nombre de client_secrets.json.

Una vez terminado todo se deben seguir estos pasos :

Para instalar las dependencias de Django :

pip install django djangorestframework djangorestframework_simplejwt

sudo apt install pkg-config

sudo apt-get install gcc libmysqlclient-dev python3-dev

pip install mysqlclient

pip install django-cors-headers

pip install python-dotenv

Para instalar el modulo necesario para sincronizar con Google Drive :

pip install PyDrive

Para realizar las migraciones de Django :

python3 manage.py makemigrations

python3 manage.py migrate

Para crear el usuario por defecto :

python3 manage.py createsuperuser

Finalmente para iniciar el servidor se debe ejecutar este comando :

python3 manage.py runserver 7777

En la carpeta del Frontend que sería "sistemaFrontend" 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 "filesUrl" por la ruta de su servidor Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

Github

[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