Aplicación web backend desarrollada con Node.js y Express para gestión de productos de tienda en línea. Implementa persistencia de datos, manejo de archivos, rutas dinámicas y servidor web completo.
Este proyecto es una aplicación web backend desarrollada como parte del Bootcamp de JavaScript, enfocada en la gestión de productos para una tienda en línea. La aplicación implementa un servidor Express completo con persistencia de datos, manejo de archivos y rutas dinámicas, cumpliendo con todos los requisitos del proyecto original.
Servidor web básico que sirve contenido estático y dinámico, configurado para escuchar en puerto 3000.
Almacenamiento de productos en archivos JSON utilizando el módulo fs de Node.js de manera asíncrona.
Rutas para mostrar productos y agregar nuevos productos a través de formularios con EJS.
Uso de npm para instalar y gestionar dependencias como Express, EJS, Multer y nodemon.
Middleware para capturar errores 404 y errores generales del servidor con mensajes apropiados.
Sistema de subida de imágenes con Multer y validación de tipos de archivo permitidos.
Se configuró un servidor Express básico que escucha en el puerto 3000, con middleware para parsing de datos y configuración de EJS como motor de plantillas.
Express es el framework web más popular para Node.js, proporcionando una base sólida para crear aplicaciones web con rutas, middleware y manejo de requests/responses.
Permite crear un servidor web que puede manejar peticiones HTTP, servir contenido estático y dinámico, y procesar formularios de usuarios.
Se implementaron funciones asíncronas para leer y escribir productos en un archivo JSON usando el módulo fs de Node.js, con manejo de errores para archivos inexistentes.
El módulo fs permite operaciones de archivos de forma asíncrona, evitando bloquear el hilo principal del servidor. JSON es un formato ligero y fácil de manipular.
Garantiza que los datos de productos se mantengan persistentes entre reinicios del servidor, permitiendo almacenar y recuperar información de manera confiable.
Se implementaron rutas RESTful para operaciones CRUD completas: GET para mostrar productos, POST para crear, PUT para actualizar y DELETE para eliminar.
Las rutas RESTful siguen convenciones estándar de la industria, haciendo la API predecible y fácil de mantener. Cada método HTTP tiene un propósito específico.
Permite que el frontend se comunique con el backend de manera estructurada, facilitando operaciones de productos y proporcionando una API clara y consistente.
Se implementó middleware para capturar errores 404 (página no encontrada) y errores generales del servidor (500), mostrando páginas de error personalizadas.
El manejo de errores es fundamental para proporcionar una experiencia de usuario profesional y ayudar en el debugging durante el desarrollo.
Evita que la aplicación se rompa completamente cuando ocurren errores, proporcionando mensajes informativos y manteniendo la estabilidad del servidor.
Se implementó un sistema completo de modales usando JavaScript vanilla, con creación dinámica de elementos DOM para mostrar feedback al usuario.
Los modales proporcionan feedback inmediato y consistente sin recargar la página, mejorando significativamente la experiencia del usuario.
Informa al usuario sobre el resultado de sus acciones (éxito, error, confirmación) y previene acciones accidentales como eliminar productos.
Se implementó validación en tiempo real usando event listeners en el evento submit, con preventDefault() para detener envíos inválidos.
La validación del lado del cliente mejora la UX al proporcionar feedback inmediato y reduce la carga en el servidor al evitar envíos de datos inválidos.
Garantiza que solo se envíen datos válidos al servidor, previene errores y mejora la experiencia del usuario con mensajes claros.
Se implementó vista previa de imágenes usando FileReader API, con validación de tipo de archivo y tamaño máximo (5MB).
FileReader permite mostrar vistas previas instantáneas sin subir el archivo al servidor, mejorando la experiencia del usuario y optimizando el rendimiento.
Permite al usuario ver la imagen antes de guardar, valida que sea un archivo de imagen válido y controla el tamaño para optimizar el almacenamiento.
Se implementaron operaciones asíncronas usando Fetch API con async/await para eliminar productos, incluyendo manejo completo de errores.
Fetch API es la forma moderna de hacer peticiones HTTP en JavaScript, y async/await hace el código más legible que las promesas tradicionales.
Permite operaciones del lado del cliente sin recargar la página, proporcionando una experiencia fluida y moderna al usuario.
Se implementó formateo automático de precios usando Intl.NumberFormat para pesos chilenos y toLocaleDateString para fechas.
Intl API proporciona formateo estándar y localizado, asegurando consistencia y legibilidad para usuarios chilenos.
Mejora la legibilidad de precios y fechas, proporciona formato consistente en toda la aplicación y respeta las convenciones locales.
Se implementaron microinteracciones con event listeners para hover effects en botones y transiciones suaves en modales.
Las animaciones proporcionan feedback visual inmediato, haciendo que la interfaz se sienta más responsiva y profesional.
Mejora la percepción de calidad de la aplicación, proporciona feedback visual claro y hace la experiencia más atractiva e interactiva.