Diseño y Desarrollo Web

Yellow Metric - Arranjos e Transformações

Web de una empresa de arreglos de ropa y tintorería con 12 tiendas en Portugal y España. Incluye un sistema multiidioma completo (PT/EN/ES/FR), contadores de estadísticas animados que muestran más de 8 millones de arreglos, páginas de servicio interactivas y un completo buscador de tiendas con Google Maps integrado para cada ubicación.

Creada con React 19, TypeScript y Tailwind CSS 4, con navegación de React Router DOM 7, React Hook Form con validación Yup, contadores activados al hacer scroll mediante la API Intersection Observer, animaciones CSS con keyframes a medida y modo estricto con hooks de i18n propios.

Fecha de finalización: mayo de 2026
Visitar la Web
Detalles del Proyecto

Resumen

Sector

Comercio y Servicios al Consumidor (Arreglos de Ropa y Tintorería)

Alcance

Diseño y desarrollo web completo con gestión de contenidos multiidioma, presentación interactiva de los servicios, buscador de tiendas con Google Maps integrado, formulario de contacto con validación y diseño responsive optimizado para todos los dispositivos

Plazo

3-4 semanas desde la puesta en marcha hasta la finalización

El Problema

El Reto

Yellow Metric, una empresa portuguesa líder en arreglos de ropa y tintorería con 12 tiendas en Portugal y España, necesitaba una presencia digital moderna a la altura de su posicionamiento de marca premium. Su web anterior no tenía soporte multiidioma pese a operar en Portugal, España y con turistas internacionales, y no reflejaba su impresionante escala operativa (más de 8 millones de arreglos, más de 331.000 servicios de tintorería y más de 138.000 clientes satisfechos). La empresa necesitaba una solución que funcionara a la perfección en cualquier dispositivo, cargara rápido y ofreciera una forma intuitiva de encontrar la tienda más cercana y entender su completa oferta de servicios.

Nuestro Enfoque

La Solución

Creamos una web totalmente a medida basada en React con TypeScript para garantizar el tipado seguro y la facilidad de mantenimiento, con un completo sistema de internacionalización en cuatro idiomas (portugués, inglés, español y francés). La web incluye contadores animados activados al hacer scroll mediante la API Intersection Observer para destacar sus impresionantes cifras, generando impacto visual sin sacrificar el rendimiento. Para el buscador de tiendas implementamos una integración interactiva de Google Maps con 12 fichas de ubicación, cada una con su mapa integrado, su teléfono y su horario. Todo el diseño sigue un enfoque mobile-first con Tailwind CSS 4, lo que garantiza cargas rápidas y una visualización perfecta en cualquier dispositivo. La validación de formularios se implementó con React Hook Form y esquemas de Yup, ofreciendo información en tiempo real al usuario y evitando errores de envío.

Qué Incluye

Características Clave

Soporte Multiidioma (PT/EN/ES/FR)
Contadores de Estadísticas Animados
Buscador de Tiendas Interactivo
Diseño Responsive Mobile-First
Validación de Formularios y Gestión de Errores
Transiciones de Página Fluidas
Animaciones CSS a Medida
Rutas Optimizadas para SEO
Rendimiento

Resultados

95+/100
Puntuación de rendimiento
Rendimiento en Lighthouse: builds rápidos con Vite, React 19 optimizado y un bundle de JavaScript mínimo
<1.2s
First Contentful Paint
Core Web Vitals (FCP): recursos optimizados, imágenes con carga diferida y CSS eficiente
98/100
Puntuación de accesibilidad
Accesibilidad en Lighthouse: HTML semántico, etiquetas ARIA, navegación por teclado y contrastes adecuados
A+
Calidad del código
Cumplimiento del modo estricto: 100 % de cobertura en TypeScript, sin any implícitos y tipado seguro
Tecnología

Stack Tecnológico

React 19
TypeScript 5.6
Vite 6
Tailwind CSS 4.0
React Router DOM 7
React Hook Form
Yup
Lucide React
Firebase
Empezar

¿Listo para Empezar Tu Proyecto?

Hablemos de cómo podemos crear una web espectacular adaptada a las necesidades de tu negocio.

Yellow Metric - Arranjos e Transformações | Portafolio | low-key solutions