greenPDF

Grüne Fraktion Kirchhundem - Medien-Dokumentenverwaltungssystem mit Supabase-Integration

Ein modernes, responsives Medien-Betrachtungs- und Verwaltungssystem, speziell entwickelt für die Grüne Fraktion Kirchhundem. Diese Anwendung bietet eine intuitive Oberfläche zur Organisation, Betrachtung und Verwaltung politischer Dokumente und Bilder in verschiedenen Kategorien. Die gesamte Medienverwaltung läuft über Supabase als Backend-as-a-Service.

✨ Funktionen

📱 Moderne Benutzeroberfläche

Responsives Design: Optimiert für Desktop, Tablet und mobile Geräte
Dunkelmodus-Unterstützung: Wechsel zwischen hellem und dunklem Design mit Systemeinstellungserkennung
Professionelles Branding: Individuelles grünes Farbschema passend zur politischen Identität
Sanfte Animationen: Mikro-Interaktionen und Übergänge für eine verbesserte Benutzererfahrung

�� Medienverwaltung über Supabase

Multi-Format-Unterstützung: Anzeige von PDFs, PNG, JPG und JPEG-Dateien
Organisierte Kategorien: Dokumente sortiert in drei Hauptordnern:
- Anträge: Offizielle Anträge und Vorschläge
- Presse: Pressemitteilungen und Medienmaterialien
- Wahlkampf: Kampagnenmaterialien und Wahldokumente
Cloud-basierte Speicherung: Alle Mediendateien werden in Supabase Storage Buckets verwaltet
Dynamische Dateierkennung: Automatisches Scannen und Manifest-Generierung für Mediendateien
Suchfunktion: Echtzeit-Suche über alle Dokumente und Bilder
Favoriten-System: Markieren häufig verwendeter Dateien als Favoriten
Zuletzt geöffnete Dateien: Schneller Zugriff auf kürzlich angesehene Dokumente
Dateityp-Indikatoren: Visuelle Kennzeichnungen für PDF- oder Bilddateitypen

🔍 Erweiterter Medienbetrachter

PDF-Rendering: Hochwertige PDF-Anzeige mit PDF.js
Bildbetrachter: Optimierte Bildanzeige mit Zoom-Steuerung
Zoom-Funktionen: Vergrößern/Verkleinern, an Breite anpassen und Originalgröße
Seitennavigation: Einfache PDF-Seitennavigation mit Eingabesteuerung
Vollbildmodus: Ablenkungsfreie Dokument- und Bildbetrachtung
Download & Druck: Direkte Download- und Druckfunktionalität für alle Dateitypen
Ladezustände: Sanfte Ladeanzeigen und Fehlerbehandlung

🌐 Internationalisierung

Zweisprachige Unterstützung: Deutsch (primär) und Englisch
Dynamischer Sprachwechsel: Sofortiger Wechsel zwischen Sprachen
Lokalisierte Inhalte: Alle Oberflächenelemente korrekt übersetzt
Browser-Spracherkennung: Automatische Spracherkennung basierend auf Browser-Einstellungen

💾 Datenpersistenz & Cloud-Integration

Lokaler Speicher: Favoriten und kürzlich geöffnete Dateien bleiben über Sitzungen hinweg erhalten
Einstellungsspeicher: Dunkelmodus- und Spracheinstellungen werden lokal gespeichert
Offline-Fähigkeit: Kernfunktionalität funktioniert ohne Internetverbindung
Supabase-Integration: Cloud-Speicher für alle Mediendateien mit sicherer Zugriffsverwaltung
Automatische Synchronisierung: Dokumente werden aus Supabase Storage Buckets geladen und verwaltet

🚀 Erste Schritte

Voraussetzungen

Node.js (Version 16 oder höher)
npm oder yarn Paketmanager
Moderner Webbrowser mit aktiviertem JavaScript
Supabase-Konto für Cloud-Speicher (optional, alternativ lokale Dateispeicherung)

