Light Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

proudcommerce/pcCampApp

Repository files navigation

PC CampApp

Features

  • Progressive Web App - Installierbar auf allen Geraten, funktioniert offline
  • Vollstandig Wiederverwendbar - Eine einzige event.json fur jede Veranstaltung
  • Mehrsprachig - Integrierte i18n-Unterstutzung (Deutsch/Englisch)
  • Performance-Optimiert - Cache-Busting, Service Worker, Lazy Loading
  • Event-Features - Sessionplane, Zeitplane, Speisekarten, Sponsoren, Voting
  • Auto-Branding - PWA-Icons werden automatisch aus einem einzigen Quellbild generiert
  • 100% Getestet - Playwright-Tests fur Ubersetzungen, PWA, UI/UX
  • Docker Ready - Entwicklungsumgebung mit einem Befehl

Live: https://app.devops-camp.de oder https://app.joomladay.de

Inhaltsverzeichnis

  • Quick Start
  • Screenshots
  • Konfiguration
    • Anpassung fur Ihre Veranstaltung
    • Eventspezifische JSON-Dateien
    • JSON-Dateien fur neue Events anpassen
  • Voting-System
    • Aktivierung
    • Voting-Konfiguration
    • Nutzung
    • Admin-Bereich
    • Deployment
  • Entwicklung
    • Befehle
  • Internationalisierung (i18n)
    • Unterstutzte Sprachen
    • i18n-Konfiguration
    • Ubersetzungen hinzufugen
  • Architektur
    • Tech-Stack
    • Caching-Strategie
    • PWA-Features
  • Lizenz

Quick Start

# 1. Repository klonen
git clone <repository-url>
cd pccampapp

# 2. Node.js Dependencies
make install

# 3. Entwicklungsserver starten (Docker)
make dev-up

# 4. Browser offnen
open http://localhost:5173

Das war's! Die App lauft jetzt mit Live-Reload.

# 1. Live-Preview starten (Docker)
make prod-up

# 2. Browser offnen
open http://localhost:5174

# Build erstellen (/build-Ordner)
# wird auch mit prod-up erstellt
make build

Build-Inhalt auf Server laden! Die App lauft jetzt als PWA.

Screenshots

Screenshots anzeigen

Konfiguration

Die gesamte App ist konfigurationsgesteuert uber eine einzige Datei: event.json

Anpassung fur Ihre Veranstaltung

# 1. Event-Konfiguration bearbeiten
vim event.json

# 2. Branding-Assets ersetzen (nur 2 Dateien!)
cp ihr-logo.png src/assets/logo.png
cp ihr-icon.png src/assets/icon.png # PWA-Icons werden automatisch generiert!

# 3. Eventspezifische Inhalte aktualisieren
vim src/sessionplan/sessions.json # Sessionplan-Daten
vim src/timetable/timetable.json # Zeitplan-Daten
vim src/news.json # Event-News
vim src/menu.json # Navigation
vim src/food/menue.json # Speisekarten
vim src/food/allergene.json # Allergen-Informationen
vim src/sponsors/sponsors.json # Sponsoren-Liste

# 4. Bauen & deployen
make build

Keine Code-Anderungen notig! Das Build-System automatisch:

  • Ersetzt alle {{EVENT_NAME}}-Platzhalter in HTML
  • Generiert PWA-Manifest aus der Konfiguration
  • Erstellt alle PWA-Icons (16x16, 144x144, 192x192, 512x512)
  • Wendet Theme-Farben an

Eventspezifische JSON-Dateien

Die App verwendet mehrere JSON-Dateien fur eventspezifische Inhalte. Diese mussen fur jede neue Veranstaltung angepasst werden:

Sessionplan (src/sessionplan/sessions.json)

Strukturiert Sessions nach Tagen und Zeitslots:

{
"samstag": {
"11:00 - 12:00": [
{
"id": "10",
"room": "Raum Alpha",
"title": "Einfuhrung in moderne Entwicklungsmethoden",
"host": "Max Mustermann",
"votes": 0,
"cancelled": false
}
]
},
"sonntag": {
"10:00 - 11:00": [
{
"id": "100",
"room": "Raum Beta",
"title": "Erfahrungsaustausch",
"host": "Lisa Schmidt",
"votes": 0,
"cancelled": false
}
]
}
}

