# 🏠 OpenWall
![OpenWall Logo](assets/logo.svg) **Ein Smart Home Dashboard für modernes Wohnen** *Kalender-Synchronisation, Notizen und Einkaufslisten mit nahtloser Handy- und Tablet-Integration* [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Node.js](https://img.shields.io/badge/Node.js-18%2B-green.svg)](https://nodejs.org/) [![React](https://img.shields.io/badge/React-19.1.0-blue.svg)](https://reactjs.org/) [![Electron](https://img.shields.io/badge/Electron-35.1.5-purple.svg)](https://electronjs.org/) [Funktionen](#-funktionen) • [Architektur](#-architektur) • [Schnellstart](#-schnellstart) • [Installation](#-installation) • [Entwicklung](#-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 ```bash git clone https://github.com/yourusername/OpenWall.git cd OpenWall ``` ### 2. Backend-Server starten ```bash cd server pnpm install pnpm start ``` Der Server startet auf `http://localhost:3001` ### 3. Dashboard starten ```bash cd ../dashboard pnpm install pnpm dev ``` Das Dashboard öffnet sich automatisch im Entwicklungsmodus. ### 4. Mobile App ausprobieren (Optional) ```bash 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: ```bash # 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 ```bash # 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: ```bash # 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) ```bash 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) ```bash pnpm dev # Entwicklungsserver pnpm build # Für Produktion bauen pnpm preview # Gebaute App anzeigen ``` #### Server (Express.js) ```bash 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: ```env 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](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](https://github.com/yourusername/OpenWall/issues) - 💬 **Diskussionen**: [GitHub Discussions](https://github.com/yourusername/OpenWall/discussions) - 📧 **E-Mail**: [your-email@example.com](mailto:your-email@example.com) ---
**Erstellt mit ❤️ von [Mathias Wagner](https://git.gnm.dev/Mathias/OpenWall)** *Verwandeln Sie Ihren Raum mit OpenWall in eine intelligente, vernetzte Umgebung*