Conception et développement web

Yellow Metric - Arranjos e Transformações

Site web d'une entreprise de retouches de vêtements et de pressing, présente dans 12 boutiques au Portugal et en Espagne. Il propose un système multilingue complet (PT/EN/ES/FR), des compteurs de statistiques animés mettant en avant plus de 8 millions de retouches, des pages de services interactives et un localisateur de boutiques complet, avec une carte Google Maps intégrée pour chaque point de vente.

Développé avec React 19, TypeScript et Tailwind CSS 4, il s'appuie sur la navigation React Router DOM 7, React Hook Form associé à la validation Yup, des compteurs déclenchés au défilement via l'API Intersection Observer, des animations CSS sur mesure et le mode strict, avec des hooks d'internationalisation personnalisés.

Date de réalisation : mai 2026
Voir le site en ligne
Détails du projet

Vue d'ensemble

Secteur

Commerce et services aux particuliers (retouches de vêtements et pressing)

Périmètre

Conception et développement complets du site, avec gestion de contenu multilingue, présentation interactive des services, localisateur de boutiques intégré à Google Maps, formulaire de contact avec validation et design responsive optimisé pour tous les appareils

Durée

3 à 4 semaines, de la mise en place initiale à la finalisation

La problématique

Le défi

Yellow Metric, acteur de référence de la retouche de vêtements et du pressing au Portugal, avec 12 boutiques au Portugal et en Espagne, avait besoin d'une présence digitale moderne à la hauteur de son positionnement premium. Son site existant ne proposait aucune version multilingue alors qu'il s'adressait aux marchés portugais et espagnol ainsi qu'aux touristes internationaux, et ne mettait pas en valeur son ampleur opérationnelle (plus de 8 millions de retouches, plus de 331 000 prestations de pressing, plus de 138 000 clients satisfaits). L'entreprise recherchait une solution fonctionnant parfaitement sur tous les appareils, se chargeant rapidement et permettant à ses clients de trouver intuitivement la boutique la plus proche et de comprendre l'étendue de son offre.

Notre approche

La solution

Nous avons développé un site entièrement sur mesure en React, avec TypeScript pour la sûreté du typage et la maintenabilité, en mettant en place un système d'internationalisation complet couvrant quatre langues (portugais, anglais, espagnol, français). Le site propose des compteurs animés déclenchés au défilement, via l'API Intersection Observer, qui mettent en valeur des statistiques impressionnantes et créent de l'engagement visuel sans sacrifier les performances. Pour le localisateur de boutiques, nous avons intégré Google Maps de façon interactive, avec 12 fiches de points de vente comprenant chacune une carte intégrée, un numéro de téléphone et les horaires d'ouverture. L'ensemble du design suit une approche mobile-first avec Tailwind CSS 4, garantissant des temps de chargement rapides et un rendu parfait sur tous les appareils. La validation des formulaires repose sur React Hook Form et les schémas Yup, offrant aux utilisateurs un retour en temps réel et évitant les erreurs de saisie.

Ce qui est inclus

Fonctionnalités clés

Support multilingue (PT/EN/ES/FR)
Compteurs de statistiques animés
Localisateur de points de vente interactif
Design responsive mobile-first
Validation des formulaires et gestion des erreurs
Transitions de page fluides
Animations CSS sur mesure
Routage optimisé pour le SEO
Performance

Résultats

95+/100
Score de performance
Performance Lighthouse : builds Vite rapides, React 19 optimisé, bundle JavaScript minimal
<1.2s
First Contentful Paint
Core Web Vitals (FCP) : ressources optimisées, images en chargement différé, CSS efficace
98/100
Score d'accessibilité
Accessibilité Lighthouse : HTML sémantique, attributs ARIA, navigation au clavier, contrastes conformes
A+
Qualité du code
Conformité au mode strict : couverture TypeScript à 100 %, aucun any implicite, typage rigoureux
Technologie

Technologies utilisées

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

Prêt à lancer votre projet ?

Voyons ensemble comment créer un site remarquable, adapté aux besoins de votre entreprise.

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