Tee-Tool

Das Tee-Tool ist eine browserbasierte Anwendung zur Verwaltung einer umfangreichen Teesammlung und zur Auswahl eines passenden Tees für den jeweiligen Tag.

Die Anwendung entstand als persönliches Projekt für meine Frau. Da ihre Sammlung viele unterschiedliche Teesorten umfasst, soll das Tool die tägliche Auswahl vereinfachen. Empfehlungen berücksichtigen unter anderem Wetter, Jahreszeit, Stimmung, Tageszeit und persönliche Filter.

Desktop-Ansicht des Tee-Tools mit geladenen Wetterdaten und drei passenden Tee-Empfehlungen — Nach dem Abruf der Wetterdaten und der Auswahl von Stimmung und Tageszeit schlägt das Tool passende Tees aus der vorhandenen Sammlung vor.

HTML5 CSS3 JavaScript JSON LocalStorage PHP OpenWeatherMap API MVC-Prinzip

Projektart

Eigenständige browserbasierte Webanwendung

Schwerpunkt

Empfehlungslogik, Wetterdaten und Bestandsverwaltung

Ziel

Schnelle und passende Tee-Auswahl aus einer großen Sammlung

Kurz erklärt: Das Tee-Tool verbindet eine persönliche Teesammlung mit aktuellen Wetterdaten und kombinierbaren Filtern. Dadurch entstehen passende Empfehlungen, ohne dass die gesamte Sammlung manuell durchsucht werden muss.

← Zurück zu den Projekten Tee-Tool öffnen

Die Idee entstand aus einer alltäglichen Situation: Bei einer großen Teesammlung ist es nicht immer leicht, spontan eine passende Sorte auszuwählen.

Statt jedes Mal alle vorhandenen Packungen durchzugehen, sollte eine übersichtliche Anwendung entstehen, die die Entscheidung erleichtert. Die Basisdaten der Tees werden zentral in einer JSON-Datei gepflegt. Ergänzungen, Favoriten und Bestandsänderungen lassen sich direkt über die Benutzeroberfläche verwalten.

Übersichtliche Sammlung

Jede Teesorte wird in einer eigenen Kachel dargestellt.

Persönliche Auswahl

Empfehlungen richten sich nach der jeweiligen Situation.

Flexibel erweiterbar

Neue Tees lassen sich direkt in der Anwendung ergänzen.

Projektidee: Eine große Sammlung soll übersichtlich bleiben und im Alltag tatsächlich leichter nutzbar werden.

Die Anwendung kombiniert Empfehlungen, Wetterdaten, Filter und Bestandsverwaltung in einer gemeinsamen Oberfläche.

Wetterbasierte Empfehlungen

Aktuelle Wetterdaten werden geladen und in die Auswahl einbezogen.

Kombinierbare Filter

Tees lassen sich nach Sorte, Jahreszeit, Wetter, Stimmung, Tageszeit und Koffeingehalt eingrenzen.

Flexible Auswahl

Je nach Wunsch werden ein, drei oder fünf passende Tees vorgeschlagen.

Favoriten

Persönliche Lieblingstees können markiert und schneller wiedergefunden werden.

Bestandsverwaltung

Verfügbare Mengen können reduziert, aufgefüllt und überwacht werden.

Statistische Übersicht

Kennzahlen und zuletzt ausgewählte Tees erleichtern den Überblick über die Sammlung.

Zusätzlich stehen eine Suchfunktion nach Name, Sorte und Geschmacksrichtung sowie Hinweise bei niedrigem Bestand zur Verfügung. Dadurch bleibt die Bedienung auch bei einer umfangreichen Sammlung übersichtlich.

Nutzen: Die wichtigsten Funktionen greifen ineinander und reduzieren die tägliche Suche nach einem passenden Tee auf wenige Klicks.

Neue Tees lassen sich direkt über ein eigenes Formular in der Anwendung ergänzen.

Neben Name, Sorte und Bestand können geeignete Jahreszeiten, Wetterlagen, Stimmungen, Tageszeiten und Geschmacksrichtungen hinterlegt werden. Neu eingetragene Tees werden anschließend automatisch bei passenden Empfehlungen berücksichtigt.

Formular des Tee-Tools zum Hinzufügen eines neuen Tees mit Eigenschaften und Bestand — Neue Tees lassen sich mit Sorte, Bestand und passenden Eigenschaften dauerhaft zur persönlichen Sammlung hinzufügen.

Erweiterbarkeit: Die Sammlung kann gepflegt werden, ohne dass dafür der Programmcode verändert werden muss.

Die Filter lassen sich miteinander kombinieren und ermöglichen dadurch eine gezielte Auswahl passend zur jeweiligen Situation.

So kann beispielsweise nach einem koffeinfreien Tee für den Abend, einer wärmenden Sorte für kalte Tage oder einem fruchtigen Tee für den Sommer gesucht werden. Es werden nur Teesorten angezeigt, die sämtliche ausgewählten Kriterien erfüllen.

