Journal Anwendung

Überblick

Journal ist eine persönliche Blog-Plattform, auf der der Autor Einträge schreiben, verwalten und veröffentlichen kann. Die öffentliche Seite ist so gestaltet, dass sie sich wie ein Literaturmagazin anfühlt, hochwertig, gut lesbar, bewusst gestaltet. Die Admin-Seite ist ein vollständig individuelles CMS, das speziell für Langform-Texte entwickelt wurde.

Technologie-Stack

Designsystem

Die visuelle Identität basiert auf einem redaktionellen Dark-Theme, wie man es in einem Literaturjournal oder einer unabhängigen Publikation finden würde.

• Typografie: Playfair Display für Überschriften, Source Serif 4 für Fließtext, beide wegen ihres literarischen Charakters gewählt
• Farbpalette:
  • #0f0f0f tiefschwarzer Hintergrund
  • #7eb8d4 stahlblaue Überschriften
  • #c0504a dunkelrote Links
• Design-Tokens definiert als CSS Custom Properties und in Tailwind erweitert - keine "magischen Zahlen" im Code verstreut
• Vollständig responsiv, barrierefrei - Skip-Links, ARIA-Attribute, vollständige Tastaturnavigation

Öffentlicher Blog

Die leserorientierte Seite der Anwendung:

• Startseite mit einem hervorgehobenen neuesten Eintrag, aktuellen Beiträgen, einem monatlichen Stimmungsindikator und einem täglich rotierenden Zitat aus einer externen API
• Blog-Übersicht - alle veröffentlichten Einträge, neueste zuerst
• Einzelne Beitragsseiten - vollständige typografische Gestaltung mit vergrößertem Anfangsbuchstaben, Vor/Zurück-Navigation zwischen Einträgen
• Suche - Volltextsuche über Titel, Auszüge, Inhalte und Tags, mit Live-Dropdown im Header (debounced, per Tastatur navigierbar)
• 404- und Fehlerseiten - im gleichen Stil wie der Rest des Blogs geschrieben, mit eleganten Fallbacks

Admin CMS

Ein vollständig individuelles Content-Management-System, das nur für den Autor zugänglich ist:

• Beitragsübersicht - Tabellenansicht aller Beiträge inklusive Entwürfe, mit Bearbeiten- und Live-Vorschau-Links
• Beitragseditor - das Herzstück des Admin-Panels; ein vollständiger Markdown-Editor mit drei Ansichtsmodi: Schreiben, Geteilt (side-by-side live preview), und Vorschau
• Umfangreiche Toolbar - Textformatierung (fett, kursiv, Überschriften, Blockzitat, Links) und Medieneinbindung (Bild, Video, Audio)
• Medien-Uploads - Drag-and-Drop oder Dateiauswahl für Bilder, Video und Audio, gespeichert auf Cloudinary, mit Unterstützung für Bildunterschriften
• Sprachaufnahme - Audio direkt im Browser über die MediaRecorder API aufnehmen, mit Live-Timer und Wiedergabe vor dem Einfügen
• Entwurf/Veröffentlicht-Umschalter, Wortanzahl, geschätzte Lesezeit, automatisch generierte URL-Slugs
• Stimmungstracker - der Autor protokolliert täglich eine Stimmungsnotiz im Admin-Panel; Einträge sind monatlich einsehbar mit vollständiger Monatsübersicht, und die dominante Stimmung des aktuellen Monats wird auf der öffentlichen Startseite angezeigt

Authentifizierung

Sicheres, Authentifizierungssystem:

• E-Mail- und Passwort-Login mit Sitzungsverwaltung
• Sitzungen laufen automatisch ab und werden bei Aktivität erneuert
• Passwortverwaltung im Admin-Panel verfügbar
• Alle Admin-Routen vollständig geschützt, nicht authentifizierte Anfragen erreichen weder Seiten noch API-Endpunkte

Datenbank

PostgreSQL mit Drizzle ORM, mit einem Schema basierend auf klaren Beziehungen:

• Beiträge mit vollständigen Metadaten, Slug, Auszug, Inhalt, Tags, Lesezeit, Veröffentlichungsstatus und Autor
• Stimmungseinträge verknüpft mit Daten und Monaten, mit vom Autor verfassten Notizen
• Auth-Tabellen für sichere Sitzungs- und Kontoverwaltung
• Alle Datenbankoperationen zentralisiert in einer typisierten Abfrageschicht
• Drizzle Studio lokal verfügbar zur direkten Datenbankinspektion

Medien

Alle Bilder, Videos und Audiodateien werden auf Cloudinary gespeichert - Uploads erfolgen über den Admin-Editor, werden nach Typ und Größe validiert und über Cloudinary CDN mit automatischer Optimierung bereitgestellt. Der kostenlose Tarif deckt Speicher- und Bandbreitenbedarf eines persönlichen Blogs komfortabel ab.

API-Ebene

Eine Reihe interner REST-Endpunkte, die das Admin-CMS und öffentliche Funktionen unterstützen:

• Erstellen, Aktualisieren und Löschen von Beiträgen
• Datei-Upload-Handler integriert mit Cloudinary
• Such-Endpoint für das Live-Dropdown im Header
• Alle Authentifizierungsabläufe serverseitig verarbeitet

Hosting

Die Anwendung wird auf Vercel im kostenlosen Tarif gehostet. PostgreSQL wird bei einem verwalteten Cloud-Anbieter gehostet, der über Umgebungsvariablen mit Vercel verbunden ist. Deployments erfolgen automatisch bei jedem Push auf den main-Branch. Der kostenlose Tarif bewältigt den Traffic eines persönlichen Blogs ohne Cold-Start-Probleme dank Next.js Edge Runtime.

Dokumentation

Das Projekt enthält eine vollständige Benutzerdokumentation mit folgenden Inhalten:

• Schreibanleitung - Nutzung des Editors, Markdown-Syntax, Medieneinbindung, Entwürfe speichern vs veröffentlichen
• Stimmungstracker-Anleitung - tägliche Stimmungen protokollieren, Notizen hinzufügen und Monatsübersicht lesen
• Wartungsanleitung - Abhängigkeiten aktualisieren, Datenbankmigrationen ausführen und Anwendung überwachen
• Deployment-Anleitung - Umgebungsvariablen, Vercel-Konfiguration, Cloudinary-Einrichtung
• Erweiterungsanleitung - die Codebasis ist so strukturiert, dass neue Funktionen einfach ergänzt werden können; neue Seiten, API-Routen und Datenbanktabellen folgen konsistenten Mustern im gesamten Projekt

Weitere Details

• PWA-Manifest - Theme-Farbe, Icons und Anzeigemodus für ein natives App-Gefühl beim Hinzufügen zum Startbildschirm
• Tägliches Zitat - externer API-Fetch mit zeitbasierter Revalidierung, automatische Aktualisierung ohne neues Deployment
• Open Graph und Twitter Card Metadaten auf allen öffentlichen Seiten für sauberes Teilen
• Suchmaschinen-Direktiven pro Seite konfiguriert - Admin- und Fehlerseiten von der Indexierung ausgeschlossen

Besuchen Sie die Journal-App und sehen Sie sich an, wie ein moderner persönlicher Blog mit leistungsstarker Suche und sorgfältig gestaltetem Benutzererlebnis aussieht: Journal-App ansehen