Zeitplan (src/timetable/timetable.json)

Zeitplan fur das gesamte Event:

{
"freitag": {
"18:00 - 21:00 Uhr": [
{
"room": "Empfangsbereich",
"title": "Check-in und Networking"
}
]
},
"samstag": {
"09:30 Uhr": [
{
"room": "Hauptraum",
"title": "Begrussung und Vorstellungsrunde"
}
]
}
}

News (src/news.json)

Event-News mit Zeitfenstern:

{
"permanent": [
{
"id": "1",
"content": "Willkommen zur Event-Demo!",
"priority": "medium"
}
],
"days": {
"2025-11-15": [
{
"id": "10",
"content": "Die Turen offnen um 18:00 Uhr.",
"timeFrom": "16:00",
"timeTo": "20:00",
"priority": "high"
}
]
}
}

Speisekarten (src/food/menue.json)

Menu nach Tagen und Mahlzeiten:

{
"samstag": {
"Fruhstuck": [
{
"name": "Brotchen-Auswahl",
"variants": [
{
"name": "Vollkorn",
"allergens": ["A"]
}
]
}
],
"Mittagessen": [
{
"name": "Pasta-Station",
"variants": [
{
"name": "Bolognese",
"allergens": ["A", "G", "I"]
}
]
}
]
}
}

Allergene (src/food/allergene.json)

Allergen-Codes und Beschreibungen:

{
"A": "Glutenhaltiges Getreide",
"C": "Eier",
"G": "Milch",
"I": "Fleisch",
"L": "Schwefeldioxid und Sulfite"
}

Sponsoren (src/sponsors/sponsors.json)

Sponsoren-Liste:

{
"sponsors": [
{
"name": "Sponsor 1",
"logo": "sponsor-placeholder.png",
"url": "https://example.com",
"beschreibung": "Beschreibung des Sponsors"
}
]
}

Navigation (src/menu.json)

Hauptnavigation der App:

{
"items": [
{
"title": "Sessionplan",
"url": "/sessionplan/",
"description": "",
"icon": "calendar",
"active": true
},
{
"title": "WLAN",
"url": "",
"description": "EventWiFi / test123",
"icon": "wifi",
"active": true
}
]
}

JSON-Dateien fur neue Events anpassen

Schritt-fur-Schritt-Anleitung:

  1. Sessionplan aktualisieren (src/sessionplan/sessions.json):

    • Tage anpassen (z.B. samstag, sonntag - freitag, samstag)
    • Zeitslots anpassen (z.B. 11:00 - 12:00 - 10:00 - 11:00)
    • Raum-Namen aktualisieren
    • Session-Titel, Hosts und IDs anpassen

  2. Zeitplan erstellen (src/timetable/timetable.json):

    • Event-Tage definieren
    • Zeitslots mit Raumen und Aktivitaten hinzufugen
    • Struktur: "Tag": { "Zeit": [{"room": "Raum", "title": "Aktivitat"}] }

  3. News konfigurieren (src/news.json):

    • Permanente News in permanent Array
    • Tages-spezifische News in days Objekt
    • Zeitfenster mit timeFrom/timeTo (optional)
    • Prioritaten: high, medium, low

  4. Speisekarten erstellen (src/food/menue.json):

    • Mahlzeiten nach Tagen strukturieren
    • Allergen-Codes aus allergene.json verwenden
    • Varianten fur verschiedene Optionen

  5. Sponsoren hinzufugen (src/sponsors/sponsors.json):

    • Logo-Dateien in src/sponsors/ ablegen
    • URLs und Beschreibungen anpassen

  6. Navigation anpassen (src/menu.json):

    • Menupunkte aktivieren/deaktivieren
    • URLs und Beschreibungen aktualisieren
    • WLAN-Informationen anpassen

Tipp: Alle JSON-Dateien werden automatisch gehasht und gecacht. Nach Anderungen make build ausfuhren!

Voting-System

Das Voting-System ermoglicht es Teilnehmern, Sessions zu bewerten und die beliebtesten Sessions zu ermitteln.

Aktivierung

Das Voting-System kann uber event.json die zeitgesteuer aktiviert werden:

