[NextJS] Fenix Forge

Fenix Forge es una aplicación web de uso local diseñada para unir archivos MP3 y generar videos MP4 personalizados. Está desarrollada con Next.js 16 y Tailwind CSS, y realiza todo el procesamiento multimedia utilizando FFmpeg nativo de forma directa en tu computadora.

## Funcionalidades principales

* Combinador de audio: Permite seleccionar múltiples MP3, reordenarlos mediante drag & drop, preescuchar cualquier track antes de procesar, seguir la lectura con barras de progreso individuales y visualizar la línea de tiempo con tiempos acumulados. Incluye detección automática de compatibilidad para concatenar audio en segundos sin reencodear (con fallback seguro si los formatos difieren).
* Generador de video: Permite asignar una imagen de fondo por canción o utilizar una global para todo el proyecto. Incluye texto centrado personalizable (con color de fuente y borde configurables, o bien la opción de exportar sin texto) y vista previa en vivo antes del render.
* Tema Gruvbox: Soporte nativo para modo claro y oscuro.
* Notificaciones: Feedback sonoro y toast emergente al completar el renderizado, junto con el tiempo total de conversión en formato legible.
* Diseño responsive: Adaptable a móviles, tablets y escritorio, con un panel de vista previa fijo en pantallas grandes.

## Capturas de pantalla

 

 

## Desarrollo local

### 1. Requisitos previos

* Node.js 18 o superior.
* FFmpeg instalado y disponible en el PATH del sistema (ffmpeg -version).
* Una fuente TrueType (.ttf) disponible para superponer texto en los videos (ej. fonts-dejavu-core).

En sistemas Debian/Ubuntu podés instalar las dependencias con:

sudo apt install ffmpeg fonts-dejavu-core

### 2. Instalación

Cloná el repositorio e instalá las dependencias:

git clone https://github.com/IsmaelHeredia/fenix-forge-nextjs.git
cd fenix-forge-nextjs
npm install

### 3. Configuración

Creá el archivo de variables de entorno:

cp .env.example .env.local

Si ffmpeg no está en el PATH global o tu fuente se encuentra en una ruta personalizada, definí las variables en .env.local:

FFMPEG_PATH=/usr/bin/ffmpeg
FFMPEG_FONT_PATH=/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf

### 4. Ejecución

Iniciá el servidor de desarrollo:

npm run dev

Accedé a la aplicación en http://localhost:3000.

 

 Link del proyecto 

[NextJS] Fenix Music

Fenix Music es una aplicación web full-stack pensada para gestionar tu biblioteca multimedia local. Está construida con Next.js 14 y estructurada bajo una arquitectura Domain-Driven Design (DDD), lo que permite mantener el código ordenado y escalable a medida que el proyecto crece.

Funcionalidades principales

Reproductor multimedia avanzado: Barra de control persistente para audio. Incluye visualización de ondas (waveform) para canciones, soporte para reproducción de videos locales, estaciones de radio, videos de YouTube y transmisiones de YouTube en vivo.

Listas personalizadas: Creación, edición y gestión completa de tus propias listas de reproducción.

Escaner inteligente: Sistema integrado para indexar automáticamente tu biblioteca local de música y videos, manteniendo todo organizado.

Biblioteca centralizada: Acceso rápido a todo tu contenido, con búsqueda ágil por artista o título.

Estructura del proyecto

Para mantener todo bajo control, se dividió la lógica en módulos dentro de `src/modules/`. Es una estructura clara donde cada pieza tiene su lugar:

src/modules/[modulo]/
├── application/     # Casos de uso (la lógica de la app)
├── domain/          # Entidades y reglas de negocio
└── infrastructure/  # Implementación técnica (Drizzle + SQLite)
 

Capturas de pantalla

 

Desarrollo local
 

1. Requisitos

* Node.js 18+
 

2. Instalación

Clona el repositorio, instala las dependencias y prepara las variables de entorno:

git clone https://github.com/IsmaelHeredia/fenix-music-nextjs.git
cd fenix-music-nextjs
npm install
cp .env.example .env.local

 
3. Configuración de la base de datos

