MATRA - CAT
Sitio webTrabajo entregado
Sitio corporativo de MATRA - CAT en Costa Rica: venta y renta de maquinaria pesada, mantenimiento, financiamiento y asesoría técnica.
Stack
- Next.js
- Tailwind CSS
- WordPress
- Motion
- Google Analytics
Snapshot
- Rol — Frontend Developer: construí el sitio completo, desde el maquetado hasta el despliegue y la integración con el CMS.
- Alcance — Sitio público de la empresa: equipo en venta y renta, repuestos, promociones, sucursales y las líneas de mantenimiento, financiamiento y asesoría técnica.
- Resultado — Lighthouse 97 en performance, 96 en accesibilidad, 100 en best practices y 100 en SEO.
El problema
MATRA - CAT vende y renta maquinaria pesada, pero su sitio anterior cargaba lento y tenía un diseño de otra época. Para un cliente que llega buscando una excavadora o un plan de renta, ese sitio era el primer contacto con la empresa — y no ayudaba ni a encontrar el equipo ni a dar el paso de contactar.
Decisiones clave
- Reconstruir el sitio en Next.js con renderizado ISR — el contenido cambia poco pero tiene que poder cambiar sin esperar a un desarrollador, así que cada página se sirve estática y se regenera bajo demanda. A cambio, hay que razonar sobre caché y aceptar que una edición no aparece hasta que la página se revalida.
- Disparar la revalidación con un webhook desde el CMS — en lugar de dejar que el contenido nuevo esperara a que expirara el ISR, WordPress avisa al sitio cuando algo se publica. A cambio, el sitio queda acoplado al CMS y hay que mantener el endpoint y su secreto: si el webhook falla, el fallo es silencioso hasta la siguiente revalidación por tiempo.
- Mantener WordPress como headless CMS — el equipo ya sabía publicar ahí y cambiar de herramienta habría significado reentrenarlos junto con el lanzamiento. A cambio, hereda un modelo de contenido que no se diseñó para consumirse por API, y el front carga con esa forma.
- Usar Motion para las animaciones — el sitio necesitaba sensación de producto cuidado, no una galería de efectos. A cambio, más JavaScript en el cliente: fue el trade-off que más pesó al perseguir el puntaje de performance.
Resultado
- Lighthouse en producción: 97 performance, 96 accesibilidad, 100 best practices, 100 SEO.
- El equipo de MATRA publica y edita desde WordPress y el cambio llega al sitio sin redeploy: el webhook revalida la página afectada.
Qué haría distinto
- Cambiaría WordPress por Strapi. WordPress se eligió por continuidad para los editores, pero modelar el catálogo de maquinaria en un CMS pensado para API habría evitado adaptar la forma del contenido en el front.