{
"features": {
"voting": true,
"votingSchedule": [
{
"day": "samstag",
"dayLabel": "Samstag",
"dayOfWeek": 6,
"startTime": "16:00",
"endTime": "17:45"
}
],
"votingAdminKey": "dein-geheimes-admin-passwort"
}
}

Zusatzlich kann das Voting auch uber den Admin-Bereich de/aktiviert oder beendet werden.

Voting-Konfiguration

  • voting: Aktiviert/deaktiviert das Voting-System
  • votingSchedule: Zeitfenster fur Abstimmungen
    • day: Interner Tag-Name (z.B. "samstag")
    • dayLabel: Anzeige-Name (z.B. "Samstag")
    • dayOfWeek: Wochentag als Zahl (0=Sonntag, 6=Samstag)
    • startTime / endTime: Zeitfenster fur Abstimmungen
  • votingAdminKey: Geheimes Passwort fur Admin-Bereich

Voting-Logik: Wann wird das Voting-Fenster angezeigt?

Das Voting-Fenster wird nur angezeigt, wenn alle folgenden Bedingungen erfullt sind:

1. Feature-Flag aktiv

// event.json
{
"features": {
"voting": true // - Muss auf true stehen
}
}

2. Admin-Status "active"

// src/votes/voting-state.json
{
"status": "active" // - Mogliche Werte: "inactive", "active", "ended"
}

Der Status kann uber den Admin-Bereich geandert werden.

3. Zeitfenster aktiv

Das aktuelle Datum und die Uhrzeit mussen innerhalb eines konfigurierten Zeitfensters liegen:

// event.json
{
"features": {
"votingSchedule": [
{
"dayOfWeek": 6, // Samstag
"startTime": "16:00", // - Voting offnet um 16:00 Uhr
"endTime": "17:45" // - Voting schliesst um 17:45 Uhr
}
]
}
}

Prufung: System vergleicht aktuellen Wochentag (0=Sonntag, 6=Samstag) und Uhrzeit mit der Konfiguration.

4. GET-Parameter Override (nur fur Testing)

Fur Entwicklung und Tests kann die Zeitfenster-Prufung ubersprungen werden:

?vote=samstag // Zeigt Voting fur z. B. Samstag

Wichtig: Feature-Flag und Admin-Status mussen trotzdem aktiv sein!

Zusammenfassung der Prufreihenfolge

1. voting: true in event.json?
+- Nein - Kein Voting
+- Ja - Weiter zu Schritt 2

2. status: "active" in voting-state.json?
+- Nein (inactive/ended) - Kein Voting
+- Ja - Weiter zu Schritt 3

3. GET-Parameter ?vote=... vorhanden?
+- Ja - Voting anzeigen (Zeitfenster ubersprungen)
+- Nein - Weiter zu Schritt 4

4. Aktuelles Datum/Uhrzeit in votingSchedule?
+- Nein - Kein Voting
+- Ja - Voting anzeigen

Nutzung

Von Teilnehmern:

  • Voting-Button erscheint im Sessionplan wahrend der konfigurierten Zeitfenster
  • Jeder Teilnehmer kann eine Stimme pro Tag abgeben
  • Abstimmung erfolgt via Browser-Fingerprint (anonymisiert)
  • Top 3 Sessions werden mit Medaillen () angezeigt

Admin-Bereich

Zugriff auf Admin-Bereich und Ergebnisse:

http://localhost:5173/votes/admin.php?key=DEIN-ADMIN-PASSWORT

Features:

  • Live-Statistik der des Votings
  • De/aktivieren und Beenden von Votings
  • Ubermitteln der Ergebnisse in die sessions.json fur Winner-Badge-Anzeige (TOP3)

Deployment:

Die votes.json und voting-state.json sollten bei einem Deployment nicht uberschrieben werden

Entwicklung

Befehle

Setup & Build

Befehl Beschreibung
make install Node.js Dependencies installieren
make build Produktionsversion bauen (Cache-Busting)
make clean Vollstandige Bereinigung (node_modules, build, Docker)
make generate-icons PWA-Icons aus icon.png generieren

Development (Port 5173 - src/)