Prepara la base de datos SQLite y ejecuta las migraciones necesarias:

npm run db:setup

 
4. Ejecución

Ejecuta la aplicación en modo desarrollo:

npm run dev

El proyecto va a estar disponible en http://localhost:3000.

 

 Link del proyecto 

[NextJS] Light Board

Light Board es una plataforma de gestión visual basada en metodologías Kanban, diseñada para organizar flujos de trabajo mediante una estructura jerárquica de espacios de trabajo, tableros y tarjetas interactivas.

## Funcionalidades principales

### Gestión de workspaces

- Espacios independientes: Creación, edición y eliminación de áreas de trabajo personalizadas.

- Personalización visual: Asignación de wallpapers únicos por workspace mediante una galería integrada.

- Organización dinámica: Reordenamiento global de workspaces mediante Drag & Drop.

### Tablero kanban dinámico

- Flujos de trabajo: Gestión de columnas con soporte para edición de títulos y eliminación en cascada de contenidos.

- Tarjetas: Control total sobre tareas (creación, edición de descripción y gestión de estados).

- Etiquetas: Sistema integrado directamente en la tarjeta que permite asignar etiquetas únicas por workspace, garantizando una organización coherente y aislada.

- Interactividad avanzada: Sistema de arrastre suave para reordenar columnas y desplazar tarjetas entre ellas de forma intuitiva.

## Capturas de pantalla

A continuación, se muestran algunas imágenes de la aplicación en funcionamiento: 

### Instalación del proyecto
 
1. Clonar el repositorio

git clone https://github.com/IsmaelHeredia/nextjs-light-board.git
cd nextjs-light-board

2. Instalación de dependencias
 
npm install

3. Variables de entorno

Crea un archivo .env en la raíz del proyecto:

NODE_ENV=development
 
4. Inicializar la base de datos

Para crear la bd:
 
npm run generate
npm run migrate

5. Para ejecutar los seeds de prueba:

npm run seed

6. Ejecución del proyecto en modo desarrollo
 
npm run dev

7. Build de producción
 
npm run build
npm start

### Pruebas de integración

El proyecto incluye tests de integración reales sobre las rutas API.

Para ejecutar los tests:
 
npm test

### Uso con Docker

Para poner en marcha el servicio de NextJS usando Docker, se debe ejecutar el siguiente comando:
 
docker compose up -d --build

Una vez que el servicio esté activo, se podra acceder desde las siguiente URL:
 
http://localhost:3000

 Link del proyecto 

[NextJS] Light Notes

Light Notes es una aplicación web minimalista para la gestión de workspaces y notas, construida con Next.js, persistencia local con SQLite, Drizzle ORM, y pruebas de integración usando Vitest.

El proyecto está pensado para ser simple, rápido, sin depender de servicios externos.

Funcionalidades principales

Gestión de Workspaces

- Crear workspaces

- Listar todos los workspaces

- Actualizar el nombre de un workspace

- Eliminar workspaces
 

Gestión de Notas

- Crear notas asociadas a un workspace

- Listar notas por workspace

- Actualizar el contenido de una nota

- Eliminar notas
 

Buscador

El buscador permite filtrar las notas dentro del workspace activo, combinando distintos criterios de texto y fecha.

Los filtros disponibles son:

Búsqueda por texto

- Filtra las notas cuyo contenido incluya el texto ingresado.
 

Filtros rápidos por fecha

- Hoy: muestra notas creadas en el día actual.

- Ayer: muestra notas creadas el día anterior.

- Esta semana: muestra notas desde el inicio de la semana hasta hoy.

- Este mes: muestra notas del mes y año actuales.

- Los filtros rápidos son excluyentes entre sí.
 

Filtro por año

- Permite mostrar solo notas creadas en un año específico.

- Puede combinarse con otros filtros.
 

Rango de fechas personalizado

- Desde: fecha mínima de creación de la nota.

- Hasta: fecha máxima de creación de la nota.
 

Combinación de filtros

- Los filtros pueden combinarse (por ejemplo: texto + mes, o texto + rango de fechas).

Capturas de pantalla

