Spritblick | Projekt

Beschreibung

Spritblick entstand aus einem ganz einfachen Alltagsproblem: bestehende Tankpreis-Seiten sind oft überladen, werbelastig und gerade mobil unnötig unübersichtlich. Ziel war deshalb eine eigene, deutlich schlankere Lösung, bei der relevante Preise schnell, klar und ohne Ablenkung sichtbar sind.

Aus der ersten Version mit wenigen festen Stationen wurde Schritt für Schritt eine kleine Web-App mit Ortssuche, Radius- und Kraftstofffilter, Ranking, Favoriten und responsive UI für Desktop und Mobile. Der Fokus lag dabei nicht nur auf der Anzeige von Preisen, sondern auf einer sauberen, ruhigen Nutzeroberfläche und einer alltagstauglichen Bedienung.

Technik

Frontend-seitig ist Spritblick mit HTML, CSS und Vanilla JavaScript umgesetzt. Die Oberfläche rendert Suchergebnisse dynamisch, unterstützt verschiedene UI-Zustände wie Trefferlisten, leere Ergebnisse und Statusanzeigen und bietet eine konsistente Nutzung auf Desktop und mobilen Geräten. Auch Light- und Dark-Mode sind integriert.

Die Preisdaten werden serverseitig über PHP verarbeitet. Dabei kommt eine robuste Fallback-Logik zum Einsatz, damit die Anwendung auch bei temporären Problemen einzelner Datenquellen stabil bleibt. Ergänzt wird das Ganze durch lokale Speicherung für Favoriten und Theme-Präferenzen sowie eine insgesamt bewusst frameworkfreie Umsetzung mit Fokus auf Klarheit, Performance und Kontrolle.

Technische Highlights

Ortssuche mit dynamischer Trefferliste für Tankstellen in der Nähe
Filter nach Radius und Kraftstoffart
Sortierung der Ergebnisse nach Preis, Entfernung und Name
Hervorhebung des günstigsten Ergebnisses für schnelle Orientierung
Favoriten-Funktion mit lokaler Speicherung im Browser
Dynamische Kartenansicht mit Preis, Status und Stationsdetails
Leere Zustände und klare UI-Rückmeldungen bei fehlenden Treffern
Light-/Dark-Mode mit persistenter Theme-Präferenz
Responsive Interface für Desktop und Mobile
Serverseitige Preisverarbeitung über PHP mit robuster Fallback-Logik
Frameworkfreie Umsetzung mit HTML, CSS und Vanilla JavaScript

Was ich dabei gelernt habe

Bei Spritblick habe ich vor allem gelernt, ein Frontend nicht nur technisch, sondern auch als Produkt zu denken. Aus einer kleinen, festen Preisübersicht wurde mit der Zeit eine deutlich flexiblere Anwendung, bei der Suchlogik, Filterung, Zustände, Favoriten und responsive Nutzung sauber zusammenspielen müssen.

Besonders wertvoll war für mich die Kombination aus UI-Polish und robuster Datenlogik: also nicht nur etwas darzustellen, sondern auch sinnvoll mit leeren Ergebnissen, wechselnden Datenständen und Fallback-Szenarien umzugehen. Genau dieses Zusammenspiel aus Nutzbarkeit, Klarheit und technischer Stabilität hat das Projekt für mich besonders spannend gemacht.