🏠 OpenWall

Ein Smart Home Dashboard für modernes Wohnen

Kalender-Synchronisation, Notizen und Einkaufslisten mit nahtloser Handy- und Tablet-Integration

Funktionen • Architektur • Schnellstart • Installation • Entwicklung

---

🌟 Funktionen

📅 Kalender-Integration

• Synchronisation mit Ihren bevorzugten Kalender-Diensten
• Saubere, intuitive Benutzeroberfläche optimiert für Touch-Displays
• Perfekt für wandmontierte Tablets und Smart Displays

📝 Notizen-Verwaltung

• Schnelle Notizerstellung und -organisation
• Nahtlose Synchronisation zwischen Geräten
• Touch-freundliche Benutzeroberfläche für einfache Bedienung

🛒 Intelligente Einkaufslisten

• Gemeinsame Einkaufslisten für Familien
• Echtzeit-Synchronisation zwischen Geräten
• Mobile-optimierte Begleit-App
• Automatische Bereinigung erledigter Einträge

🎨 Schönes Design

• Moderne, responsive Benutzeroberfläche
• Optimiert für Hochformat-Displays (9:16 Verhältnis)
• Atemberaubende Hintergrundbilder
• Touch-First Interaktionsdesign

📱 Multi-Platform Unterstützung

• Desktop: Vollständiges Electron Dashboard
• Mobile: Progressive Web App für Einkaufslisten
• Embedded: Benutzerdefinierte Linux OS Installation für dedizierte Displays

🏗️ Architektur

OpenWall ist als modernes, skalierbares System mit mehreren Komponenten aufgebaut:

📦 OpenWall
├── 🖥️  dashboard/          # Electron Desktop-Anwendung
├── 📱  mobile-shopping/     # Mobile PWA für Einkaufslisten
├── 🔧  server/             # Express.js Backend API
└── 🐧  os/                 # Linux OS Installer & Konfiguration

Technologie-Stack

Komponente	Technologie	Zweck
Frontend	React 19 + Vite	Moderne, schnelle UI-Entwicklung
Desktop	Electron 35	Plattformübergreifende Desktop-App
Mobile	PWA + React	Native-ähnliche mobile Erfahrung
Backend	Express.js + SQLite	RESTful API & Datenpersistierung
Styling	Sass	Schöne, wartbare Stylesheets
Package Manager	pnpm	Schnelles, effizientes Dependency Management

🚀 Schnellstart

Voraussetzungen

• Node.js 18 oder höher
• pnpm (empfohlen) oder npm
• Git

1. Repository klonen

git clone https://github.com/yourusername/OpenWall.git
cd OpenWall

2. Backend-Server starten

cd server
pnpm install
pnpm start

Der Server startet auf http://localhost:3001

3. Dashboard starten

cd ../dashboard
pnpm install
pnpm dev

Das Dashboard öffnet sich automatisch im Entwicklungsmodus.

4. Mobile App ausprobieren (Optional)

cd ../mobile-shopping
pnpm install
pnpm dev

Zugriff auf die mobile App unter http://localhost:5173

🔧 Installation

Option 1: Entwicklungsumgebung

Perfekt für Entwicklung und Tests:

# Alle Abhängigkeiten installieren
pnpm install

# Alle Services im Entwicklungsmodus starten
pnpm dev

Option 2: Produktions-Deployment

Für dedizierte Wanddisplays und Smart Home Setups:

Manuelle Installation

# Dashboard bauen
cd dashboard
pnpm install
pnpm build

# Mobile App bauen
cd ../mobile-shopping
pnpm install
pnpm build

# Produktionsserver starten
cd ../server
pnpm install
NODE_ENV=production pnpm start

Automatisierte Linux Installation

Für Debian-basierte Systeme mit automatischem Kiosk-Modus Setup:

# Als root ausführen
sudo ./os/install.sh

Dieser Installer wird:

