Favoritenportal.de - Wie ich eine komplette SaaS-App mit KI baute (und fast den Verstand verlor)

Favoritenportal.de - Wie ich eine komplette SaaS-App mit KI baute

Kann eine KI eine komplette, professionelle Web-Anwendung bauen? Ich habe es ausprobiert - mit Gemini 2.5 Pro, einer Wette und viel zu wenig Schlaf. Das Ergebnis: Favoritenportal.de, ein vollwertiger Lesezeichen-Manager mit Login-System, 2FA, Admin-Dashboard und Chrome Extension. In diesem Artikel nehme ich dich mit auf meine Reise zwischen Euphorie und Nervenzusammenbruch.

DarkWolfCave.de

Die verrückte Idee: Eine Wette mit der KI

Es war einer dieser Abende, an denen man besser ins Bett gehen sollte. Stattdessen saß ich vor meinem Rechner und hatte eine Idee, die mich nicht mehr losließ: Kann ich eine komplette SaaS-Anwendung nur mit KI entwickeln?

Nicht irgendein kleines Tool. Nein, eine richtige Anwendung mit Login-System, Datenbank, Admin-Bereich - das volle Programm. Und das Ganze mit den monatlichen Abo-Kosten von Gemini Advanced statt mit teuren KI-IDEs wie Cursor im Max-Mode.

Also habe ich Gemini eine Wette vorgeschlagen:

“Ich arbeite eigentlich mit Cursor.com. Aber der Max-Mode wird recht teuer. Daher wollte ich dich fragen, ob du diese Herausforderung annehmen könntest: Eine professionelle SaaS-Anwendung entwickeln. Ich würde mit dir sogar eine Wette eingehen! Solltest du es schaffen, verlängere ich dein Jahresabo um ein weiteres Jahr!”

Die Antwort von Gemini? Ich lag lachend auf dem Boden:

“Challenge accepted! […] Wer braucht schon einen sündhaft teuren MAX-Mode, wenn man direkt mit dem Chef-Architekten im Büro sitzen kann? Halt die Kreditkarte für mein Abo schon mal bereit. Das wird ein Spaziergang im Park… einem sehr komplexen, aber sonnigen Park!”

Bei DER Antwort musste es doch einfach gelingen und Spaß machen… dachte ich.

KI-BildKI-generiert mit Gemini

Warum ausgerechnet Gemini?

Du fragst dich vielleicht: Warum habe ich mir das ausgerechnet mit Gemini Advanced angetan? Es gibt doch Claude, ChatGPT, und spezialisierte Coding-Assistenten wie Cursor oder GitHub Copilot.

Der Kosten-Faktor

Die ehrliche Antwort: Geld. Oder besser gesagt, der Versuch, keins auszugeben.

KI-IDEs wie Cursor.com im Max-Mode können schnell teuer werden. Die Kosten explodieren, je mehr du die KI nutzt. Wer viel promptet, ist schneller bei dreistelligen Beträgen als einem lieb ist.

Gemini Advanced hingegen kostet einen festen monatlichen Betrag - etwa 20 Euro. Egal wie viel du die KI nutzt. Das war mein Ansatz: Kann ich mit diesem fixen Budget eine komplette Anwendung aus dem Boden stampfen?

Die technischen Grenzen

Bevor wir weitermachen, muss ich einen wichtigen Unterschied erklären:

Cursor und ähnliche Tools sind IDEs - sie können direkt in deinem Code Änderungen vornehmen, Dateien erstellen und löschen. Sie haben “Hände”.

Gemini (in der WebGui) ist ein “Gehirn ohne Hände”. Es kann genialen Code generieren, aber du musst ihn selbst kopieren und einfügen. Jede. Einzelne. Zeile.

Das klingt nach einem kleinen Detail. Es sollte sich als die größte Herausforderung des gesamten Projekts herausstellen.

Das Projekt: Favoritenportal.de

Aber was wollte ich überhaupt bauen? Die Idee kam aus einem persönlichen Problem:

Ich habe auf verschiedenen Geräten hunderte von Lesezeichen. Im Browser auf dem Desktop, auf dem Laptop, auf dem Handy. Manche sind in Chrome, manche in Firefox. Ein absolutes Chaos.