Befehl Beschreibung
make dev-up Entwicklungsserver starten
make dev-down Entwicklungsserver stoppen
make dev-rebuild Docker Image neu bauen (ohne Cache)
make dev-logs Live-Logs anzeigen
make dev-remove Container + Volumes entfernen

Production Testing (Port 5174 - build/)

Befehl Beschreibung
make prod-up Production-Test-Server starten (inkl. Build)
make prod-down Production-Test-Server stoppen
make prod-rebuild Docker Image neu bauen (ohne Cache)
make prod-logs Live-Logs anzeigen
make prod-remove Container + Volumes entfernen

Testing

Befehl Beschreibung
make test Standard Tests (119 Tests, Port 5174, nginx + PHP-FPM)
make test-php Voting/PHP Tests (23 Tests, Port 5174, nginx + PHP-FPM)
make test-translations Ubersetzungs-Tests (42 Tests, DE + EN)
make test-translations-de Ubersetzungs-Tests nur Deutsch (21 Tests)
make test-translations-en Ubersetzungs-Tests nur Englisch (21 Tests)
make test-all Alle Tests (142 Tests, Standard + PHP + Translations)
make test-headed Standard Tests mit sichtbarem Browser
make test-php-headed Voting/PHP Tests mit sichtbarem Browser
make test-report HTML Test-Report offnen

Internationalisierung (i18n)

Unterstutzte Sprachen

  • Deutsch (de)
  • Englisch (en)

i18n-Konfiguration

Sprache in event.json festlegen:

{
"event": {
"locale": "de"
}
}

Ubersetzungen hinzufugen

  1. Schlussel zu src/translations/de.json hinzufugen:

    {
    "myFeature": {
    "title": "Mein Feature"
    }
    }

  2. Denselben Schlussel zu src/translations/en.json hinzufugen:

    {
    "myFeature": {
    "title": "My Feature"
    }
    }

  3. In HTML verwenden:

    <h1 data-i18n="myFeature.title">My Featureh1>

  4. Uberprufen:

    make test

Architektur

Tech-Stack

  • Frontend: Vanilla JavaScript (keine Frameworks!)
  • Styling: Reines CSS (keine Praprozessoren)
  • Backend: PHP (nur Voting-System)
  • PWA: Service Worker, Web App Manifest
  • Build: Node.js (Cache-Busting, Icon-Generierung)
  • Testing: Playwright (Cross-Browser)
  • Server: nginx (Docker fur Entwicklung)

Caching-Strategie

3-Schichten-Caching-System:

  1. Service Worker Cache - Offline-Funktionalitat
  2. localStorage Cache - JSON-Daten (1-Stunden-TTL)
  3. Cache Busting - MD5-gehashte Dateinamen

Beispiel:

  • app.css - app.b417865e.css
  • menu.json - menu.ec9daa78.json
  • header.js - header.e3796179.js

Alle Hash-Updates erfolgen automatisch wahrend des Builds!

PWA-Features

  • Installierbar - Zum Startbildschirm hinzufugen (Android, iOS, Desktop)
  • Offline-First - Funktioniert ohne Internet
  • Schnell - Gecachte Assets, sofortiges Laden
  • Responsiv - Mobil, Tablet, Desktop
  • Sicher - HTTPS erforderlich
  • Auto-Updates - Service Worker Updates

Lizenz

Dieses Projekt ist lizenziert unter der GNU Affero General Public License v3.0 (AGPL-3.0).

Was bedeutet das?

  • Freie Nutzung - Sie konnen die Software frei verwenden, modifizieren und verteilen
  • Open Source - Der Quellcode bleibt immer verfugbar
  • SaaS-geschutzt - Auch bei Web-Service-Betrieb muss der Code offengelegt werden
  • Copyleft - Anderungen mussen unter derselben Lizenz veroffentlicht werden
  • Netzwerk-Nutzung - Bei SaaS-Betrieb muss ein Link zum Quellcode bereitgestellt werden

Fur Closed-Source oder proprietare Nutzung ist eine separate kommerzielle Lizenz erforderlich.

Siehe LICENSE fur den vollstandigen Lizenztext.

Mit entwickelt fur das DevOps Camp.

(c) Proud Commerce | 2025

About

PWA Event-App fur BarCamps und Unkonferenzen.

Topics

Resources

Readme

License

View license

Stars

Watchers

Forks

Contributors