Installation

Repository klonen

git clone https://github.com/panic-Patrick/greenPDF
cd greenpdf

Abhängigkeiten installieren
```
npm install
```

Umgebungsvariablen konfigurieren

Erstellen Sie eine .env-Datei im Stammverzeichnis:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Mediendateien hinzufügen
- Supabase (empfohlen): Laden Sie Dateien in die entsprechenden Supabase Storage Buckets hoch.
- Option 2: Lokale Dateien: Platzieren Sie PDF- und Bilddateien in den entsprechenden Ordnern unter public/media/:
  - public/media/antraege/ - für Anträge und Vorschläge
  - public/media/presse/ - für Pressematerialien
  - public/media/wahlkampf/ - für Wahlkampfdokumente
Manifest generieren (für lokale Dateien)
```
npm run generate-manifest
```
Entwicklungsserver starten
```
npm run dev
```
Im Browser öffnen
Navigieren Sie zu http://localhost:5173

Für Produktion bauen

npm run build

Die gebauten Dateien werden im Verzeichnis dist/ verfügbar sein.

📂 Projektstruktur

greenpdf/
├── public/
│   ├── assets/
│   │   └── logo.png              # Organisations-Logo
│   └── media/
│       ├── antraege/             # Antragsdokumente & Bilder
│       ├── presse/               # Pressematerialien & Bilder
│       ├── wahlkampf/            # Wahlkampfdokumente & Bilder
│       └── manifest.json         # Automatisch generierter Dateiindex
├── src/
│   ├── components/
│   │   ├── Header.jsx            # Hauptheader mit Branding
│   │   ├── Sidebar.jsx           # Dokumentennavigations-Seitenleiste
│   │   ├── MediaViewer.jsx       # PDF- & Bildanzeige-Komponente
│   │   ├── PDFViewer.jsx         # PDF-spezifische Anzeige-Komponente
│   │   ├── Footer.jsx            # Fußzeile mit rechtlichen Links
│   │   ├── ImpressumContent.jsx  # Impressum-Inhalte
│   │   ├── DatenschutzContent.jsx # Datenschutzerklärung 
│   │   └── SupabaseDebug.jsx     # Debug-Komponente für Supabase
│   ├── hooks/
│   │   ├── useDarkMode.js        # Dunkelmodus-Zustandsverwaltung
│   │   ├── useDynamicFolders.js  # Dynamische Dateierkennung
│   │   ├── useLocalStorage.js    # Lokale Speicher-Dienstprogramme
│   │   └── usePDFViewer.js       # PDF-Viewer-Zustandsverwaltung
│   ├── i18n/
│   │   ├── i18n.js               # Internationalisierungs-Setup
│   │   └── locales/
│   │       ├── de.json           # Deutsche Übersetzungen
│   │       └── en.json           # Englische Übersetzungen
│   ├── api/
│   │   ├── fileScanner.js        # Lokale Dateierkennungs-Dienstprogramme
│   │   └── supabaseStorage.js    # Supabase Storage-Integration
│   ├── lib/
│   │   └── supabaseClient.js     # Supabase Client-Konfiguration
│   ├── vite-env.d.ts             # TypeScript Umgebungsdeklarationen
│   ├── index.css                 # Globale CSS-Stile
│   └── main.tsx                  # Anwendungs-Einstiegspunkt
├── scripts/
│   └── generate-manifest.js      # Manifest-Generierungsskript
└── package.json

🛠️ Technischer Stack

Frontend-Framework

React 18: Modernes React mit Hooks und funktionalen Komponenten
Vite: Schnelles Build-Tool und Entwicklungsserver
TypeScript: Typsicherheit und verbesserte Entwicklungserfahrung

Styling & UI

Tailwind CSS: Utility-First CSS-Framework
Lucide React: Schöne, anpassbare Icons
Benutzerdefiniertes Design-System: Grün-thematische Farbpalette und Komponenten

