Arbeitsdetail

Kontext

Photovoltaikanlagen erzeugen große Mengen an Energiedaten, die ohne geeignete Darstellung schwer zu interpretieren sind:

• Verbrauch der Wohnung oder Anlage,
• Photovoltaikproduktion,
• Energieaustausch mit dem Netz,
• und potenziell mit Speichersystemen.

Solar zentralisiert diese Informationen und stellt sie visuell, kohärent und zugänglich in einem einzigen Web-Dashboard dar.

Was es löst

Die Anwendung ermöglicht:

• Energieverhalten nach Tag, Monat oder Jahr visualisieren
• Produktion, Verbrauch und Export/Import vergleichen
• Die Energiebilanz sofort verstehen
• Datenimporte und Backups verwalten (Admin-Benutzer)
• Die Oberfläche passt Texte und Steuerungen je nach gewähltem Zeitraum an.

Alles unter Nutzung ausschließlich der bereits normalisierten und konsolidierten Daten der Backend-API.

Views-Architektur und Komponenten-Wiederverwendung

Im Frontend gibt es drei Haupt-Views: Daily, Monthly und Yearly.

Alle drei verwenden denselben Chart-Komponent (gleiches Chart-Typ und gleiche visuelle Basis). Was sich zwischen den Views ändert:

• der Perioden-Selector (Datum / Monat / Jahr),
• die Datenaggregation (Stunden / Tage / Monate),
• und die Labels und Texte, die dem Nutzer angezeigt werden.

Das Diagramm ist dasselbe; der Unterschied liegt in der Datenlogik und der Periodensteuerung.

Hauptfunktionen

Tagesansicht

• Datums-Selector
• Diagramm mit 24 stündlichen Werten
• Visualisierung des Energieflusses:
• Photovoltaikproduktion

Monatsansicht

• Monats-Selector
• Diagramm mit Daten pro Tag aggregiert
• Klare Vergleichbarkeit von Produktion und Verbrauch über den Monat

Jahresansicht

• Jahres-Selector
• Diagramm mit Daten pro Monat aggregiert
• Globale Sicht auf das jährliche Energieverhalten

Verwaltung und Administration

Der Administratorzugang aktiviert zusätzliche Funktionen:

• Mehrfaches CSV-Upload
• Download von Backups
• Einfache Datenverwaltung über die Weboberfläche

Die Option „Profil aktualisieren“ ist sichtbar, zeigt aber aktuell einen Hinweis „Funktion in Arbeit“.

Integration mit der Solar-API

Das Frontend konsumiert ausschließlich die Backend-API:

• POST /users/login — Authentifizierung
• GET /photovoltaics/date/:date — tägliche, monatliche oder jährliche Daten
• POST /photovoltaics/upload — CSV-Upload (Admin)
• GET /photovoltaics — Download des kompletten Backups

Die Basis-URL der API wird über Umgebungsvariablen verwaltet (VITE_API_BASE_URL).

Sicherheit und Zugriffskontrolle

• Authentifizierung über Login
• Token und Rolle werden in sessionStorage gespeichert
• Die admin-Rolle aktiviert den Bereich „Verwalten“
• Keine lokale Persistenz sensibler Daten

Die Frontend-Sicherheit ist an die API angelehnt und hält die Verantwortlichkeiten getrennt.

Architektur und technischer Stack

• Framework: Vue 3
• Build-Tool: Vite
• Routing: Vue Router
• UI: Vuetify
• Charts: ECharts (via vue-echarts)
• HTTP: Axios
• Mobile: Capacitor (Basiskonfiguration enthalten)

Android / Mobile

• Capacitor-Konfiguration enthalten
• Abhängigkeiten installiert
• Noch keine nativen Plattformen generiert (Android/iOS)

Es gibt einen spezifischen Commit, in dem Capacitor für eine zukünftige Android-App hinzugefügt wurde.

Deployment und Status

• Anwendung auf Vercel deployed
• Standard-Build vite build mit Ausgabe dist
• Getrennte Umgebungen über .env

🔗 Demo in Produktion

🔗 GitHub-Repository (Frontend)

Was dieses Projekt zeigt

Dieses Projekt zeigt meine Fähigkeit,:

• Entwurf von Frontends für reale Daten
• Kohärente Wiederverwendung von Komponenten
• Integration fortgeschrittener Datenvisualisierung
• Konsum komplexer APIs ohne Logik zum Client zu verschieben
• Denken an Web- und Mobile-Deployments desde Design
• Aufbau von Software in Produktion, nicht Demos

Projektbilder