A continuación, se muestran algunas imágenes de la aplicación en funcionamiento:

Instalación del proyecto

1. Clonar el repositorio

git clone https://github.com/IsmaelHeredia/nextjs-light-notes.git
cd light-notes

 
2. Instalación de dependencias

npm install
 

3. Variables de entorno

Crea un archivo .env en la raíz del proyecto:

NODE_ENV=development

 
4. Inicializar la base de datos

Para crear la bd:

npm run generate
npm run migrate

 
5. Para ejecutar los seeds de prueba:

npm run seed

 
6. Ejecución del proyecto en modo desarrollo

npm run dev

 
7. Build de producción

npm run build
npm start
 

Pruebas de integración

El proyecto incluye tests de integración reales sobre las rutas API.

Para ejecutar los tests:

npm test

Uso con Docker

Para poner en marcha el servicio de NextJS usando Docker, se debe ejecutar el siguiente comando:

docker compose up -d --build

Una vez que el servicio esté activo, se podra acceder desde las siguiente URL:

http://localhost:3000

[.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

 

[Laravel + NextJS] Epic Tasks

Este proyecto es un sistema avanzado de gestión de tareas, construido con Symfony para el backend, Next.js (integrado con Material UI) para el frontend, y una base de datos MySQL.
 

## Funcionalidades principales

- Autenticación segura: Autenticación obligatoria basada en JWT con opciones para actualizar el perfil del usuario (nombre de usuario, contraseña y foto de perfil).

- Tema dinámico: Cambia sin problemas entre el modo claro y oscuro.

- Gestión integral de categorías: Operaciones CRUD completas (Crear, Leer, Actualizar, Eliminar) para categorías.

- Gestión avanzada de tareas:

    - Operaciones CRUD completas para tareas.

    - Las tareas se pueden organizar por prioridad, estado y categoría.

    - Subtareas: Cada tarea puede incluir subtareas con sus propios campos y una función de búsqueda por nombre.

    - Reordenamiento: Reordena fácilmente las tareas para priorizarlas.

    - Búsqueda y paginación: Busca tareas de manera eficiente por nombre y categoría desde la página principal, respaldado por un sólido sistema de paginación. Redux se utiliza para mantener los filtros de búsqueda mientras navegas por la aplicación.

- Estadísticas Visuales: Visualiza la distribución de tareas por categoría a través de gráficos interactivos.

## Capturas de pantalla

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

 ## Instalación del proyecto

### Backend (Symfony)

Sigue estos pasos para configurar el backend de Symfony:

1. Configuración del entorno:

- Renombra el archivo .env.example a .env.

- Configura los parámetros de conexión a tu base de datos MySQL dentro del archivo .env.

2. Instalación de dependencias:

- Ejecuta el siguiente comando para instalar todas las dependencias del proyecto:

composer install

3. Generación de APP_SECRET:

- Genera una clave secreta y actualiza la variable APP_SECRET en tu archivo .env. Esta clave es crucial para la seguridad de tu aplicación.

php -r "echo bin2hex(random_bytes(32));"

- Copia el valor generado y pégalo en la línea APP_SECRET= de tu archivo .env.

4. Configuración de la base de datos:

- Crea las migraciones de la base de datos :

php bin/console make:migration

- Ejecuta las migraciones para crear las tablas en tu base de datos :

php bin/console doctrine:migrations:migrate

- Carga los datos iniciales (fixtures) en la base de datos :

php bin/console doctrine:fixtures:load --append

5. Generación de claves JWT:

Las claves JWT son esenciales para la autenticación segura en la aplicación.

- Primero crea el directorio para las claves:

mkdir -p config/jwt

- Generar la clave privada

Después, crea tu clave privada (private.pem). Se te pedirá que definas una passphrase segura, la cual usarás más adelante para descifrar esta clave.

openssl genrsa -out config/jwt/private.pem -aes256 4096

- Generar la clave pública

A continuación, genera la clave pública (public.pem) a partir de la clave privada que acabas de crear:

openssl rsa -pubout -in config/jwt/private.pem -out config/jwt/public.pem

- Configurar variables de entorno

Asegúrate de que tu archivo de configuración de entorno .env, contenga la siguiente variable:

JWT_PASSPHRASE="tu_passphrase_segura" 

Importante: La JWT_PASSPHRASE en tu archivo .env debe ser exactamente la misma contraseña que definiste al generar tu clave privada.

- Finalmente los permisos de los archivos: Esto es crucial para la seguridad.

chmod 600 config/jwt/private.pem
chmod 644 config/jwt/public.pem

---

### Frontend (Next.js)

Sigue estos pasos para configurar el frontend de Next.js:

- 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:8000 # URL de tu backend Symfony
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 Symfony como el frontend de Next.js estén configurados correctamente siguiendo las instrucciones de instalación respectivas.

1. Iniciar el backend (Symfony):

- Abre una nueva terminal.

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

- Ejecuta el siguiente comando para iniciar el servidor de desarrollo de Symfony:

symfony serve

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).

