8.1 KiB
🏠 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