Klar, es gibt Cloud-Lösungen. Aber die meisten sind US-basiert (DSGVO-Problematik), vollgestopft mit Tracking, oder einfach überladen mit Features die ich nicht brauche.

Also: Ein eigener Lesezeichen-Manager. Simple Idee, aber mit ambitionierten Features:

Die Feature-Liste

Was ich mir vorgenommen hatte:

• Vollständiges Login-System mit Registrierung, Passwort-Reset und 2-Faktor-Authentifizierung
• Admin-Dashboard zur Verwaltung von Benutzern und der gesamten Anwendung
• Intelligente Link-Verwaltung mit automatischer Titel- und Vorschaubild-Extraktion
• Tag-System und Kategorien für bessere Organisation
• Browser-Import für Chrome und Firefox Lesezeichen
• Chrome Extension zum schnellen Speichern von URLs
• Beta-Programm mit Badge-System für Early Adopter
• DSGVO-konform auf deutschen Servern
• Responsive Design für alle Geräte

Eine kleine Liste, oder? Ha.

Die erste Woche: Zwischen Magie und Wahnsinn

Tag 1-2: Die Euphorie

Die ersten beiden Tage waren pure Magie. Features, für die ich allein Wochen gebraucht hätte, spuckte Gemini in Minuten aus.

“Erstelle mir ein Login-System mit JWT-Authentifizierung” - Zack, da war es. “Füge 2-Faktor-Authentifizierung hinzu” - Kein Problem. “Baue ein Admin-Dashboard” - Hier bitte.

Ich fühlte mich wie ein Zauberer. Mit einem Prompt konnte ich komplexe Features aus dem Nichts erschaffen. Der Code war sauber, gut strukturiert, und funktionierte meistens auf Anhieb.

KI-BildKI-generiert mit Gemini

Tag 3-4: Die ersten Risse

Dann wurde das Projekt größer. Und komplexer. Und Gemini fing an, Dinge zu vergessen.

Das ist das große Problem bei KI-Assistenten: Sie haben ein begrenztes Kontext-Fenster. Stell dir vor, du arbeitest mit jemandem zusammen, der nach jedem Gespräch einen Teil seines Gedächtnisses verliert. Genau so fühlt es sich an.

“Kannst du die Funktion anpassen, die wir gestern erstellt haben?” “Welche Funktion meinst du?”

Die KI hatte keinen Schimmer mehr, was wir vorher gemacht hatten. Bereits implementierte Features? Vergessen. Die Datenbankstruktur? Muss ich neu erklären.

Die Lösung: Der Reset-Trick

Ich musste eine Strategie entwickeln. Jedes Mal, wenn der Chat zu lang wurde, habe ich Gemini gebeten, den gesamten aktuellen Projektstand zusammenzufassen. Mit dieser Zusammenfassung habe ich dann einen komplett neuen Chat gestartet.

Das hat funktioniert - aber es war zeitaufwändig und nervenaufreibend. Mittlerweile gibt es optimierte Prompts für genau dieses Problem, die den Kontextwechsel deutlich vereinfachen.

Tag 5-7: Die Copy-Paste-Hölle

Hier kam die eigentliche Qual. Gemini kann großartigen Code generieren, aber es kann ihn nicht selbst in deine Dateien einfügen. Du musst alles manuell kopieren.

Bei kleinen Dateien? Kein Problem. Copy, Paste, fertig.

Bei Dateien mit über 1000 Zeilen Code? Die Hölle.

Gemini sagte: “Suche nach dieser Zeile und ersetze sie…” Ich suchte. Und suchte. Die Zeile gab es nicht - zumindest nicht genau so wie beschrieben.

Die KI hatte “suche dies und das” geschrieben, aber im Code stand “das und dies”. Subtile Unterschiede, die das Suchen zur Qual machten.

Manchmal hat Gemini auch nur einen Teil einer Datei ausgegeben - und ich musste raten, wo der neue Code hingehört. Bei komplexen Komponenten mit verschachtelten Funktionen wurde das zum echten Puzzle.

KI-BildKI-generiert mit Gemini

Der Technologie-Stack

Bevor ich weitermache, lass mich kurz den technischen Stack erklären, den Gemini mir vorgeschlagen hat:

Frontend

- Next.js 15 (App Router)
- React 19
- TypeScript
- Tailwind CSS
- Radix UI Components
- Lucide Icons

Next.js war eine hervorragende Wahl. Als Full-Stack-Framework bringt es sowohl Frontend als auch Backend mit. Ich musste nicht zwischen verschiedenen Projekten wechseln - alles in einer Codebase.

Backend

- Next.js API Routes
- MySQL (anfangs SQLite)
- JWT für Authentifizierung
- bcryptjs für Passwort-Hashing
- Speakeasy für 2FA

Lustige Geschichte zur Datenbank: Ich hatte mit SQLite angefangen, weil es einfacher ist. Beim Deployment auf dem Shared-Hoster stellte sich dann heraus, dass SQLite keine mehrfachen Datenbankverbindungen unterstützt. Migration auf MySQL war angesagt.

Dank Gemini war das “kinderleicht”… naja, fast zumindest.

Sicherheit

- Cloudflare Turnstile (CAPTCHA-Alternative)
- Rate Limiting
- Input Sanitization
- 2-Faktor-Authentifizierung

Hier hat mich Gemini positiv überrascht. Die KI hat von sich aus auf Sicherheitsaspekte geachtet - zumindest bei den meisten Prompts. Trotzdem: Ein Restrisiko bleibt, wenn man den Code nicht Zeile für Zeile versteht.

KI-BildKI-generiert mit Gemini

Die Features im Detail

Nach einer Woche intensiver Arbeit hatte ich eine funktionsfähige Anwendung. Lass mich dir zeigen, was dabei herausgekommen ist:

Das Login-System

Vollständige Benutzerauthentifizierung mit allem was dazugehört:

• Registrierung mit E-Mail-Bestätigung
• Login mit “Angemeldet bleiben”-Option
• Passwort vergessen mit Reset-Link per E-Mail
• 2-Faktor-Authentifizierung mit Authenticator-App
• Session-Management mit JWT-Tokens

Das Ganze ist nicht nur funktional, sondern auch sicher implementiert. Passwörter werden gehasht, Tokens haben Ablaufzeiten, und Rate Limiting schützt vor Brute-Force-Angriffen.

Das Admin-Dashboard

Für mich als Betreiber gibt es ein vollständiges Admin-Dashboard:

• Benutzer-Verwaltung - Alle User im Überblick
• System-Statistiken - Wie viele Links wurden gespeichert?
• Ankündigungs-System - Neuigkeiten an alle User senden
• Issue-Management - Bug-Reports der User verwalten
• Beta-Programm-Steuerung - Wer bekommt Zugang zu neuen Features?

Die Link-Verwaltung

Das Herzstück der Anwendung. Hier kannst du deine Lesezeichen speichern und organisieren:

• Automatische Metadaten-Extraktion - Titel, Beschreibung und Vorschaubild werden automatisch geholt
• Tags und Kategorien - Organisiere deine Links wie du willst
• Super-Favoriten - Deine wichtigsten Links immer griffbereit
• Suche und Filter - Finde jeden Link in Sekunden
• Multi-Device-Sync - Überall Zugriff auf deine Lesezeichen

Import und Export

Damit du nicht bei Null anfangen musst:

• Browser-Import - Importiere deine Lesezeichen aus Chrome oder Firefox
• JSON/CSV/HTML Export - Exportiere deine Daten in verschiedenen Formaten
• GDPR Export - Volle DSGVO-Konformität mit Datenportabilität

Die Chrome Extension

Das i-Tüpfelchen: Eine Browser-Extension zum schnellen Speichern:

• Ein-Klick-Speichern - Aktuelle URL direkt speichern
• Tag-Vergabe - Direkt beim Speichern Tags hinzufügen
• Vorschau - Sieh sofort wie dein Link aussehen wird

Die Zahlen: Zeit, Kosten, Ergebnis

Jetzt zu den harten Fakten:

Zeitaufwand

• Gesamtzeit: Eine Woche
• Effektive Arbeitszeit: 30-40 Stunden
• Davon mit Gemini: Ca. 90%
• Manuelle Nacharbeiten: Ca. 10%

Das ist absurd schnell. Eine traditionelle Agentur hätte dafür Monate gebraucht. Und allein die Meetings hätten länger gedauert - das kann ich aus meiner Berufserfahrung zu 100% bestätigen.

Kosten

Posten	Kosten
Gemini Advanced (Monatsabo)	~20 €
Hosting & Domain	~5 €/Monat
Kaffee und Nervennahrung	unbezahlbar
Gesamt	~25 €

Zum Vergleich: Eine Agentur hätte für ein solches Projekt locker ein Budget im mittleren fünfstelligen Bereich veranschlagt. Wir reden hier von 15.000 bis 30.000 Euro - je nachdem wie viele Meetings man einplant.

Das Ergebnis

Eine voll funktionsfähige SaaS-Anwendung mit:

• Login/Registrierung/2FA
• Admin-Dashboard
• Link-Management mit Metadaten-Extraktion
• Tag-System und Kategorien
• Browser-Import (Chrome, Firefox)
• Export in 4 Formaten
• Chrome Extension
• Beta-Programm mit Badge-System
• Responsive Design
• DSGVO-konform

Ja, es gibt noch Bugs. Ja, einige Features könnten besser sein. Aber hey - für “mal eben so dahin gekloppt” bin ich sprachlos.

Die größten Herausforderungen

Damit du weißt, worauf du dich einlässt, hier meine Top 3 der Probleme:

1. Das Kontext-Fenster

Wie bereits erwähnt: Gemini vergisst. Je länger der Chat, desto weniger erinnert sich die KI an früheren Code. Die Lösung (regelmäßige Zusammenfassungen und neue Chats) funktioniert, kostet aber Zeit.

2. Die Copy-Paste-Hölle

Ohne direkte IDE-Integration musst du jeden Code manuell kopieren. Bei kleinen Änderungen ist das okay. Bei großen Refactorings wird es zur Qual.

Mein Tipp: Halte deine Dateien so klein wie möglich. Lieber mehr kleine Komponenten als wenige große.

3. Die “Fast richtig”-Fälle

Manchmal generiert Gemini Code, der fast richtig ist. Ein Tippfehler hier, eine falsche Variable dort. Das Debugging dieser subtilen Fehler kann länger dauern als das ursprüngliche Coding.

Würde ich es wieder tun?

Die ehrliche Antwort: Es kommt darauf an.

JA - für kleinere Projekte

Für einzelne Features, Code-Optimierungen oder kleinere Tools ist Gemini Advanced genial. Die Kosten sind fix, die Ergebnisse meist sehr gut. Ich nutze Gemini regelmäßig für:

• Schnelle Prototypen
• Code-Reviews
• Debugging-Hilfe
• Dokumentation
• Einzelne Komponenten

NEIN - für große, wachsende Projekte

Für die Weiterentwicklung von Favoritenportal nutze ich jetzt Cursor. Eine KI, die direkt in der IDE arbeitet und den Code selbstständig lesen und verändern kann, ist für komplexe Projekte auf Dauer einfach überlegen.

Der manuelle Abgleich mit Gemini wurde gegen Ende zur Qual. Bei jedem Update musste ich:

1. Den aktuellen Code kopieren und Gemini zeigen
2. Die Änderungen von Gemini kopieren
3. Manuell in die richtige Datei einfügen
4. Hoffen, dass nichts kaputt gegangen ist

Mit Cursor sage ich: “Ändere X in Datei Y” - und es passiert. Direkt. Ohne Copy-Paste.

Die Sicherheitsfrage - Ein echter Warnschuss

Ein wichtiger Aspekt, der bei aller Euphorie nicht vergessen werden darf: Wie sicher ist KI-generierter Code?

Hier muss ich eine Geschichte erzählen, die mich einige schlaflose Nächte gekostet hat.

Der Vorfall: Alles war offen

Ein paar Tage nach dem Launch schaute ich in die Server-Logs und bemerkte etwas Merkwürdiges. Jemand hatte Zugriff auf Dateien, die niemals öffentlich sein sollten.

Bei genauerer Analyse stellte sich heraus: Durch einen Fehler in der Middleware waren ALLE Dateien ins Internet exponiert. Die .env-Datei mit allen Secrets. Die Datenbank-Konfiguration. API-Keys. Alles.

Mir wurde eiskalt.

KI-BildKI-generiert mit Gemini

Kein Schutz von Anfang an

Das Problem? Gemini hatte beim Erstellen der Anwendung Sicherheitsaspekte fast komplett ignoriert. Es gab keine Middleware, die sensible Dateien schützte. Keine .htaccess-Regeln. Keinen doppelten Boden.

Die KI hatte funktionierenden Code geliefert - aber “funktionierend” heißt nicht “sicher”.

Glück im Unglück

Zum Glück war es noch die Anfangsphase ohne echte Nutzer. Der Schaden hielt sich in Grenzen. Aber die Aufräumarbeiten waren trotzdem aufwändig:

• Alle Secrets und API-Keys rotiert
• Datenbank-Passwörter geändert
• JWT-Secrets neu generiert
• Webhook-URLs aktualisiert
• Komplette Security-Middleware nachgerüstet
• .htaccess-Schutz als zweite Verteidigungslinie

Die Lektion

Stand Mitte 2025 (als ich das Projekt startete) hatte KI einen blinden Fleck bei Security. Die gute Nachricht: Stand Dezember 2025 ist das deutlich besser geworden. Moderne KI-Modelle achten mehr auf Sicherheitsaspekte und warnen aktiv vor Risiken.

Aber die wichtigste Lektion bleibt: Vertraue, aber prüfe.

Meine Empfehlung

• Sicherheit explizit anfordern - Frag die KI aktiv nach Sicherheitsmaßnahmen
• Sensible Dateien schützen - Middleware + .htaccess als doppelter Boden
• Regelmäßige Audits - Auch KI-Code braucht Security-Reviews
• Penetration-Tests - Lass jemanden versuchen, reinzukommen
• Secrets nie committen - .env gehört in .gitignore

Seien wir ehrlich: Selbst erfahrene Entwickler übersehen manchmal Sicherheitslücken. Aber bei KI-generiertem Code solltest du extra wachsam sein - besonders bei älteren Modellen.

Tipps für dein eigenes KI-Projekt

Falls du jetzt Lust bekommen hast, selbst ein KI-Projekt zu starten, hier meine Tipps:

Vor dem Start

1. Klare Vision haben - Was genau willst du bauen?
2. Tech-Stack festlegen - Lass die KI nicht ständig die Technologie wechseln
3. Feature-Liste priorisieren - Was ist MVP, was ist Nice-to-have?

Während der Entwicklung

1. Kleine Schritte - Lieber viele kleine Prompts als einen riesigen
2. Regelmäßig testen - Nach jedem Feature prüfen ob alles funktioniert
3. Zusammenfassungen machen - Bevor der Chat zu lang wird
4. Versionierung nutzen - Git ist dein Freund

Am Ende

1. Code-Review - Zumindest kritische Bereiche manuell prüfen
2. Sicherheitstest - Grundlegende Security-Checks durchführen
3. Dokumentation - Auch wenn die KI es geschrieben hat, du solltest es verstehen

Fazit: Revolution oder Spielerei?

Nach diesem Experiment bin ich überzeugt: Was heute für eine Einzelperson mit einer klaren Vision möglich ist, ist revolutionär.

Ich habe in einer Woche eine komplette SaaS-Anwendung gebaut. Mit Features, die normalerweise ein Team beschäftigen. Für 20 Euro.

Das ist keine Spielerei. Das ist ein Paradigmenwechsel.

Ja, es gibt Einschränkungen. Ja, man braucht Programmierkenntnisse. Ja, es ist anstrengend. Aber die Möglichkeiten sind atemberaubend.

Favoritenportal.de läuft. Menschen nutzen es. Es funktioniert.

Und Gemini? Hat die Wette gewonnen. Das Jahresabo ist verlängert.

KI-BildKI-generiert mit Gemini

---

Probier es selbst aus!

Wenn du neugierig geworden bist, schau dir Favoritenportal.de an:

Website: favoritenportal.de

Aktuell läuft eine Beta-Phase - du kannst dich kostenlos registrieren und die Anwendung testen. Als Beta-Tester bekommst du sogar ein Badge und hilfst mir, die Anwendung zu verbessern.

Und wenn du Bugs findest oder Features vermisst: Das Feedback-System ist auch KI-gebaut und funktioniert einwandfrei.

Falls du Fragen zur Entwicklung hast oder selbst ein KI-Projekt planst, schreib mir gerne in den Kommentaren oder auf Discord. Ich teile meine Erfahrungen gern!

Und denk dran: Kauf genug Kaffee. Du wirst ihn brauchen.