Carman Parts + Cozza Parts - Caso multi-marca
Un solo codigo, dos marcas: branding, datos y automatizaciones por empresa.
Version 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 logica de catalogo y filtros para ambas marcas.
Version 1.0: primera implementacion de Carman Parts y Cozza Parts como dos sitios independientes desarrollados en PHP 8 + MySQL sobre cPanel, con integracion directa a Mercado Libre y automatizaciones especificas por marca.
- 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
Version 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 version centraliza la logica de catalogo, filtros y busqueda, y permite reutilizar el mismo codigo para ambas marcas cambiando unicamente logo, colores y textos.
- Catalogo con busqueda 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 version PHP.
- API Node que unifica la integracion a Mercado Libre y automatizaciones.
- Lista para sumar nuevas marcas sin duplicar codigo.
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 segun disponibilidad/stock de cada empresa.
Version 1.0 - Sitios PHP + MySQL por marca
- Sitio institucional + catalogo responsivo con filtros y paginacion real.
- Modulos PHP para integracion con Mercado Libre (OAuth2, refresh de tokens, publicacion/listado).
- Scripts de automatizacion (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 segun disponibilidad/stock de cada empresa.
Arquitectura
Front 2.0: SPA en Vue 3 + Vite con componentes reutilizables para cabecera, filtros, grilla y detalle de producto, y router para home, catalogo y contacto. Back 2.0: API en Node.js + Express que actua como capa unica entre el front y Mercado Libre, con endpoints para catalogo, detalle y jobs de sincronizacion.
Backend / API Node
Proyecto estructurado por capas (routes -> controllers -> services) y helpers para autenticacion OAuth2, normalizacion 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 segun la marca a partir de configuracion.
frontend/
|- src/
| |- views/
| |- components/
| |- composables/
| `- router/
`- .env.* (variables por entorno y marca)Front: HTML5, CSS y JS vanilla. Back: PHP 8 + MySQL. Integracion: 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.
Catalogo
Filtros combinables, paginacion real sin perder estado y URLs limpias con query params controlados.
Integracion ML
Autorizacion OAuth2, refresh automatico y endpoints para listar/publicar/actualizar productos.
Data flow
Precarga (CSV/Excel) -> normalizacion -> cargado -> publicacion/consulta en Mercado Libre.
Retos & soluciones
- Unificar dos sitios en una sola SPA -> diseno de componentes neutrales y branding inyectado por configuracion.
- Mantener filtros y paginacion real -> normalizacion de la respuesta de Mercado Libre en la API Node para que el front consuma siempre el mismo formato.
- Multi-marca sin duplicar logica -> variables de entorno por dominio (Carman/Cozza) y mapping de categorias/URLs por marca.
- Rendimiento -> build con Vite, splitting de bundles, cache de respuestas frecuentes y optimizacion de imagenes.
- Migracion gradual -> convivio con la version PHP mientras se probaba la nueva arquitectura sin cortar servicio.
-
Paginacion 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 codigo -> variables de entorno por sitio y layout con branding dinamico.
- Rendimiento -> imagenes optimizadas y consultas paginadas/indexadas.
-
Hardening -> reglas
.htaccesspara bloquear JSON/INI/SQL y rutas internas.
Galeria
Carman Parts - Capturas
Cozza Parts - Capturas
Resultados
- Un mismo front y una misma API mantienen 2 marcas funcionando con branding y datos separados.
- Catalogo rapido con SPA Vue + Vite, filtros combinables y paginacion real contra la API Node.
- Escalable para sumar nuevas marcas sin tocar la logica core de catalogo.
- Automatizaciones centralizadas (jobs Node) para publicar/actualizar en Mercado Libre por empresa.
- Un mismo codigo mantiene 2 marcas sin duplicar trabajo.
- Catalogo rapido con filtros combinables + paginacion real.
- Publicaciones ML sincronizadas por empresa con tokens separados.
-
Operativa segura (tokens fuera de
public_html, reglas.htaccess).