1
0
Files
OpenWall/README.md
2025-07-18 11:15:19 +02:00

8.1 KiB

🏠 OpenWall

OpenWall Logo

Ein Smart Home Dashboard für modernes Wohnen

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

License: MIT Node.js React Electron

FunktionenArchitekturSchnellstartInstallationEntwicklung


🌟 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


Erstellt mit ❤️ von Mathias Wagner

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