• ✅ Einen dedizierten Benutzeraccount erstellen
• ✅ Alle Abhängigkeiten installieren
• ✅ Wayland/Sway für Touch-Displays konfigurieren
• ✅ Auto-Start beim Booten einrichten
• ✅ Für 9:16 Hochformat-Displays optimieren
• ✅ Touch-Input-Kalibrierung aktivieren

💻 Entwicklung

Projektstruktur

dashboard/                  # Haupt-Electron-Anwendung
├── src/
│   ├── main/              # Electron Hauptprozess
│   ├── preload/           # Preload-Skripte
│   └── renderer/          # React Frontend
│       ├── src/
│       │   ├── pages/     # Anwendungsseiten
│       │   ├── common/    # Geteilte Komponenten
│       │   ├── services/  # API Services
│       │   └── utils/     # Hilfsfunktionen
│       └── index.html
├── build/                 # Build-Assets (Icons, etc.)
└── package.json

mobile-shopping/           # Mobile PWA
├── src/
│   ├── services/         # API Integration
│   └── utils/           # Geteilte Hilfsmittel
└── public/              # PWA Assets

server/                   # Backend API
├── models/              # Datenbank-Modelle
├── routes/              # API Routen
├── database.sqlite      # SQLite Datenbank
└── index.js            # Haupt-Server-Datei

os/                      # System-Installation
├── install.sh          # Automatisierter Installer
└── build-iso.sh        # Custom ISO Builder

Verfügbare Skripte

Dashboard (Electron)

pnpm dev          # Entwicklungsmodus mit Hot Reload
pnpm build        # Für Produktion bauen
pnpm start        # Gebaute Anwendung starten
pnpm build:mac    # macOS App bauen
pnpm build:win    # Windows App bauen
pnpm build:linux  # Linux App bauen

Mobile Shopping (PWA)

pnpm dev          # Entwicklungsserver
pnpm build        # Für Produktion bauen
pnpm preview      # Gebaute App anzeigen

Server (Express.js)

pnpm start        # Produktionsserver starten
pnpm dev          # Entwicklung mit nodemon

API Endpunkte

Methode	Endpunkt	Beschreibung
GET	/api/health	Server-Gesundheitscheck
GET	/api/shopping	Alle Einkaufsartikel abrufen
POST	/api/shopping	Neuen Einkaufsartikel erstellen
PUT	/api/shopping/:id	Einkaufsartikel aktualisieren
DELETE	/api/shopping/:id	Einkaufsartikel löschen

Umgebungsvariablen

Erstellen Sie .env Dateien im Server-Verzeichnis:

PORT=3001
NODE_ENV=development
DATABASE_URL=sqlite:./database.sqlite

🎯 Anwendungsfälle

🏠 Smart Home Display

Perfekt für wandmontierte Tablets in Küchen, Fluren oder Familienzimmern. Die Hochformat-Ausrichtung und touch-optimierte Benutzeroberfläche machen es ideal für schnelle Interaktionen.

👨‍👩‍👧‍👦 Familienorganisation

Halten Sie alle mit geteilten Kalendern, Familiennotizen und gemeinsamen Einkaufslisten synchron, die nahtlos auf allen Geräten funktionieren.

🏢 Büro & Co-Working

Verwenden Sie es in Büroumgebungen für Teamkalender, geteilte Notizen und Büromaterial-Verwaltung.

🎛️ Digitaler Kiosk

Einsatz als eigenständiges Kiosk-System mit der enthaltenen Linux-Installation für dedizierte Displays.

📄 Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert - siehe die LICENSE Datei für Details.

🙏 Danksagungen

• Electron Team für das exzellente Desktop-Framework
• React Community für das großartige Ökosystem
• Pixabay für die schönen Hintergrundbilder

📞 Support

• 🐛 Issues: GitHub Issues
• 💬 Diskussionen: GitHub Discussions
• 📧 E-Mail: your-email@example.com

---

Erstellt mit ❤️ von Mathias Wagner

Verwandeln Sie Ihren Raum mit OpenWall in eine intelligente, vernetzte Umgebung