diff --git a/README.md b/README.md index 99e836e..bd5ffde 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,292 @@ -# OpenWall +# 🏠 OpenWall -Smart home dashboard for calendar syncing, notes, and shopping lists with seamless mobile and tablet integration. \ No newline at end of file +
+ +![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* + +
\ No newline at end of file diff --git a/assets/logo-small.svg b/assets/logo-small.svg new file mode 100644 index 0000000..2af9827 --- /dev/null +++ b/assets/logo-small.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..208ffbf --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard/resources/logo.svg b/dashboard/resources/logo.svg new file mode 100644 index 0000000..208ffbf --- /dev/null +++ b/dashboard/resources/logo.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +