Carman Parts + Cozza Parts - Caso multi-marca
Un solo código, dos marcas: branding, datos y automatizaciones por empresa.
Versión 3.0: plataforma web productiva desarrollada con Vue 3 + Vite + TypeScript y una API Node.js + Express desacoplada. Pública un catálogo real persistido en MariaDB, sincronizado de forma segura con Mercado Libre, con búsqueda, filtros, paginación y detalle de producto.
Versión 2.0: reescritura de los sitios de Carman Parts y Cozza Parts en una Single Page Application (SPA) con Vue 3 + Vite y backend Node.js + Express como API unificada y proxy hacia Mercado Libre, reutilizando la misma lógica de catálogo y filtros para ambas marcas.
Versión 1.0: primera implementacion de Carman Parts y Cozza Parts como dos sitios independientes desarrollados en PHP 8 + MySQL sobre cPanel, con integración directa a Mercado Libre y automatizaciones específicas por marca.
- HTML5
- CSS3
- TypeScript
- Vue 3
- Vite
- Vue Router
- Pinia
- Node.js
- Express
- MariaDB
- OAuth 2.0
- Mercado Libre API
- CORS
- Nodemailer
- HTML5
- CSS3
- JavaScript
- Vue 3
- Vite
- Node.js
- Express
- MySQL
- OAuth2
- Mercado Libre API
- SMTP / Email
- HTML5
- CSS3
- JavaScript
- PHP 8
- MySQL
- OAuth2
- Mercado Libre API
- cPanel
- .htaccess
Resumen
Versión 3.0 - Plataforma productiva multi-marca
La propuesta visual original evoluciono hacia una plataforma web productiva para Carman Parts y Cozza Parts. La experiencia pública usa Vue 3 + Vite + TypeScript, Vue Router y componentes reutilizables, mientras una API propia sirve datos reales sin conectar el navegador directamente con Mercado Libre.
- Catálogo público con buscador, filtros por tipo y marca, orden y paginación.
- Detalle de producto con información, descripción e imágenes reales.
- Experiencia responsive con contenido institucional, ubicación y canales de consulta.
- Formulario comercial conectado al backend mediante Nodemailer.
Alcance actual
- API REST en Node.js + Express estructurada por capas.
- Persistencia MySQL/MariaDB para cuentas, sincronizaciones, catálogo y facetas.
- Integración backend con Mercado Libre mediante OAuth 2.0.
- Lectura, validación y publicación separadas para proteger la integridad del catálogo.
- Arquitectura reutilizada con dominio, identidad, contenido y configuración por marca.
- Frontend y backend desacoplados en el despliegue productivo.
Versión 2.0 - SPA unificada para Carman Parts y Cozza Parts
Reescritura completa de los sitios de Carman Parts y Cozza Parts en una Single Page Application (SPA) desarrollada con Vue 3 + Vite, consumiendo una API propia en Node.js + Express. La nueva versión centraliza la lógica de catálogo, filtros y búsqueda, y permite reutilizar el mismo código para ambas marcas cambiando únicamente logo, colores y textos.
- Catálogo con búsqueda y filtros en cascada, compartidos por marca.
- Listado y detalle de repuestos normalizados desde Mercado Libre.
- SPA responsive con mejor tiempo de respuesta que la versión PHP.
- API Node que unifica la integración a Mercado Libre y automatizaciones.
- Lógica de catálogo compartida con configuración diferenciada por marca.
Que cambia por marca
- Branding (logo, colores, textos) y dominio propio.
- Credenciales OAuth2 y tokens almacenados de forma segura por sitio.
- Conexion de base separada (host/schema/usuarios) cuando aplica.
- Listados y reglas según disponibilidad/stock de cada empresa.
Versión 1.0 - Sitios PHP + MySQL por marca
- Sitio institucional + catálogo responsivo con filtros y paginación real.
- Modulos PHP para integración con Mercado Libre (OAuth2, refresh de tokens, publicación/listado).
- Scripts de automatización (inventario, publicaciones, precarga -> cargado -> ML).
- Estructura de base: precargado, cargado y publicaciones_ml.
Que cambia por marca
- Branding (logo, colores, textos) y dominio propio.
- Credenciales OAuth2 y tokens almacenados de forma segura por sitio.
- Conexion de base separada (host/schema/usuarios) cuando aplica.
- Listados y reglas según disponibilidad/stock de cada empresa.
Arquitectura
La solucion desacopla una SPA en Vue 3 + TypeScript, una API REST en Node.js + Express, la persistencia en MySQL/MariaDB y la integración backend con Mercado Libre API. Cada marca conserva su dominio, identidad, textos, imágenes, configuración y cuenta, sobre una arquitectura funcional común.
Frontend Vue 3
Vue Router organiza la home y el detalle de producto. Componentes y servicios reutilizables resuelven catálogo, estados de carga, filtros, paginación, galería y contacto sin exponer credenciales ni conectarse directamente con Mercado Libre.
frontend/
|- src/
| |- components/
| |- views/
| |- router/
| |- services/
| `- types/
`- public/
Backend y persistencia
La API se separa en controladores, servicios, repositorios, validadores y middlewares. MariaDB conserva el catálogo publicado y el estado del pipeline; Nodemailer gestiona las consultas comerciales.
backend/
|- src/
| |- config/
| |- controllers/
| |- middlewares/
| |- repositories/
| |- routes/
| |- services/
| `- validators/
|- migrations/
`- scripts/
Catálogo e integración con Mercado Libre
El pipeline obtiene de forma controlada las publicaciones activas, normaliza los datos y los guarda temporalmente. Una etapa independiente valida integridad y completitud antes de realizar el reemplazo transaccional del catálogo publicado. Luego se reconstruyen y persisten tipos de producto y marcas para que la API pública de solo lectura resuelva búsqueda, filtros, paginación y detalle sin consultar Mercado Libre en tiempo real. Automatizaciones externas programadas coordinan estas operaciones protegidas para mantener actualizado el catálogo en producción.
Seguridad y confiabilidad
- OAuth 2.0 encapsulado en backend, secretos fuera del repositorio y datos sensibles cifrados.
- Operaciones administrativas autorizadas y separadas de las rutas públicas y de salud.
- CORS restringido, cabeceras de seguridad, validación y sanitización de entradas.
- Honeypot y limites de solicitudes para el formulario de contacto.
- Timeouts, reintentos acotados, limites de respuesta y validación defensiva de servicios externos.
- Transacciones con rollback, publicación idempotente y conservación del catálogo anterior ante fallas.
- Bloqueos de concurrencia para impedir operaciones incompatibles sobre el pipeline.
- Controles de salud separados para aplicación y base de datos, con logs sin credenciales.
Front 2.0: SPA en Vue 3 + Vite con componentes reutilizables para cabecera, filtros, grilla y detalle de producto, y router para home, catálogo y contacto. Back 2.0: API en Node.js + Express que actúa como capa única entre el front y Mercado Libre, con endpoints para catálogo, detalle y jobs de sincronización.
Backend / API Node
Proyecto estructurado por capas (routes -> controllers -> services) y helpers para autenticación OAuth2, normalización de datos y llamadas a la API de Mercado Libre.
backend/
|- src/
| |- routes/
| |- controllers/
| |- services/
| |- jobs/
| `- config/
`- .env (tokens y claves fuera del codigo)
SPA Vue 3 + Vite
Componentes compartidos para Carman y Cozza (ProductCard,
ProductGrid, ProductFilters) y layout que cambia branding
y textos según la marca a partir de configuración.
frontend/
|- src/
| |- views/
| |- components/
| |- composables/
| `- router/
`- .env.* (variables por entorno y marca)
Front: HTML5, CSS y JS vanilla. Back: PHP 8 + MySQL. Integración: SDK/REST Mercado Libre (OAuth2, refresh tokens). Automatizaciones: scripts PHP ejecutados por cPanel/CLI.
Seguridad: separacion public_html vs carpeta privada;
.htaccess para bloquear secretos/archivos sensibles; manejo de tokens en archivos
protegidos.
Catálogo
Filtros combinables, paginación real sin perder estado y URLs limpias con query params controlados.
Integración ML
Autorización OAuth2, refresh automatico y endpoints para listar/publicar/actualizar productos.
Data flow
Precarga (CSV/Excel) -> normalización -> cargado -> publicación/consulta en Mercado Libre.
Retos & soluciones
- Sincronizar un catálogo amplio sin depender de la API externa en cada visita -> procesamiento backend y exposición pública desde datos persistidos.
- Evitar publicar datos incompletos -> etapas separadas de lectura, normalización y validación antes de publicar.
- Conservar disponible el catálogo ante una falla -> reemplazo completo dentro de una transaccion con rollback al estado anterior.
- Evitar carreras entre etapas incompatibles -> bloqueos de concurrencia y transiciones de estado controladas.
- Resolver filtros sin clasificar títulos en cada consulta pública -> reconstrucción idempotente y persistida de tipos de producto y marcas.
- Reutilizar la solucion para dos marcas -> arquitectura común con configuración, identidad, dominio y datos independientes.
- Proteger integraciones y operaciones sensibles -> OAuth 2.0, autorización administrativa, cifrado, minimo privilegio y secretos fuera del código.
- Controlar respuestas ambiguas y limites externos -> validaciones defensivas, timeouts, reintentos acotados y errores públicos genericos.
- Unificar dos sitios en una sola SPA -> diseño de componentes neutrales y branding inyectado por configuración.
- Mantener filtros y paginación real -> normalización de la respuesta de Mercado Libre en la API Node para que el front consuma siempre el mismo formato.
- Multi-marca sin duplicar lógica -> variables de entorno por dominio (Carman/Cozza) y mapping de categorías/URLs por marca.
- Rendimiento -> build con Vite, splitting de bundles, cache de respuestas frecuentes y optimizacion de imágenes.
- Migracion gradual -> convivio con la versión PHP mientras se probaba la nueva arquitectura sin cortar servicio.
-
Paginación real sin perder filtros -> control de
offset/limity estados en URL. -
Tokens seguros -> refresh programado y almacenamiento fuera de
public_html. - Multi-marca con un solo código -> variables de entorno por sitio y layout con branding dinamico.
- Rendimiento -> imágenes optimizadas y consultas paginadas/indexadas.
-
Hardening -> reglas
.htaccesspara bloquear JSON/INI/SQL y rutas internas.
Galería
Carman Parts - Capturas
Cozza Parts - Capturas
Resultados
- Dos sitios productivos para Carman Parts y Cozza Parts sobre una arquitectura funcional común y configuración propia por marca.
- Catálogo real conectado a publicaciones activas de Mercado Libre y servido desde persistencia propia.
- Experiencia pública completa con búsqueda, filtros sobre facetas persistidas, orden, paginación y detalle con imágenes reales.
- Sincronización productiva coordinada por automatizaciones externas y un pipeline separado de lectura, validación, publicación y reconstrucción de facetas.
- Publicación confiable mediante reemplazo transaccional, rollback y controles que evitan dejar el catálogo en un estado parcial.
- Backend productivo y mantenible con separacion por capas, controles de salud, seguridad defensiva y contacto comercial mediante Nodemailer.
- Un mismo front y una misma API mantienen 2 marcas funcionando con branding y datos separados.
- Catálogo rápido con SPA Vue + Vite, filtros combinables y paginación real contra la API Node.
- Arquitectura multi-marca con configuración y datos diferenciados para cada marca.
- Automatizaciones centralizadas (jobs Node) para publicar/actualizar en Mercado Libre por empresa.
- Un mismo código mantiene 2 marcas sin duplicar trabajo.
- Catálogo rápido con filtros combinables + paginación real.
- Publicaciones ML sincronizadas por empresa con tokens separados.
-
Operativa segura (tokens fuera de
public_html, reglas.htaccess).