artify-sena

Logo del Proyecto Artify — Editor de Imágenes Web

![Version](https://img.shields.io/badge/versión-2.0.0-4ae3f4?style=for-the-badge) ![Status](https://img.shields.io/badge/estado-activo-28ffce?style=for-the-badge) ![License](https://img.shields.io/badge/licencia-MIT-blue?style=for-the-badge) ![Node](https://img.shields.io/badge/Node.js-22.13+-339933?style=for-the-badge&logo=node.js) ![MySQL](https://img.shields.io/badge/MySQL-8.0+-4479A1?style=for-the-badge&logo=mysql) **Artify** es un editor de imágenes web full stack desarrollado con HTML, CSS, JavaScript vanilla en el frontend y Node.js + Express + MySQL en el backend. Permite a los usuarios editar imágenes de manera intuitiva directamente desde el navegador, con autenticación real, gestión de sesiones y panel de administración. [🌐 Ver Demo](#-prueba-en-línea) · [🐛 Reportar Bug](https://github.com/Tecno85/artify-sena/issues) · [💡 Sugerir Feature](https://github.com/Tecno85/artify-sena/issues)

📋 Tabla de Contenidos

✨ Características

Frontend

Backend y Autenticación

Panel de Administración

🛠️ Tecnologías

Frontend

| Tecnología | Uso | |————|—–| | HTML5 | Estructura semántica | | CSS3 | Diseño con variables CSS, Grid y Flexbox | | JavaScript Vanilla | Lógica del editor con Canvas API | | Canvas API | Manipulación de imágenes | | SessionStorage | Gestión de sesión de usuario |

Backend

| Tecnología | Versión | Uso | |————|———|—–| | Node.js | 22.13+ | Entorno de ejecución | | Express | 4+ | Framework del servidor | | MySQL | 8.0+ | Base de datos relacional | | mysql2 | Latest | Conector MySQL para Node.js | | bcryptjs | Latest | Encriptación de contraseñas | | dotenv | Latest | Variables de entorno | | cors | Latest | Control de acceso entre orígenes | | pnpm | 11.1.1 | Gestor de paquetes del backend |

🏗️ Arquitectura

┌─────────────────────────────────────────────────┐
│                   FRONTEND                       │
│  HTML + CSS + JavaScript (Canvas API)           │
│  Páginas: index, login, registro, editor, admin │
└────────────────────┬────────────────────────────┘
                     │ HTTP / REST API
┌────────────────────▼────────────────────────────┐
│                   BACKEND                        │
│      Node.js + Express modularizado             │
│  server.js monta middlewares, rutas y limpieza  │
│  Módulos: config, controllers, routes, utils    │
└────────────────────┬────────────────────────────┘
                     │ mysql2
┌────────────────────▼────────────────────────────┐
│                 BASE DE DATOS                    │
│                MySQL — artify_db                │
│  Tablas: USUARIO, SESION_EDICION, OPERACION,    │
│  CONFIGURACION, IMAGEN                          │
└─────────────────────────────────────────────────┘

📁 Estructura del Proyecto

Artify/
├── README.md                   # Documentación del proyecto
├── CONTEXT.md                  # Contexto técnico y estado actual
├── LICENSE                     # Licencia del proyecto
├── .env.example                # Plantilla de variables de entorno
├── .gitignore                  # Archivos ignorados por Git
│
├── frontend/                   # Aplicación frontend organizada
│   ├── index.html              # Página principal
│   ├── pages/                  # Páginas HTML
│   │   ├── editor.html         # Editor de imágenes
│   │   ├── login.html          # Inicio de sesión
│   │   ├── registro.html       # Registro de usuario
│   │   └── admin.html          # Panel de administración
│   │
│   └── assets/                 # Recursos del proyecto
│       ├── css/                # Hojas de estilo
│       │   ├── admin.css
│       │   ├── editor.css
│       │   ├── index.css
│       │   ├── login.css
│       │   └── registro.css
│       │
│       ├── js/                 # Scripts JavaScript
│       │   ├── admin.js        # Lógica del panel de administración
│       │   ├── editor.js       # Lógica del editor
│       │   ├── login.js        # Lógica del login
│       │   └── registro.js     # Lógica del registro
│       │
│       ├── fonts/              # Fuentes tipográficas
│       │   ├── Inconsolata/
│       │   └── Paytone_One/
│       │
│       ├── icons/              # Iconos SVG
│       └── images/             # Imágenes del proyecto
│
├── backend/                    # Servidor Node.js modular
│   ├── config/                 # Conexión y configuración base
│   ├── controllers/            # Lógica de negocio por módulo
│   ├── middlewares/            # Autenticación y autorización
│   ├── routes/                 # Endpoints por dominio
│   ├── tests/                  # Pruebas automatizadas
│   ├── utils/                  # Helpers compartidos
│   ├── server.js               # Punto de arranque y montaje
│   ├── .env                    # Variables de entorno (no se sube a GitHub)
│   ├── package.json            # Scripts y dependencias del backend
│   └── pnpm-lock.yaml          # Lockfile de pnpm
│
├── database/                   # Base de datos del proyecto
│   └── artify_db.sql           # Script SQL completo
│
├── scripts/                    # Automatización
│   └── setup.sh                # Configuración inicial
│
└── docs/                       # Documentación del proyecto
    ├── README.md
    ├── proyecto/
    │   ├── descripcion-proyecto.md
    │   └── requerimientos-funcionales.md
    ├── tecnica/
    │   ├── arquitectura.md
    │   ├── api-analytics.md
    │   ├── base-datos.md
    │   ├── coding-standards.md
    │   ├── despliegue.md
    │   └── plan-pruebas-autenticacion.md
    └── SKILL_ARTIFY.md         # Buenas prácticas del proyecto

✅ Requisitos Previos

Antes de instalar el proyecto asegúrate de tener:

🚀 Instalación y Configuración

1. Clonar el repositorio

git clone https://github.com/Tecno85/artify-sena.git
cd artify-sena

2. Instalar dependencias del backend

cd backend
pnpm install

3. Configurar variables de entorno

Crea un archivo .env dentro de la carpeta backend/ con este contenido:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=tu_contraseña_mysql
DB_NAME=artify_db
ADMIN_USER=admin@artify.com
ADMIN_PASSWORD=tu_contraseña_admin
TOKEN_SECRET=un_secreto_largo_y_aleatorio
PORT=3000
NODE_ENV=development

4. Crear la base de datos en MySQL

CREATE DATABASE artify_db;
USE artify_db;

Luego ejecuta el script SQL del proyecto para crear todas las tablas.

5. Iniciar el backend

cd backend
pnpm start

Debes ver:

✅ Conectado a MySQL correctamente
🚀 Servidor corriendo en http://localhost:3000

6. Iniciar el frontend

En una terminal separada desde la raíz del proyecto:

npx http-server frontend -p 8080

7. Abrir en el navegador

http://127.0.0.1:8080

Si prefieres abrir archivos manualmente, usa frontend/index.html, pero para probar rutas y navegación es mejor servir la carpeta frontend/ por HTTP.

🎯 Uso

Usuario normal

  1. Abre http://127.0.0.1:8080
  2. Regístrate en frontend/pages/registro.html
  3. Inicia sesión en frontend/pages/login.html
  4. El sistema te redirige automáticamente al editor
  5. Edita tus imágenes y descárgalas

Administrador

  1. Inicia sesión con las credenciales de administrador
  2. El sistema detecta el rol admin y redirige al panel
  3. Gestiona todos los usuarios desde el panel de administración

✅ Pruebas

El backend incluye pruebas automatizadas de integración para autenticación, rutas protegidas y configuración básica.

cd backend
pnpm test

También puedes validar sintaxis del servidor con:

cd backend
pnpm run check

🎨 Funcionalidades Principales

Cargar Imagen

Herramientas de Edición

✂️ Recortar

📏 Redimensionar

🔄 Rotar

🎨 Filtros

🔄 Convertir Formato

🛡️ Panel de Administración

El panel de administración implementa un CRUD completo sobre la tabla USUARIO que es la entidad fuerte no dependiente del modelo de datos.

Operación Descripción
SELECT Lista todos los usuarios con búsqueda en tiempo real
INSERT Agrega nuevos usuarios con validación de campos
UPDATE Edita datos y estado de usuarios existentes
DELETE Elimina usuarios con confirmación previa

Acceso: Usuarios con rol admin son redirigidos automáticamente al panel al iniciar sesión.

🗄️ Base de Datos

Tablas principales

artify_db
├── USUARIO           → Entidad fuerte — usuarios del sistema
├── SESION_EDICION    → Sesiones de edición por usuario
├── OPERACION         → Registro de operaciones realizadas
├── CONFIGURACION     → Configuración personalizada por usuario
└── IMAGEN            → Imágenes procesadas por usuario

Vista disponible

-- Resumen de usuarios activos con estadísticas
SELECT * FROM v_usuarios_activos;

🌐 Navegadores Soportados

Navegador Versión Mínima
Chrome 90+
Firefox 88+
Edge 90+
Safari 14+
Opera 76+

Requiere soporte para Canvas API y FileReader API.

📚 Documentación

La documentación del proyecto se encuentra organizada en la carpeta docs/.

Consulta el índice de documentación para acceder a la documentación del proyecto, manual técnico, plan de pruebas, arquitectura, base de datos, despliegue y estándares de codificación.

📐 Estándares de Codificación

Este proyecto sigue estándares de codificación documentados. Consulta el archivo docs/tecnica/coding-standards.md para más detalles sobre:

📌 Notas Importantes

Resolución Recomendada

Consideraciones de Rendimiento

Seguridad

👨‍💻 Autor

Ivan Dario Madrid Daza

📄 Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor:

  1. Haz un fork del proyecto
  2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
  3. Haz commit de tus cambios (git commit -m 'feat: agregar nueva funcionalidad')
  4. Push a la rama (git push origin feature/nueva-funcionalidad)
  5. Abre un Pull Request

🔮 Roadmap Futuro

Hecho con ❤️ usando HTML, CSS, JavaScript, Node.js y MySQL **[⬆ Volver arriba](#-artify--editor-de-imágenes-web)**
This site is open source. Improve this page.