Jede Teesorte besitzt zusätzlich einen hinterlegten Bestand. Wird ein Tee ausgewählt, kann die verfügbare Menge reduziert werden. Neue Packungen lassen sich über die Funktion „Auffüllen“ ergänzen. Niedrige Bestände werden gesondert hervorgehoben.

Situationsabhängige Auswahl

Passende Sorten für Tageszeit, Wetter und Stimmung.

Niedrigbestand

Hinweis, wenn einzelne Sorten bald nachgekauft werden sollten.

Bestand auffüllen

Neue Packungen können direkt in der Anwendung ergänzt werden.

Das Tee-Tool wurde von mir als eigenständige browserbasierte Anwendung geplant, strukturiert und umgesetzt.

Dazu gehörten die Aufteilung der JavaScript-Logik nach dem MVC-Prinzip, die Entwicklung der Filter- und Empfehlungslogik, die Einbindung aktueller Wetterdaten über eine PHP-Schnittstelle sowie die lokale Speicherung von Favoriten, Beständen und ergänzten Tees.

Konzeption

Ableitung der Funktionen aus einer konkreten Alltagssituation.

JavaScript-Logik

Umsetzung der Filter, Empfehlungen und Benutzerinteraktionen.

Datenhaltung

Strukturierte Teedaten sowie lokale Speicherung veränderbarer Werte.

API-Anbindung

Abruf aktueller Wetterdaten über eine PHP-Schnittstelle.

Oberfläche

Responsive Darstellung für Desktop und mobile Endgeräte.

Weiterentwicklung

Schrittweise Ergänzung neuer Funktionen anhand praktischer Nutzung.

Mein Fokus: Aus einer persönlichen Idee entstand eine vollständige Anwendung mit echtem Alltagsnutzen und einer erweiterbaren technischen Struktur.

Die Anwendung wurde mit HTML, CSS und JavaScript umgesetzt. Die einzelnen Verantwortlichkeiten sind bewusst voneinander getrennt.

Die Basisdaten der Tees liegen getrennt vom Programmcode in einer JSON-Datei. Ergänzungen aus der Benutzeroberfläche, Favoriten und Bestandsänderungen werden lokal im Browser gespeichert. Dadurch können Werte angepasst werden, ohne die eigentliche Programmlogik verändern zu müssen.

Die Wetterdaten werden über eine PHP-Schnittstelle abgerufen und in die Empfehlungslogik einbezogen. Der API-Schlüssel bleibt dadurch außerhalb des sichtbaren Frontend-Codes.

Model

Verwaltung der Teedaten, Bestände, Favoriten und Filterlogik.

View

Darstellung der Tee-Karten, Wetterinformationen und Bedienelemente.

Controller

Verbindung zwischen Datenmodell und Benutzeroberfläche.

HTML5 CSS3 JavaScript mit ES-Modulen JSON LocalStorage PHP OpenWeatherMap API Responsive Design

Technischer Kern: Teedaten, Benutzerinteraktionen und externe Wetterdaten werden so miteinander verbunden, dass die Anwendung flexibel gepflegt und erweitert werden kann.

Die Benutzeroberfläche passt sich an unterschiedliche Bildschirmgrößen an und bleibt auch auf Smartphones gut bedienbar.

Auf schmalen Displays werden Filter, Wetterdaten, Statistiken und Empfehlungen untereinander angeordnet. Dadurch bleiben alle wichtigen Funktionen ohne horizontales Scrollen erreichbar.

Mobile Ansicht des Tee-Tools mit Filtern, Wetterdaten und Tee-Empfehlungen — Die responsive Oberfläche passt sich an schmale Smartphone-Displays an und bleibt vollständig bedienbar.

Mobile Nutzung: Das Tool kann auch direkt am Smartphone genutzt werden, wenn eine schnelle Empfehlung benötigt wird.

Entstanden ist eine vollständig nutzbare Webanwendung, die eine große Teesammlung übersichtlich verwaltet und die tägliche Auswahl durch passende Empfehlungen erleichtert.

Das Tool verbindet eine verständliche Oberfläche mit einer erweiterbaren Datenstruktur, lokalen Speicherfunktionen und aktuellen Wetterdaten. Dadurch bleibt es auch bei einer wachsenden Sammlung flexibel nutzbar.

Alltagstauglich

Passende Vorschläge mit wenigen Eingaben.

Erweiterbar

Neue Tees und zusätzliche Eigenschaften können ergänzt werden.

Mobil nutzbar

Bedienung auf Desktop, Tablet und Smartphone.

Fazit: Das Tee-Tool zeigt, wie eine persönliche Idee durch strukturierte Webentwicklung zu einer praktischen und dauerhaft nutzbaren Anwendung werden kann.