Velas Dasil - Tienda de velas artesanales

Proyecto Full Stack JavaScript: SPA en Vue 3 con backend Node.js + Express y base de datos MySQL. Catalogo, carrito, checkout con integracion a Mercado Pago y panel de administracion.

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

Visitar Velas Dasil Solicitar informacion

Resumen

Que hace

Landing/Home con presentacion de la marca Velas Dasil y acceso rapido a catalogo, sobre mi y contacto.
Catalogo de productos con tarjetas responsivas, filtros por categoria y orden de precio alto/bajo.
Detalle de producto con galeria de hasta 5 imagenes, descripcion, fragancia, tamano, stock y precio.
Carrito y checkout: armado de pedido, resumen de items, validaciones de formulario y envio del pedido a la API.
Dos metodos de pago: integracion con Mercado Pago (tarjeta, QR o app) y opcion de coordinar pago manualmente por WhatsApp.
Panel de administracion protegido con login para gestionar productos, categorias, imagenes y pedidos.
API REST desacoplada para productos, categorias, pedidos, contacto y autenticacion.

Para quien

Emprendimientos que quieren salir de "solo Instagram" y tener una tienda propia controlada, con checkout y pagos online.
Negocios que necesitan catalogo + carrito + pagos pero manteniendo un panel sencillo para operar dia a dia.
Duenos que quieren panel de administracion simple para cargar fotos, textos y precios sin tocar codigo.

Arquitectura

El proyecto esta 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 & navegacion

El Home presenta la marca, un call-to-action hacia productos y botones flotantes para contacto rapido por WhatsApp y volver arriba de la pagina.

Catalogo de productos

ProductosView consume la API de productos, arma tarjetas con ProductCard.vue y permite filtrar por categoria y buscar por texto. El diseno es totalmente responsivo.

Detalle con galeria

ProductoDetalleView muestra la informacion completa de la vela y una galeria de fotos (hasta 5 imagenes) proveniente del backend. Desde esta 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 metodo 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 mi & Contacto

Paginas 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 esta construida con Express siguiendo un estilo REST. Usa un pool de conexion a MySQL definido en connection/connection.js y modelos simples para mapear tablas a objetos JS.

Autenticacion & 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 autenticacion.
Middleware logger.js para registrar requests y errorHandler.js para respuestas de error consistentes.

Productos, categorias e imagenes

Modelo Producto con relacion a Categoria e ImagenProducto.
Subida de imagenes con upload.js (Multer) y guardado de paths en ImagenProducto.
Endpoints publicos GET /productos, GET /productos/:id, GET /categorias.
Endpoints de administracion 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 numero de pedido.
Listado de pedidos en rutas de administracion para consulta interna.

Pagos con Mercado Pago

Servicio PagoMercadoPagoService.js encapsula la creacion de preferencias de pago y la comunicacion con la API de Mercado Pago (tokens y credenciales se manejan en variables de entorno, no expuestas en el codigo publico).
Rutas mpRoutes.js reciben las respuestas de Mercado Pago (aprobado, pendiente, rechazado) y actualizan el pedido.
La tabla de pedidos guarda informacion 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 & 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 imagenes por producto -> modelo ImagenProducto y middleware upload.js para guardar hasta 5 fotos por vela.
Proteccion del panel admin -> rutas de administracion protegidas por middleware de autenticacion y control de permisos en AuthService.
Validaciones en checkout -> doble validacion: en el frontend (formularios de Vue) y en el backend antes de crear el pedido.
UX en mobile -> diseno de catalogo, cards de producto y botones flotantes pensando en uso mayoritario desde el celular.
Integracion de pagos sin exponer secretos -> uso de variables de entorno para las credenciales de Mercado Pago y un servicio dedicado que encapsula la logica de pago.

Galeria

Listado de productos con filtros y busqueda — Catalogo

Detalle de una vela con galeria de imagenes — Detalle de producto

Checkout con formulario de pedido — Checkout

Resultados

Arquitectura full-stack lista para escalar (mas canales, app movil, nuevos metodos de pago).
Panel de administracion simple que permite mantener catalogo y fotos sin tocar codigo.
Experiencia mobile-first pensada para la forma real en que los clientes navegan y compran.
Flujo de pago completo desde el carrito hasta la confirmacion de Mercado Pago, registrando estados y datos del pago para auditoria.
Base tecnica solida (Vue + Node + MySQL + Mercado Pago) que reutilizas en otros proyectos futuros.