Velas Dasil - Tienda de velas artesanales

Proyecto Full Stack JavaScript: SPA en Vue 3 con backend Node.js + Express y base de datos MySQL. Catálogo, carrito, checkout con integración a Mercado Pago y panel de administración.

Vue 3
Vite
JavaScript (ES6+)
Node.js
Express
REST API
MySQL
JWT / Auth
Multer (uploads)
Mercado Pago Checkout

Visitar Velas Dasil Solicitar información

Resumen

Que hace

Landing/Home con presentación de la marca Velas Dasil y acceso rápido a catálogo, sobre mí y contacto.
Catálogo de productos con tarjetas responsivas, filtros por categoría y orden de precio alto/bajo.
Detalle de producto con galería de hasta 5 imágenes, descripción, fragancia, tamaño, stock y precio.
Carrito y checkout: armado de pedido, resumen de items, validaciones de formulario y envío del pedido a la API.
Dos métodos de pago: integración con Mercado Pago (tarjeta, QR o app) y opción de coordinar pago manualmente por WhatsApp.
Panel de administración protegido con login para gestionar productos, categorías, imágenes y pedidos.
API REST desacoplada para productos, categorías, pedidos, contacto y autenticación.

Para quien

Emprendimientos que quieren salir de "solo Instagram" y tener una tienda propia controlada, con checkout y pagos online.
Negocios que necesitan catálogo + carrito + pagos pero manteniendo un panel sencillo para operar día a día.
Dueños que quieren panel de administración simple para cargar fotos, textos y precios sin tocar código.

Arquitectura

El proyecto está separado en dos carpetas principales: backend/ (API en Node.js + Express) y frontend/ (SPA en Vue 3 construida con Vite).

Frontend (Vue 3 + Vite)

frontend/src
  |-- components/
  |-- views/
  |-- router/
  |-- store.js
  |-- services/
  |-- styles/base.css
  `-- utils/imagenes.js

Backend (Node.js + Express)

backend/src
  |-- connection/
  |-- controller/
  |-- middlewares/
  |-- models/
  |-- routes/
  |-- services/
  |-- app.js
  `-- index.js

Frontend (Vue 3)

Home & navegación

El Home presenta la marca, un call-to-action hacia productos y botones flotantes para contacto rápido por WhatsApp y volver arriba de la página.

Catálogo de productos

ProductosView consume la API de productos, arma tarjetas con ProductCard.vue y permite filtrar por categoría y buscar por texto. El diseño es totalmente responsivo.

Detalle con galería

ProductoDetalleView muestra la información completa de la vela y una galería de fotos (hasta 5 imágenes) proveniente del backend. Desde está vista se puede agregar al carrito.

Carrito

CarritoView centraliza los items elegidos: permite cambiar cantidades, ver subtotal y total, y seguir al checkout. El estado se mantiene en store.js y en almacenamiento local del navegador.

Checkout + pago

CheckoutView muestra resumen del pedido, datos del cliente y permite elegir método de pago. Al confirmar, se crea el pedido, se genera la preferencia de Mercado Pago y el usuario es redirigido al checkout de MP. Dependiendo del resultado, se muestran CheckoutSuccessView, CheckoutPendingView o CheckoutFailureView.

Sobre mí & Contacto

Páginas separadas para contar la historia del emprendimiento y recibir consultas. ContactoView envia los datos al endpoint de contacto en el backend.

Backend / API

La API está construida con Express siguiendo un estilo REST. Usa un pool de conexión a MySQL definido en connection/connection.js y modelos simples para mapear tablas a objetos JS.

Autenticación & seguridad

Login de administrador via AuthController y AuthService.
Emision y verificacion de tokens JWT en el middleware auth.js.
Rutas de adminProductoRoutes, adminCategoriaRoutes y adminPedidoRoutes protegidas por el middleware de autenticación.
Middleware logger.js para registrar requests y errorHandler.js para respuestas de error consistentes.

Productos, categorías e imágenes

Modelo Producto con relación a Categoria e ImagenProducto.
Subida de imágenes con upload.js (Multer) y guardado de paths en ImagenProducto.
Endpoints públicos GET /productos, GET /productos/:id, GET /categorias.
Endpoints de administración POST/PUT/DELETE /admin/productos y /admin/categorias para ABM completo.

Pedidos

Modelo Pedido + ItemPedido para guardar pedidos y lineas.
Endpoint POST /pedidos que recibe los datos del checkout y los items del carrito.
Validaciones de stock antes de confirmar el pedido y respuesta con número de pedido.
Listado de pedidos en rutas de administración para consulta interna.

Pagos con Mercado Pago

Servicio PagoMercadoPagoService.js encapsula la creacion de preferencias de pago y la comunicación con la API de Mercado Pago (tokens y credenciales se manejan en variables de entorno, no expuestas en el código público).
Rutas mpRoutes.js reciben las respuestas de Mercado Pago (aprobado, pendiente, rechazado) y actualizan el pedido.
La tabla de pedidos guarda información como mp_preference_id, mp_payment_id, mp_status y mp_status_detail para poder auditar cada pago.
Soporta tanto pagos online (Mercado Pago) como pedidos con pago manual coordinado por WhatsApp.

Retos y soluciones

Separar bien front y back -> estructura de carpetas clara, con servicios api.js y auth.js en el frontend para centralizar las llamadas a la API y el manejo de tokens.
Manejo de varias imágenes por producto -> modelo ImagenProducto y middleware upload.js para guardar hasta 5 fotos por vela.
Protección del panel admin -> rutas de administración protegidas por middleware de autenticación y control de permisos en AuthService.
Validaciones en checkout -> doble validación: en el frontend (formularios de Vue) y en el backend antes de crear el pedido.
UX en móvil -> diseño de catálogo, cards de producto y botones flotantes pensando en uso mayoritario desde el celular.
Integración de pagos sin exponer secretos -> uso de variables de entorno para las credenciales de Mercado Pago y un servicio dedicado que encapsula la lógica de pago.

Galería

Listado de productos con filtros y búsqueda — Catálogo

Detalle de una vela con galería de imágenes — Detalle de producto

Checkout con formulario de pedido — Checkout

Resultados

Arquitectura full-stack con frontend, backend y base de datos separados.
Panel de administración simple que permite mantener catálogo y fotos sin tocar código.
Experiencia móvil-first pensada para la forma real en que los clientes navegan y compran.
Flujo de pago completo desde el carrito hasta la confirmación de Mercado Pago, registrando estados y datos del pago para auditoría.
Integración de pagos con Mercado Pago y registro de estados de cada pedido.