---

## Pruebas unitarias

Para ejecutar las pruebas unitarias del backend de Symfony, sigue estos pasos:

- Configuración del entorno de pruebas:

1. Renombra el archivo .env.test.example a .env.test en el directorio raíz de tu proyecto Symfony.

2. Edita el archivo .env.test y configura la variable DATABASE_URL para que apunte a una base de datos de pruebas. Es crucial que esta configuración utilice la misma conexión que tu base de datos de desarrollo, ya que PHPUnit, al ser parte del ecosistema Symfony, generará automáticamente una base de datos con el sufijo _test (por ejemplo, si tu base de datos de desarrollo se llama mi_app_db, la de pruebas será mi_app_db_test). Esto asegura que no haya pérdida de datos en tu base de datos de desarrollo.

- Preparación de la base de datos de pruebas:

1. Crea la base de datos de pruebas especificada en DATABASE_URL de tu archivo .env.test:

php bin/console doctrine:database:create --env=test

2. Ejecuta las migraciones en el entorno de pruebas para asegurar que el esquema de la base de datos esté actualizado para las pruebas:

php bin/console doctrine:migrations:migrate --env=test --no-interaction

- Ejecutar las pruebas:

Una vez que la base de datos de pruebas esté configurada, puedes ejecutar todas las pruebas unitarias del proyecto con el siguiente comando:

php bin/phpunit --testdox

### Uso con Docker

Para poner en marcha los servicios de Symfony y Next.js usando Docker, se deben seguir los siguientes pasos:

- Configuración del entorno:

1. Renombra el archivo .env.example ubicado en la raíz del proyecto a .env.

2. Generación de clave secreta: Abre el archivo .env y genera una nueva clave para la variable APP_SECRET. Se debe usar el siguiente comando para generar una clave segura:

php -r "echo bin2hex(random_bytes(32));"

Pega la clave generada como valor de APP_SECRET en tu archivo .env.

3. Iniciar servicios: Ejecuta el siguiente comando en tu terminal desde la raíz del proyecto para construir y levantar todos los servicios configurados:

docker compose up -d --build

Una vez que los servicios estén activos, se podrán acceder desde las siguientes URLs:

Backend Symfony: http://localhost:9090

phpMyAdmin: http://localhost:8080

Frontend Next.js: http://localhost:3000

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

Fenix Music 1.0

Es un proyecto hecho en NextJS, TailwindCSS y MySQL, permite reproducir canciones MP3, videos MP4, estaciones de radio y reproducir streams en vivo de YouTube.

En el caso de las canciones se pueden importar a la base de datos indicando el directorio local donde se encuentran, en las estaciones de radio se pueden registrar, editar y borrar

de forma manual en un cómodo CRUD, también se pueden importar y exportar mediante un archivo JSON, en el caso de las streams de YouTube tambien incorpora un CRUD para manejar los registros.

El sistema usa un usuario y contraseña para proteger la aplicación, las rutas están protegidas mediante la validación de un JWT que se guarda en la sesión del usuario, también en el apartado del perfil se pueden cambiar los datos por defecto que son "supervisor" para el usuario y la contraseña.

Unas imágenes : 

Github