Medienverarbeitung

react-pdf: React-Wrapper für PDF.js zur PDF-Darstellung
PDF.js: Mozilla's PDF-Rendering-Bibliothek
Native Bildunterstützung: Optimierte Bildanzeige für PNG, JPG, JPEG

Internationalisierung

react-i18next: React-Integration für i18next
i18next: Internationalisierungs-Framework
Browser-Spracherkennung: Automatische Spracherkennung

Zustandsverwaltung & Datenspeicherung

React Hooks: useState, useEffect, benutzerdefinierte Hooks
Local Storage: Persistenter clientseitiger Speicher
Supabase: Backend-as-a-Service für Datenspeicherung und -verwaltung
Supabase Storage: Cloud-Speicher für Mediendateien

📋 Verfügbare Skripte

Skript	Beschreibung
`npm run dev`	Entwicklungsserver starten
`npm run build`	Für Produktion bauen (inkl. Manifest-Generierung)
`npm run generate-manifest`	Mediendatei-Manifest generieren
`npm run lint`	ESLint-Codeanalyse ausführen
`npm run preview`	Produktions-Build vorschauen

🔧 Konfiguration

Supabase-Integration einrichten

Supabase-Projekt erstellen auf supabase.com
Storage-Buckets erstellen:
- Erstellen Sie drei öffentliche Buckets: antraege, presse und wahlkampf
- Setzen Sie die entsprechenden Berechtigungen für diese Buckets
Umgebungsvariablen konfigurieren:
- Kopieren Sie Ihre Supabase URL und Anon Key in die .env-Datei

Neue Mediendateien hinzufügen

Für Supabase-Speicher (empfohlene Methode):

Dateien hochladen in die entsprechenden Supabase Storage Buckets über die Supabase-Konsole
Anwendung neu laden, die Dateien werden automatisch erkannt

Für lokale Dateien (Alternative):

Dateien platzieren im entsprechenden Ordner unter public/media/
- Unterstützte Formate: PDF, PNG, JPG, JPEG
Manifest-Generierung ausführen:
```
npm run generate-manifest
```
Entwicklungsserver neu starten, falls dieser läuft

Unterstützte Dateitypen

PDFs: .pdf - Dargestellt mit PDF.js mit vollständigen Navigationssteuerungen
Bilder: .png, .jpg, .jpeg - Nativer Bildbetrachter mit Zoom-Steuerung

Übersetzungen anpassen

Bearbeiten Sie die Übersetzungsdateien in src/i18n/locales/:

de.json - Deutsche Übersetzungen
en.json - Englische Übersetzungen

Farbschema ändern

Das Farbschema ist in tailwind.config.js definiert. Ändern Sie die Abschnitte colors.green und colors.emerald, um das Design anzupassen.

Logo ersetzen

Ersetzen Sie public/assets/logo.png durch das Logo Ihrer Organisation. Die Komponente wird automatisch das neue Logo verwenden.

...

Releases: panic-Patrick/greenPDF

greenPDF

Uh oh!

greenPDF

greenPDF

✨ Funktionen

📱 Moderne Benutzeroberfläche

�� Medienverwaltung über Supabase

🔍 Erweiterter Medienbetrachter

🌐 Internationalisierung

💾 Datenpersistenz & Cloud-Integration

🚀 Erste Schritte

Voraussetzungen

Installation

Für Produktion bauen

📂 Projektstruktur

🛠️ Technischer Stack

Frontend-Framework

Styling & UI

Medienverarbeitung

Internationalisierung

Zustandsverwaltung & Datenspeicherung

📋 Verfügbare Skripte

🔧 Konfiguration

Supabase-Integration einrichten

Neue Mediendateien hinzufügen

Für Supabase-Speicher (empfohlene Methode):

Für lokale Dateien (Alternative):

Unterstützte Dateitypen

Übersetzungen anpassen

Farbschema ändern

Logo ersetzen

Uh oh!