Eine moderne, vollständig clientseitige Mitarbeiterverwaltung mit LocalStorage-Persistenz, Bild-Upload und responsivem Design. Gebaut mit Vanilla JavaScript - keine Frameworks, keine Dependencies.
Vollständige Tabellenansicht mit Live-Suche, Filtern und Sortierung
Responsive Card-Layout für Touch-Bedienung
Inline-Validierung und Fehlerbehandlung
# 1. Repository klonen
git clone https://github.com/Matzorator/PeopleDB/peopledb.git
cd peopledb
# 2. Python Webserver starten
python -m http.server 8000
# 3. Browser öffnen
# → http://localhost:8000Das war's! Die App lädt automatisch 60 Beispiel-Mitarbeiter. 🎉
Oder direkt ausprobieren: Live Demo auf GitHub Pages
- 🗄️ Persistente Datenhaltung - LocalStorage mit Import/Export-Funktion
- 🎨 Responsive Design - Automatische Anpassung: Cards (Mobile) ↔ Tabelle (Desktop)
- 🔍 Smart Filtering - Live-Suche + dynamische Abteilungs-/Positions-Filter
- 🖼️ Bild-Upload & Komprimierung - Automatisch auf 400x400px @ 80% Qualität
- 📄 Paginierung - 10 Einträge pro Seite mit Navigation
- ⚡ Vanilla JavaScript - Keine Dependencies, pure ES6+ (2800+ Zeilen Code)
📋 Alle Features anzeigen (35+)
- ✅ LocalStorage Persistenz - Daten bleiben nach Browser-Reload erhalten
- ✅ CRUD-Operationen - Erstellen, Lesen, Aktualisieren, Löschen
- ✅ Export zu JSON - Backup aller Daten als Download
- ✅ Import von JSON - Daten aus Datei wiederherstellen
- ✅ Reset-Funktion - Zurück zu Originaldaten
- ✅ Responsive Design - Mobile, Tablet und Desktop
- ✅ Hybrid Layout - Card-Ansicht (< 5 Einträge), Tabelle (≥ 5 Einträge)
- ✅ Toast Notifications - Visuelles Feedback für alle Aktionen
- ✅ Modal Dialog - Detailansicht für Mitarbeiter
- ✅ Smooth Animations - CSS Transitions
- ✅ Live-Suche - Echtzeit nach Name, Abteilung oder Position
- ✅ Abteilungs-Filter - Dynamisches Dropdown
- ✅ Positions-Filter - Abhängig von gewählter Abteilung
- ✅ Sortierung - Klick auf Spaltenüberschriften
- ✅ Filter Reset - Alle Filter mit einem Klick zurücksetzen
- ✅ Inline-Validierung - Echtzeit-Feedback
- ✅ HTML5 Validierung - Required, Pattern, Email, Tel
- ✅ Custom Error Messages - Deutsche Fehlermeldungen
- ✅ Edit-Modus - Bearbeitung bestehender Mitarbeiter
- ✅ Bild-Upload - File-Input für Profilbilder
- ✅ Automatische Komprimierung - 400x400px @ 80% Qualität
- ✅ Größen-Validierung - Max 5 MB Original
- ✅ Base64-Speicherung - Keine externen Dependencies
Die Anwendung muss über einen lokalen Webserver ausgeführt werden (CORS-Policy).
- Python ODER Node.js (für lokalen Server)
- Moderner Browser (Chrome, Firefox, Safari, Edge)
# Im Projektordner
python -m http.server 8000
# Dann Browser öffnen:
# http://localhost:8000- Extension installieren: "Live Server" von Ritwick Dey
- Rechtsklick auf
index.html - "Open with Live Server" wählen
npm install -g http-server
http-server -p 8000- Klicke "➕ Neuer Mitarbeiter"
- Fülle alle Pflichtfelder aus
- Optional: Profilbild hochladen
- Klicke "💾 Speichern"
- Klicke "Edit" beim gewünschten Mitarbeiter
- Ändere die Daten
- Klicke "Aktualisieren"
- Suche: Tippe in das Suchfeld → Live-Filter
- Abteilungs-Filter: Wähle Abteilung → Positionen werden aktualisiert
- Reset: Klicke "🔄 Filter zurücksetzen"
Klicke auf Spaltenüberschrift:
- 1. Klick: Aufsteigend ▲
- 2. Klick: Absteigend ▼
- Export: Klicke "📤 Export" → JSON-Download
- Import: Klicke "📥 Import" → Wähle JSON-Datei
- Reset: Klicke "🔄 Reset" → Originaldaten wiederherstellen
- HTML5 - Semantisches Markup
- CSS3 - Variables, Grid, Flexbox, Animations
- JavaScript ES6+ - Vanilla JS, keine Frameworks
- LocalStorage API - Persistente Datenhaltung
- FileReader API - Datei-Upload
- Canvas API - Bild-Komprimierung
- Blob API - Datei-Download
- Mobile-First Approach
- Responsive Design - CSS Media Queries
- CSS Custom Properties
| Browser | Version | Status |
|---|---|---|
| Chrome | 76+ | ✅ Vollständig |
| Firefox | 75+ | ✅ Vollständig |
| Safari | 15.4+ | ✅ Vollständig |
| Edge | 79+ | ✅ Vollständig |
| IE | - | ❌ Nicht unterstützt |
peopledb/
│
├── index.html # Haupt-HTML-Datei
├── style.css # Alle Styles (~1400 Zeilen)
├── script_local.js # JavaScript Logic (~1200 Zeilen)
├── mitarbeiter.json # Beispieldaten (60 Mitarbeiter)
├── README.md # Diese Dokumentation
│
├── screenshots/ # Demo-Screenshots
│ ├── desktop_table.png
│ ├── mobile_cards.png
│ └── form_validation.png
│
└── images/ # Profilbilder
└── [verschiedene .webp Dateien]
- ✅ Vollständige CRUD-Funktionalität
- ✅ LocalStorage-Persistenz
- ✅ Responsive Design
- ✅ Bild-Upload & Komprimierung
- 🔨 Flask REST API - Backend-Integration
- 🔨 SQLite/PostgreSQL - Datenbank statt LocalStorage
- 🔨 User Authentication - Login/Register System
- 🔨 Multi-User Support - Daten-Synchronisierung
- 📊 Dashboard & Analytics - Statistiken mit Chart.js
- 📧 Email-Benachrichtigungen - Python SMTP
- 📄 PDF Export - Mitarbeiter-Reports
- 🔍 Erweiterte Suche - Fuzzy-Search
- Max. Größe: ~5-10 MB (browserabhängig)
- Empfehlung: Max. 200 Mitarbeiter mit Bildern
- Lösung: Export → Reset bei Bedarf
⚠️ Nur lokaler Browser-Speicher⚠️ Keine Server-Synchronisierung⚠️ Browser-Daten löschen = Datenverlust⚠️ Keine Verschlüsselung
// Browser-Konsole öffnen (F12)
localStorage.clear();
location.reload();Problem: Failed to fetch mitarbeiter.json
Lösung: Nutze einen lokalen Webserver (siehe Installation)
- Prüfe Browser-Einstellungen (LocalStorage erlaubt?)
- Prüfe Speicherplatz (localStorage voll?)
- Console-Fehler prüfen (F12)
Beiträge sind willkommen!
- Fork das Repository
- Branch erstellen (
git checkout -b feature/NeuesFeature) - Commit (
git commit -m 'Add: Neues Feature') - Push (
git push origin feature/NeuesFeature) - Pull Request öffnen
MIT License - siehe LICENSE Datei
Matthias Osypka
💡 Suche nach: Junior Entwickler Position im Bereich Fullstack Web Entwicklung
Zeilen Code: ~2800
Funktionen: 35+
Features: 35
CSS Klassen: 80+
Event Listener: 20+
Browser-Support: 97%+
Entwickelt mit ❤️ und ☕