Full-Stack-Anwendung · Automotive Commerce

Tire Shop

Ein Online-Erlebnis für den Reifenkauf mit Produktsuche, Fahrzeugzuordnung, Kundenkonten und Warenkorbverwaltung.

Projektüberblick

Die Herausforderung.

Ein großer Reifenkatalog sollte sowohl für Kunden mit bekannten Reifendaten oder Fahrzeugmodell als auch für noch unentschlossene Nutzer einfach zugänglich sein.

Was gelöst werden musste

Kunden mit sehr unterschiedlichem Wissen über Reifen und Fahrzeuge unterstützen.
Katalogdaten, Fahrzeugfilter, Authentifizierung und Warenkorb in einer Reise koordinieren.
Dichte Produkt- und Filteroberflächen auch auf kleineren Screens nutzbar halten.

Die Lösung.

Umgesetzt wurde eine React Single-Page-Anwendung mit Express- und MySQL-Backend. Kunden können nach Reifendimensionen oder Fahrzeugmodell suchen, Marken und Produkte durchsuchen, ein Konto verwalten und einen Warenkorb führen.

Wie die Lösung darauf reagiert

Parallele Suchwege nach Reifendimensionen, Fahrzeugmodell und Hersteller.
Klare Frontend-Services für API-, Konto- und Warenkorbverantwortung.
Responsive Filter- und Produktlayouts mit jederzeit sichtbarer nächster Aktion.

Technologie

ReactReact RouterJavaScriptExpress.jsMySQLSCSSJWT

Quellcode auf GitHub ansehen

Produktfunktionen

Was umgesetzt wurde.

Suche nach Reifengröße und Fahrzeugmodell

Hersteller- und Produktnavigation

Registrierung und Kontoverwaltung

Persistenter Warenkorbprozess

So wurde es gebaut

Entscheidungen hinter dem Produkt.

Produktansatz

Die Produktsuche orientiert sich an den Fragen, die Kunden bereits mitbringen: Reifendimensionen, Fahrzeugmodell, Saison und Hersteller. Produkt-, Konto- und Warenkorbabläufe liegen in einer gemeinsamen React-Anwendungshülle.

Technische Grundlage

React Router koordiniert die Single-Page-Anwendung, während Service-Module eine Express- und MySQL-API anbinden. JWT-Authentifizierung schützt Konto und Warenkorb; modularer SCSS passt die dichte Katalogoberfläche an unterschiedliche Breakpoints an.