October 2023

Heurig

Der Launch einer Heuriger-Suchmaschine

  • WEBSOCKET
  • ELASTICSEARCH
  • GIT
  • DOCKER
  • CI CD
  • ANGULAR
  • GITHUB
  • TAILWIND CSS
  • EXPRESS
  • SASS
  • LINUX
  • NEST JS
  • REST
  • TYPESCRIPT
  • DART
  • MARIADB
  • SWAGGER
  • Leaflet
Live-Projekt ansehen
Heurig

Die Idee hinter Heurig entstand aus einem einfachen Wunsch: Besucher:innen traditioneller österreichischer Heurige in Niederösterreich, Wien und der Steiermark eine Plattform zu bieten, die speziell auf ihre Bedürfnisse zugeschnitten ist. In einer Welt, die von großen Playern wie Google Maps und TripAdvisor dominiert wird, wollten wir eine Nische bedienen – eine Suchmaschine, die lokales Flair, kulinarische Empfehlungen und die einzigartige Atmosphäre der Heurigen in den Mittelpunkt stellt.


Unser Ziel war eine freundliche, moderne App, die die besten Heurigen in der Nähe mit wenigen Klicks findet. Der Fokus lag nicht nur auf der Suche selbst, sondern auf dem Aufbau einer tieferen Verbindung zwischen Gästen und Wirtsleuten. Durch gezielte Filter, die für künftige Versionen geplant sind – nach regionalen Gerichten oder Nutzerbewertungen –, wollen wir die Entscheidung der Nutzer:innen noch weiter vereinfachen.


Technisch entschieden wir uns für ein modernes, skalierbares Setup. Das Backend läuft auf Node.js und dem NestJS-Framework mit TypeScript. Diese Wahl ermöglichte uns eine saubere, modulare Architektur, die über TypeORM mühelos mit unserer MySQL-Datenbank kommuniziert. Klar strukturierte REST-Endpunkte ermöglichen das Finden, Erstellen oder Löschen von Heurigen nach Suchbegriff, eindeutiger ID oder sogar GPS-Koordinaten, und separate Konfigurationsdateien halten Umgebungen wie Entwicklung und Produktion sauber getrennt.


Das Frontend basiert auf dem Ionic-Framework mit Angular. Die Kombination gibt uns heute eine responsive Weboberfläche und morgen einen Weg zu einer nativen mobilen App – von besonderem Interesse angesichts des wachsenden Anteils mobiler Nutzer:innen. Wir investierten früh in das Design: Detaillierte Wireframes und hochauflösende Mockups, erstellt in Adobe XD, bildeten die Grundlage für eine attraktive, intuitive Benutzeroberfläche. Eigene Komponenten, wie unser eigens entwickeltes Split-Layout, sorgen dafür, dass die App ebenso gut aussieht wie sie sich bedienen lässt.


Ein besonderes Highlight ist die Suche. Mit einem in PHP implementierten Suchbaum – einer Trie-Struktur – bauten wir eine Autovervollständigung, die verschiedene Datensätze, wie Heurige und Straßennamen, unterschiedlich behandelt. Dank regelmäßiger Aktualisierungen aus der Datenbank bleiben die Vorschläge aktuell und ermöglichen eine schnelle, präzise Suche.


Wie realisiert man eine komplexe Anwendung wie diese aus infrastruktureller Sicht? Hier kam moderne Containerisierung ins Spiel. Mit Docker packten wir sowohl das NestJS-Backend als auch die Ionic-App in isolierte Container, was einfaches Skalieren und flexibles Management ermöglicht. Portainer – eine webbasierte Verwaltungsoberfläche – behält den Überblick über unsere Container und ermöglicht das einfache Ausrollen von Änderungen. Die Plattform wird auf einem Linux-basierten vServer gehostet, den wir über Plesk verwalten, das SSL-Zertifikate, Backups und Firewall-Regeln unterstützt und Docker so integriert, dass unsere Anwendungen unabhängig von der zugrundeliegenden Serverkonfiguration laufen.


Für Versionskontrolle und das gesamte Projektmanagement verwenden wir GitHub. Über den Code hinaus nutzen wir GitHub Projects zur Organisation von Aufgaben und Backlogs – ein wichtiges Tool, um in einem iterativen, agilen Prozess den Überblick zu behalten. Automatisierte Deployments via GitHub-Webhooks sorgen dafür, dass Code-Änderungen direkt in neue Builds fließen und die Plattform stets aktuell ist.


Enge Teamarbeit war ein entscheidender Erfolgsfaktor. Über mehrere Semester wuchs die Disziplinen zu einer harmonischen Einheit zusammen: Während sich einige intensiv auf Frontend und UI konzentrierten, fokussierten sich andere auf ein stabiles, performantes Backend. Tägliche Standups und kontinuierliche Abstimmung halfen uns, Herausforderungen gemeinsam zu meistern – ob bei der Integration der Leaflet-Karte oder der Erweiterung der Fehlerbehandlung.


Am Ende ist Heurig weit mehr als eine Suchmaschine. Es ist ein Projekt, das moderne Webtechnologien, intelligente Suchalgorithmen und agile Methoden in einem stimmigen Ganzen vereint. Unser Ansatz, lokales Flair und kulinarische Empfehlungen in den Vordergrund zu stellen, bietet Nutzer:innen ein authentisches Erlebnis, das weit über die bloße Suche hinausgeht. Mit Blick auf die Zukunft planen wir weitere Erweiterungen, um die Plattform noch flexibler und benutzerfreundlicher zu machen – stets mit dem Ziel, das Heurigen-Erlebnis auf ein neues Level zu heben.

Gallery