Webdesign & Entwicklung

Yellow Metric - Arranjos e Transformações

Website eines Unternehmens für Änderungsschneiderei und chemische Reinigung mit 12 Filialen in Portugal und Spanien. Mit vollständigem Mehrsprachensystem (PT/EN/ES/FR), animierten Statistikzählern, die über 8 Millionen Änderungen ausweisen, interaktiven Leistungsseiten und umfassender Filialsuche mit eingebetteten Google Maps für jeden Standort.

Umgesetzt mit React 19, TypeScript und Tailwind CSS 4, mit React Router DOM 7 für die Navigation, React Hook Form mit Yup-Validierung, scroll-gesteuerten Zählern über die Intersection Observer API, eigenen CSS-Keyframe-Animationen und Strict Mode mit individuellen i18n-Hooks.

Abschlussdatum: Mai 2026
Live-Website besuchen
Projektdetails

Überblick

Branche

Einzelhandel & Verbraucherdienstleistungen (Änderungsschneiderei & chemische Reinigung)

Leistungsumfang

Vollständige Gestaltung und Entwicklung der Website mit mehrsprachiger Inhaltsverwaltung, interaktiven Leistungsübersichten, Filialsuche mit Google-Maps-Anbindung, Kontaktformular mit Validierung und responsivem Design für alle Endgeräte

Zeitrahmen

3–4 Wochen von der Einrichtung bis zur Fertigstellung

Die Ausgangslage

Herausforderung

Yellow Metric, ein führender portugiesischer Anbieter für Änderungsschneiderei und chemische Reinigung mit 12 Filialen in Portugal und Spanien, brauchte eine moderne digitale Präsenz, die der hochwertigen Markenpositionierung entspricht. Die bestehende Website bot keine Mehrsprachigkeit, obwohl das Unternehmen Märkte in Portugal und Spanien sowie internationale Touristen bedient, und zeigte die beeindruckende operative Größe nicht (über 8 Millionen Änderungen, über 331.000 Reinigungsleistungen, über 138.000 zufriedene Kundinnen und Kunden). Gefragt war eine Lösung, die auf allen Geräten reibungslos funktioniert, schnell lädt und einen intuitiven Weg bietet, die nächstgelegene Filiale zu finden und das gesamte Leistungsangebot zu verstehen.

Unser Ansatz

Lösung

Wir haben eine vollständig individuelle React-Website mit TypeScript für Typsicherheit und Wartbarkeit gebaut und ein umfassendes Internationalisierungssystem für vier Sprachen umgesetzt (Portugiesisch, Englisch, Spanisch, Französisch). Scroll-gesteuerte animierte Zähler auf Basis der Intersection Observer API präsentieren die beeindruckenden Kennzahlen und schaffen visuelles Interesse, ohne die Performance zu beeinträchtigen. Für die Filialsuche haben wir eine interaktive Google-Maps-Anbindung mit 12 Standortkarten umgesetzt, jeweils mit eingebetteter Karte, Telefonnummer und Öffnungszeiten. Das gesamte Design folgt mit Tailwind CSS 4 dem Mobile-First-Prinzip und sichert kurze Ladezeiten sowie eine einwandfreie Darstellung auf allen Geräten. Die Formularvalidierung wurde mit React Hook Form und Yup-Schemavalidierung umgesetzt und gibt Nutzern unmittelbares Feedback, wodurch fehlerhafte Übermittlungen vermieden werden.

Was enthalten ist

Wichtigste Funktionen

Mehrsprachigkeit (PT/EN/ES/FR)
Animierte Statistikzähler
Interaktive Filialsuche
Responsives Mobile-First-Design
Formularvalidierung & Fehlerbehandlung
Flüssige Seitenübergänge
Individuelle CSS-Animationen
SEO-optimiertes Routing
Ergebnisse

Ergebnisse

95+/100
Performance-Wert
Lighthouse-Performance – schnelle Vite-Builds mit optimiertem React 19 und minimalem JavaScript-Bundle
<1.2s
First Contentful Paint
Core Web Vitals (FCP) – optimierte Assets, Bilder mit Lazy Loading, effizientes CSS
98/100
Barrierefreiheits-Wert
Lighthouse-Barrierefreiheit – semantisches HTML, ARIA-Labels, Tastaturnavigation, ausreichende Kontrastverhältnisse
A+
Codequalität
Strict-Mode-Konformität – 100 % TypeScript-Abdeckung, kein implizites any, durchgängige Typsicherheit
Technologie

Technologie-Stack

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

Bereit, Ihr Projekt zu starten?

Sprechen wir darüber, wie wir eine beeindruckende Website schaffen, die genau zu Ihren geschäftlichen Anforderungen passt.

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