Store-Finder

Web-Apps
Version: 1.0.0
Technologie: HTML, CSS, Vanilla JavaScript, Leaflet, OpenStreetMap
Kategorie: Web-Apps

Beschreibung

Store-Finder ist ein fiktiver Filialfinder für die „Bäckerei Goldkrume“. Ziel war, eine klare und alltagstaugliche Oberfläche zu bauen, in der Nutzer Filialen schnell finden und direkt auf der Karte öffnen können.

Die Anwendung kombiniert eine interaktive Karte mit einer strukturierten Filialliste, Suchfunktion, Service-Filtern und tagesaktueller Öffnungsanzeige. Der Fokus lag auf Übersicht, Lesbarkeit und schneller Orientierung auf Desktop und Mobile.

Technik

Das Projekt ist vollständig mit HTML, CSS und Vanilla JavaScript umgesetzt. Die Kartendarstellung basiert auf Leaflet mit OpenStreetMap-Kacheln und dynamisch gerenderten Markern.

Die Filialdaten werden aus einer strukturierten JSON-Datei geladen, normalisiert und anschließend für Suche, Filterung, Öffnungszeiten-Status und Popup-Inhalte verarbeitet.

Zusätzlich wurden Service- und Ausstattungsmerkmale integriert, damit Filialen nicht nur räumlich, sondern auch nach relevanten Eigenschaften schnell vergleichbar sind.

Technische Highlights

  • Interaktive Leaflet-Karte mit dynamischen Filial-Markern und eigener Legende
  • Suche nach Filialname, Ort, PLZ, Services und Öffnungszeiten-Inhalten
  • Filterlogik für Frühstücksbuffet und Lieferservice mit Live-Aktualisierung
  • Statusanzeige „Geöffnet/Geschlossen“ auf Basis der aktuellen Uhrzeit
  • Wochenübersicht der Öffnungszeiten inklusive Hervorhebung des aktuellen Tages
  • Kompakte Popup-Karten mit Standort, Status und Service-Hinweisen
  • Responsive Oberfläche mit optimierten Panel-Höhen für mobile Geräte

Was ich dabei gelernt habe

Bei Store-Finder habe ich gelernt, wie wichtig die saubere Verzahnung von Datenlogik und UI ist: Suchfilter, Markerzustände, Listenansicht und Öffnungszeiten müssen jederzeit konsistent bleiben. Besonders wertvoll war die Arbeit an robuster Normalisierung und klaren Zustandsübergängen, damit die Anwendung trotz vieler dynamischer Interaktionen stabil und verständlich bleibt.