Proyecto: Artify - Editor de Imágenes Web Entorno principal: Local / desarrollo Backend: Node.js + Express Frontend: HTML, CSS y JavaScript Vanilla Base de datos: MySQL Fecha: Mayo 2026
Este documento describe los pasos técnicos necesarios para preparar, ejecutar y verificar Artify en un entorno local. Hace parte del manual técnico y complementa el README.md, evitando repetir la descripción general del proyecto.
Antes de ejecutar el proyecto se requiere tener instalado:
| Herramienta | Versión recomendada | Uso |
|---|---|---|
| Node.js | 22.13 o superior | Ejecutar el backend. |
| pnpm | 11.1.1 | Instalar dependencias y ejecutar scripts del backend. |
| MySQL | 8.0 o superior | Base de datos relacional. |
| Git | Versión estable | Clonar y versionar el proyecto. |
| Navegador moderno | Chrome, Edge, Firefox, Safari u Opera | Usar el frontend. |
git clone https://github.com/Tecno85/artify-sena.git
cd artify-sena
Las dependencias se instalan dentro de la carpeta backend/.
cd backend
pnpm install
El proyecto usa pnpm como gestor oficial. No se debe mezclar con npm install ni generar package-lock.json.
El backend necesita un archivo .env dentro de backend/. Se puede crear a partir de .env.example.
cp ../.env.example .env
Variables principales:
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=tu_contrasena_mysql
DB_NAME=artify_db
ADMIN_USER=admin@artify.com
ADMIN_PASSWORD=tu_contrasena_admin
TOKEN_SECRET=un_secreto_largo_y_aleatorio
PORT=3000
NODE_ENV=development
backend/.env no debe subirse al repositorio.TOKEN_SECRET debe ser largo y difícil de adivinar.ADMIN_PASSWORD debe cambiarse por una contraseña segura en cada entorno.El script principal de base de datos se encuentra en:
database/artify_db.sql
Desde la raíz del proyecto se puede importar con:
mysql -u root -p < database/artify_db.sql
También se puede ejecutar el script desde MySQL Workbench u otra herramienta compatible.
Al finalizar, debe existir la base de datos:
artify_db
Desde la carpeta backend/:
pnpm start
Salida esperada:
Conectado a MySQL correctamente
Servidor corriendo en http://localhost:3000
Para desarrollo con recarga automática:
pnpm run dev
El frontend es estático. Para probar rutas y navegación de forma más estable se recomienda servir la carpeta frontend/ por HTTP.
Desde la raíz del proyecto:
npx http-server frontend -p 8080
Luego abrir:
http://127.0.0.1:8080
También es posible abrir frontend/index.html directamente, pero para pruebas completas se recomienda usar servidor local.
cd backend
pnpm run check
cd backend
pnpm test
La suite actual valida autenticación, rutas protegidas, tokens, configuración básica y limpieza de usuarios temporales.
http://127.0.0.1:8080.| Servicio | Puerto | Descripción |
|---|---|---|
| Backend Express | 3000 |
API principal del sistema. |
| Frontend local | 8080 |
Servidor estático recomendado para pruebas. |
| MySQL | 3306 |
Puerto habitual de MySQL. |
| Backend de pruebas | 3100 |
Puerto usado por la suite automatizada cuando aplica. |
El proyecto incluye un script de apoyo:
scripts/setup.sh
Este script instala dependencias del backend y crea backend/.env desde .env.example si todavía no existe.
Ejecución:
./scripts/setup.sh
Después de ejecutarlo, se debe revisar manualmente backend/.env y cargar la base de datos.
| Problema | Posible causa | Solución |
|---|---|---|
Error al conectar a MySQL |
Credenciales incorrectas o MySQL detenido. | Revisar backend/.env e iniciar MySQL. |
Unknown command: pnpm |
pnpm no está instalado o no está en el PATH. | Instalar pnpm y abrir una nueva terminal. |
| API no responde | Backend no iniciado o puerto incorrecto. | Ejecutar pnpm start en backend/. |
| Login falla aunque el usuario existe | Contraseña incorrecta o hash inválido. | Verificar registro y datos en USUARIO. |
| Frontend no consume API | Backend apagado o URL incorrecta. | Confirmar que API esté en http://localhost:3000. |
.env.example actualizado cuando cambien variables requeridas.backend/package.json como referencia de scripts oficiales.pnpm-lock.yaml para reproducibilidad de dependencias.