Feature Planungs Tool für einen Product Owner — Case Study
Case Study · Web-App

Feature Planungs­tool für einen Product Owner

Eine maßgeschneiderte Web-Anwendung, mit der das Team seine Produktentwicklung plant, priorisiert und visualisiert — inklusive KI-gestützter Ideenfindung.

Kunde
Product Owner
Leistung
Konzept · Design · Full-Stack
Tech
Next.js · Supabase · KI
Status
Live deployed
Ausgangslage

Von verstreuten Notizen
zum zentralen Feature Planungs Tool

Produktideen, Aufgaben und Deadlines lebten verstreut in Tabellen und Notizen. Es fehlte ein zentraler Ort für die Frage: Was ist geplant, woran arbeiten wir gerade, und wann ist was fertig?

1

Das Problem

Keine gemeinsame Sicht auf die Produktentwicklung. Status und Zeitplanung lagen in getrennten Werkzeugen.

2

Die Lösung

Ein eigens entwickeltes Tool mit zwei Perspektiven auf dieselben Daten: Kanban für den Status, Timeline für die Zeitplanung.

3

Das Ergebnis

Eine immer aktuelle Roadmap, die für jeden im Team ohne Erklärung verständlich ist — und mit dem Projekt mitwächst.

Kennzahlen

Das Projekt in Zahlen

2
Ansichten auf eine Datenquelle (Kanban & Timeline)
100 %
TypeScript im Strict Mode
0
separate API-Schicht — alles über Server Actions
2
Rollen mit Rechteschutz auf Server- & Client-Ebene
Einblick

Zwei Ansichten, eine Datenquelle

Das Kanban-Board und die Timeline greifen auf dieselben Karten zu — jede Änderung ist sofort in beiden Ansichten sichtbar.

Kanban-Board Ansicht des Feature Planungstools
Kanban-Board
Timeline Ansicht des Feature Planungstools
Interaktive Timeline
Funktionen

Alles, was Produktplanung braucht

🗂

Kanban-Board

Vier Status-Spalten von „Ideen" bis „Abgeschlossen". Karten per Drag & Drop verschieben, Prioritäten und Tags auf einen Blick.

📅

Interaktive Timeline

Features auf einer Zeitachse — umschaltbar zwischen Quartal, Jahr und Gesamt. Deadlines direkt per Ziehen anpassen.

KI-Ideengenerator

Auf Knopfdruck schlägt die KI vier passende Feature-Ideen vor — frei oder basierend auf einer Projektbeschreibung.

🎯

Milestones

Wichtige Termine als visuelle Marker in der Timeline — jederzeit anpassbar.

🔍

Filter & Suche

Karten nach Status, Priorität, Tags oder Stichwort filtern — kombinierbar und in Echtzeit.

🔐

Rollen & Rechte

Admins bearbeiten, Viewer schauen zu. Abgesichert auf Datenbank- und Anwendungsebene.

Unter der Haube

Modernes Stack, sauber umgesetzt

Gebaut auf Next.js 16 mit dem App Router und TypeScript im Strict Mode. Daten und Authentifizierung über Supabase, abgesichert per Row-Level-Security. Mutationen laufen über Server Actions — ganz ohne separate API-Schicht. Die Timeline ist eine maßgeschneiderte SVG-Visualisierung, die KI-Anbindung erfolgt über die Google Gemini API.

Next.js 16 TypeScript Tailwind CSS v4 Supabase PostgreSQL Google Gemini @dnd-kit Vercel
Warum es überzeugt

Mehr als „noch ein Tool"

Custom-Timeline statt Library

Eine eigene SVG-Visualisierung mit Pan, Zoom und Drag-to-Reschedule — kein Standard-Gantt-Plugin.

KI sinnvoll integriert

Kein Gimmick, sondern ein echter Workflow-Beschleuniger: von der leeren Seite zur Idee.

Sofort gespeichert

Jede Änderung wird automatisch übernommen — kein „Speichern"-Button, keine verlorene Arbeit.

Sicher by Design

Rollen-System auf zwei Ebenen, API-Keys ausschließlich serverseitig.

Durchgängiges Design-System

Einheitliche Radien, Schriften und Markenfarben, durchdachte Hover- und Drag-States.

Wartbar gebaut

Strikt typisiert, klare Ordnerstruktur, validierte Umgebungsvariablen.

Ein ähnliches Tool für Ihr Team?

Maßgeschneiderte Tools für die Lücke,
die Ihre vorhandene Software lässt.

Kostenloses Erstgespräch →