ImageOptimizerServicePro

Este proyecto es una aplicación web para subir y procesar imágenes. Permite redimensionar y ajustar la calidad de las imágenes subidas, mostrando una vista previa de las imágenes procesadas con enlaces para descargarlas. Este desarrollo ha sido realizado por Torrente Dev SAS.

Características

• Subida de hasta 4 imágenes simultáneamente.
• Redimensionamiento de imágenes.
• Ajuste de calidad de imágenes.
• Barra de progreso durante la subida de imágenes.
• Vista previa de imágenes procesadas en tarjetas con enlaces de descarga.
• Mensajes de estado para informar sobre el progreso y resultado de la subida.
• Footer informativo.

Tecnologías Utilizadas

• Frontend: React, react-bootstrap
• Backend: Node.js, Express, Multer, Bull, child_process (para ejecutar comandos de ImageMagick)
• Otros: Axios para las solicitudes HTTP, Bootstrap para los estilos.

Instalación

Sigue estos pasos para instalar y ejecutar el proyecto localmente.

Requisitos Previos

• Node.js (v12 o superior)
• npm (v6 o superior)

Clonar el Repositorio

git clone https://github.com/tu-usuario/ImageOptimizerServicePro.git
cd procesador-de-imagenes

Instalación de Dependencias

cd ImageOptimizerServicePro
npm install

cd frontend-imagepptimizerservicepro
npm install

Ejecución del Proyecto

Backend En la carpeta backend (ImageOptimizerServicePro), ejecuta:

node server.js

Frontend En la carpeta front (frontend-imagepptimizerservicepro), ejecuta:

npm start

Uso

• Abre la aplicación en tu navegador en http://localhost:3000.
• Selecciona hasta 4 imágenes para subir.
• (Opcional) Ingresa las dimensiones para redimensionar las imágenes (Ej: 200x200).
• (Opcional) Ingresa la calidad deseada para las imágenes (1-100).
• Haz clic en "Subir y Procesar".
• Observa la barra de progreso durante la subida.
• Una vez que las imágenes se hayan procesado, se mostrarán en tarjetas con una vista previa y un enlace para descargar cada imagen.

Dependencias

• Backend express multer bull child_process (nativo de Node.js) cors

• Frontend react react-dom axios react-bootstrap bootstrap

Contribuciones

Las contribuciones son bienvenidas. Si tienes alguna mejora, por favor abre un issue o envía un pull request.

Licencia

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