Stationsübersicht
Wiederverwendbare Karten für Tankstellen und ihre Preisangaben.
Früher Web-Prototyp · Preise & Umgebung
Sprit
Preise vergleichen. Im Kontext der Umgebung.
Ein früher SvelteKit-Prototyp für den Vergleich von Kraftstoffpreisen. Stationskarten, eine Kartenansicht und serverseitige API-Routen verbinden Preisdaten mit der Umgebung. Das Projekt enthält außerdem automatisierte Browser- und Helfertests.
- Plattformen
- Web
01 · Die Idee
Wofür die App
entstanden ist.
Die Aufgabe
Ein Preis alleine sagt wenig über die beste Station aus. Entfernung, Standort und Detailinformationen sollen mit dem Angebot gemeinsam betrachtet werden können.
Die Umsetzung
Svelte-Komponenten bilden Stationen, Kartenmarker und Bedienelemente ab. SvelteKit übernimmt Seitenrouten und serverseitige Datenzugriffe. Helfer trennen Standortlogik und Datenaufbereitung von der Darstellung.
02 · Funktionen
Was die App
möglich macht.
Räumliche Orientierung
Mapbox-Kartenkomponente und eigene Preismarker.
Stationsdetails
Eine eigene Detailroute für ausgewählte Stationen.
Serverseitige API
SvelteKit-Routen kapseln die Abfrage des Preis-Anbieters.
Standort & Zustand
Eigene Helfer für Position und Svelte-Stores für gemeinsamen UI-Zustand.
Automatisierte Prüfungen
Playwright für Browserabläufe und Vitest für Datenhelfer im vorhandenen Projekt.
03 · Einblicke
Direkt
aus der App.
Browser-Aufnahmen der originalen SvelteKit-Oberfläche mit fiktiven Musterstationen und Beispielpreisen. Die Kartendarstellung stammt von Mapbox und OpenStreetMap.
04 · Technik
Die Technik
dahinter.
- Programmiersprachen
- TypeScript · JavaScript
- Plattformen
- Web
- Technologien
- SvelteKit · Svelte · Mapbox GL · SCSS · Playwright · Vitest
So ist die Anwendung aufgebaut
- 01Svelte Komponenten und Stores
- 02SvelteKit Seiten und Stationsdetails
- 03Server-Routen und Preis-Datenhelfer
- 04Preis-API · Mapbox
Browser und Server trennen
Serverseitige Preisabfragen stehen getrennt von den sichtbaren Stationskomponenten.
Kleine UI-Bausteine
Karten, Marker, Tags und Bedienelemente werden als eigenständige Svelte-Komponenten zusammengesetzt.
Testdaten für reproduzierbare Abläufe
Der Projektstand enthält eine Mock-Konfiguration für die vorhandenen automatisierten Prüfungen.
05 · Entwicklung
Von der Oberfläche
bis zum System.
Datengrundlage
Serverseitige Abfrage und Aufbereitung von Stations- und Preisdaten.
Vergleichsoberfläche
Stationskarten und Kartenmarker in Svelte.
Prüfungen
Browser- und Helfertests mit einer separaten Mock-Konfiguration.