Wanderwise – KI-gestützte Reiseplanung

Wanderwise ist eine Plattform zur KI-basierten Reiseplanung, die Nutzern personalisierte Reiserouten und Empfehlungen bietet.
Die Besonderheit liegt darin, die Interessen und Reisevorlieben der Nutzer in einem einfachen Prozess zu ermitteln und eine indivualisierte Reiseempfehlung zu generieren. Orte auf der Reiseroute können durch Anbindung der Google Maps API direkt abgerufen und gespeichert werden.

Features

• KI-gestützte Empfehlungen
  Mithilfe der OpenAI API werden personalisierte Vorschläge für Reiseziele, Aktivitäten und Routen generiert.

• Google Maps Integration
  Anbindung der Google Maps API zur Anzeige und Auswahl von Orten direkt in der Anwendung.

• Interaktive Reiseplanung
  In einem mehrstufigen Prozess werden die Reisevorlieben eines Nutzers ermittelt, um eine angepasste Reiseempfehlung zu erstellen.

• Umfassende Destination-Datenbank
  Informationen zu Ländern, Regionen und Aktivitäten werden übersichtlich aufbereitet und interaktiv dargestellt.

• Admin Interface
  Verwaltung und Pflege der Reisedaten über eine gesicherte Administrationsoberfläche.

• Modernes UI/UX Design
  Framer Motion, Lottie-Animationen und TailwindCSS sorgen für ein flüssiges und reaktives Nutzererlebnis.

Technischer Aufbau (Tech Stack)

Frontend

• Framework: Next.js
• Sprache: TypeScript / React
• UI-Komponenten: shadcn/ui
• Styling: TailwindCSS
• Animationen: Framer Motion, Lottie
• State Management: TanStack Query (React Query)
• Formvalidierung: Zod

Backend

• Prisma ORM mit PostgreSQL
• Next.js API Routes als REST-Schnittstellen
• OpenAI API Integration für KI-Funktionen
• Google API Integration für Maps-Daten
• Upstash Redis für Rate Limiting
• TypeScript für durchgehende Typensicherheit

DevOps & Infrastruktur

• Hosting über Vercel
• GitHub Actions (CI/CD) für automatisierte Builds und Deployments
• Prisma Migrations bei jedem Deployment
• Serverless Architecture

Authentifizierung & Sicherheit

• Rate Limiting mit Upstash Redis
• Zod-Validierung für sichere Eingaben sowohl im Frontend als auch im Backend
• Gesicherte Datenbankzugriffe über Prisma

Implementierung & Architektur

Frontend

Die Anwendung basiert auf einer Serverless Single-Page-Architecture mit Server-Side Rendering (SSR) durch Next.js. Alle Daten werden über React Query asynchron geladen, um eine flüssige Nutzererfahrung zu gewährleisten.
Das UI ist responsiv gestaltet und nutzt moderne Animationstechniken für ein ansprechendes Nutzererlebnis.

Backend

Die Backend-Logik ist in den Next.js API Routes implementiert und bietet REST-Endpunkte für die Frontend-Kommunikation.
Die Integration der OpenAI und Google APIs erfolgt serverseitig, um API-Schlüssel zu schützen und die Sicherheit zu gewährleisten.
Daten werden in einer PostgreSQL-Datenbank verwaltet, die über Prisma ORM angesprochen wird.

Authentifizierung & Sicherheit

Rate Limiting wird über Upstash Redis implementiert, um Missbrauch der API zu verhindern.
Eingaben werden sowohl im Frontend als auch im Backend mit Zod validiert, um Sicherheit und Datenintegrität zu gewährleisten.

Deployment

Das Deployment erfolgt automatisiert über GitHub Actions bei jedem Push in den Hauptbranch.

"How-it-works"

1. Interessenanalyse: Der Nutzer durchläuft einen mehrstufigen Prozess, in dem seine Reisevorlieben und Interessen abgefragt werden.
2. KI-Generierung: Basierend auf den Nutzerangaben generiert die OpenAI API eine personalisierte Reiseempfehlung.
3. Ortsauswahl: Die Google Maps API wird genutzt, um relevante Orte und Aktivitäten anzuzeigen und auszuwählen.
4. Reiseplan-Erstellung: Die generierte Reiseroute wird dem Nutzer präsentiert, der sie speichern oder weiter anpassen kann.

Herausforderungen und Lösungsansätze

• API-Integration: Sicherstellung der nahtlosen Integration von OpenAI und Google APIs durch serverseitige Implementierung in Next.js API Routes.
• Personalisierung: Entwicklung eines effektiven mehrstufigen Prozesses zur Ermittlung der Nutzerpräferenzen für maßgeschneiderte Empfehlungen.
• Performance: Nutzung von React Query für effizientes Datenmanagement und schnelle Ladezeiten.
• Sicherheit: Implementierung von Rate Limiting und umfassender Eingabevalidierung zur Sicherung der Anwendung gegen Missbrauch und fehlerhafte Daten.

Projektkontext

• Rolle: Full-Stack Entwicklung
• Verantwortlichkeiten:
  • Vollständige Konzeption, Design, Entwicklung und Hosting
  • Integration der OpenAI API und Google Maps API
• Entwicklungszeitraum: 2022-2023
• Arbeitsweise: Einzelentwicklung mit Fokus auf sauberen Code und skalierbare Architektur
• Hosting & Wartung: durch mich