feat(frontend): Tauri Apps, Shared UI Library und Nix Flake

- packages/ui: Shared React Component Library (Button, Card, Badge, Input) mit Tailwind v4 @theme Design Tokens (oklch) - apps/web: ERP Web-UI (Vite + React + Tailwind v4, API-Proxy :8080) - apps/scanner: Tauri v2 Mobile App mit Barcode-Scanner Plugin (cfg(mobile) für Desktop-Kompatibilität) - flake.nix: Nix Flake mit rust-overlay, Tauri System-Deps (GTK, WebKitGTK, libsoup, OpenSSL), ersetzt shell.nix - justfile: Dev-Befehle für alle Projekte (backend, cli, web, scanner) - frontend/CLAUDE.md: Agent Guide mit Base UI Docs Referenz
2026-03-28 10:29:35 +01:00 · 2026-03-19 16:45:47 +01:00 · 2026-03-19 16:45:47 +01:00 · ef50eb8279
commit ef50eb8279
parent b9b89e3f0e
96 changed files with 11682 additions and 16 deletions
--- a/frontend/apps/scanner/index.html
+++ b/frontend/apps/scanner/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Effigenix Scanner</title>
+  </head>
+  <body class="bg-warm-50 text-warm-900 font-sans antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/apps/scanner/package.json
+++ b/frontend/apps/scanner/package.json
@ -0,0 +1,35 @@
+{
+  "name": "@effigenix/scanner",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Effigenix mobile scanner app (Tauri v2)",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-barcode-scanner": "^2.0.0",
+    "@effigenix/ui": "workspace:*",
+    "@effigenix/api-client": "workspace:*",
+    "@effigenix/types": "workspace:*",
+    "@effigenix/validation": "workspace:*",
+    "@effigenix/config": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "@tauri-apps/cli": "^2.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^6.0.0"
+  }
+}
--- a/frontend/apps/scanner/src-tauri/Cargo.lock
+++ b/frontend/apps/scanner/src-tauri/Cargo.lock
--- a/frontend/apps/scanner/src-tauri/Cargo.toml
+++ b/frontend/apps/scanner/src-tauri/Cargo.toml
@ -0,0 +1,20 @@
+[package]
+name = "effigenix-scanner"
+version = "0.1.0"
+description = "Effigenix mobile scanner app"
+edition = "2021"
+
+[lib]
+name = "effigenix_scanner_lib"
+crate-type = ["lib", "cdylib", "staticlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+
+[target.'cfg(any(target_os = "android", target_os = "ios"))'.dependencies]
+tauri-plugin-barcode-scanner = "2"
--- a/frontend/apps/scanner/src-tauri/build.rs
+++ b/frontend/apps/scanner/src-tauri/build.rs
@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
--- a/frontend/apps/scanner/src-tauri/capabilities/default.json
+++ b/frontend/apps/scanner/src-tauri/capabilities/default.json
@ -0,0 +1,8 @@
+{
+  "identifier": "default",
+  "description": "Default capabilities for the scanner app",
+  "windows": ["main"],
+  "permissions": [
+    "core:default"
+  ]
+}
--- a/frontend/apps/scanner/src-tauri/gen/schemas/acl-manifests.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/acl-manifests.json
--- a/frontend/apps/scanner/src-tauri/gen/schemas/capabilities.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/capabilities.json
@ -0,0 +1 @@
+{"default":{"identifier":"default","description":"Default capabilities for the scanner app","local":true,"windows":["main"],"permissions":["core:default"]}}
--- a/frontend/apps/scanner/src-tauri/gen/schemas/desktop-schema.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/desktop-schema.json
--- a/frontend/apps/scanner/src-tauri/gen/schemas/linux-schema.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/linux-schema.json
--- a/frontend/apps/scanner/src-tauri/icons/128x128.png
+++ b/frontend/apps/scanner/src-tauri/icons/128x128.png
--- a/frontend/apps/scanner/src-tauri/icons/128x128@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/128x128@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/32x32.png
+++ b/frontend/apps/scanner/src-tauri/icons/32x32.png
--- a/frontend/apps/scanner/src-tauri/icons/64x64.png
+++ b/frontend/apps/scanner/src-tauri/icons/64x64.png
--- a/frontend/apps/scanner/src-tauri/icons/Square107x107Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square107x107Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square142x142Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square142x142Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square150x150Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square150x150Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square284x284Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square284x284Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square30x30Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square30x30Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square310x310Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square310x310Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square44x44Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square44x44Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square71x71Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square71x71Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square89x89Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square89x89Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/StoreLogo.png
+++ b/frontend/apps/scanner/src-tauri/icons/StoreLogo.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/values/ic_launcher_background.xml
+++ b/frontend/apps/scanner/src-tauri/icons/android/values/ic_launcher_background.xml
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>
--- a/frontend/apps/scanner/src-tauri/icons/icon.icns
+++ b/frontend/apps/scanner/src-tauri/icons/icon.icns
--- a/frontend/apps/scanner/src-tauri/icons/icon.ico
+++ b/frontend/apps/scanner/src-tauri/icons/icon.ico
--- a/frontend/apps/scanner/src-tauri/icons/icon.png
+++ b/frontend/apps/scanner/src-tauri/icons/icon.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-512@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-512@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
--- a/frontend/apps/scanner/src-tauri/src/lib.rs
+++ b/frontend/apps/scanner/src-tauri/src/lib.rs
@ -0,0 +1,11 @@
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    let builder = tauri::Builder::default();
+
+    #[cfg(mobile)]
+    let builder = builder.plugin(tauri_plugin_barcode_scanner::init());
+
+    builder
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
--- a/frontend/apps/scanner/src-tauri/src/main.rs
+++ b/frontend/apps/scanner/src-tauri/src/main.rs
@ -0,0 +1,5 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    effigenix_scanner_lib::run()
+}
--- a/frontend/apps/scanner/src-tauri/tauri.conf.json
+++ b/frontend/apps/scanner/src-tauri/tauri.conf.json
@ -0,0 +1,37 @@
+{
+  "$schema": "https://raw.githubusercontent.com/nicfit/tauri/tauri-v2/crates/tauri-cli/schema.json",
+  "productName": "Effigenix Scanner",
+  "version": "0.1.0",
+  "identifier": "de.effigenix.scanner",
+  "build": {
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:1420",
+    "beforeDevCommand": "pnpm dev",
+    "beforeBuildCommand": "pnpm build"
+  },
+  "app": {
+    "withGlobalTauri": false,
+    "windows": [
+      {
+        "title": "Effigenix Scanner",
+        "width": 400,
+        "height": 700,
+        "resizable": true
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}
--- a/frontend/apps/scanner/src/App.tsx
+++ b/frontend/apps/scanner/src/App.tsx
@ -0,0 +1,29 @@
+import { Button, Card } from '@effigenix/ui';
+
+export function App() {
+  return (
+    <div className="min-h-screen p-6">
+      <div className="mx-auto max-w-md space-y-6">
+        <h1 className="text-2xl font-bold text-brand-700">Effigenix Scanner</h1>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Chargen-Scanner</h2>
+          <p className="mb-4 text-sm text-warm-600">
+            QR-Code oder Barcode scannen, um Chargen-Details anzuzeigen.
+          </p>
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={() => {
+              // TODO: Barcode-Scanner Integration
+              console.log('Scan gestartet');
+            }}
+          >
+            Scan starten
+          </Button>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/frontend/apps/scanner/src/index.css
+++ b/frontend/apps/scanner/src/index.css
@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@effigenix/ui/theme.css';
+
+@source '../../packages/ui/src/**/*.{ts,tsx}';
--- a/frontend/apps/scanner/src/main.tsx
+++ b/frontend/apps/scanner/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/frontend/apps/scanner/src/vite-env.d.ts
+++ b/frontend/apps/scanner/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/apps/scanner/tsconfig.json
+++ b/frontend/apps/scanner/tsconfig.json
@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "composite": false,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true
+  },
+  "include": ["src"]
+}
--- a/frontend/apps/scanner/vite.config.ts
+++ b/frontend/apps/scanner/vite.config.ts
@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+const host = process.env.TAURI_DEV_HOST;
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  clearScreen: false,
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: 'ws',
+          host,
+          port: 1421,
+        }
+      : undefined,
+  },
+});
--- a/frontend/apps/web/index.html
+++ b/frontend/apps/web/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Effigenix ERP</title>
+  </head>
+  <body class="bg-warm-50 text-warm-900 font-sans antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/apps/web/package.json
+++ b/frontend/apps/web/package.json
@ -0,0 +1,31 @@
+{
+  "name": "@effigenix/web",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Effigenix ERP Web UI",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@effigenix/ui": "workspace:*",
+    "@effigenix/api-client": "workspace:*",
+    "@effigenix/types": "workspace:*",
+    "@effigenix/validation": "workspace:*",
+    "@effigenix/config": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^6.0.0"
+  }
+}
--- a/frontend/apps/web/src/App.tsx
+++ b/frontend/apps/web/src/App.tsx
@ -0,0 +1,43 @@
+import { Button, Card, Badge, Input } from '@effigenix/ui';
+
+export function App() {
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto max-w-3xl space-y-8">
+        <h1 className="text-3xl font-bold text-brand-700">Effigenix ERP</h1>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Buttons</h2>
+          <div className="flex flex-wrap gap-3">
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="danger">Danger</Button>
+            <Button variant="primary" disabled>
+              Disabled
+            </Button>
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Badges</h2>
+          <div className="flex flex-wrap gap-3">
+            <Badge variant="success">Aktiv</Badge>
+            <Badge variant="warning">Ausstehend</Badge>
+            <Badge variant="danger">Fehler</Badge>
+            <Badge variant="info">Info</Badge>
+            <Badge variant="neutral">Neutral</Badge>
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Input</h2>
+          <div className="max-w-sm space-y-3">
+            <Input placeholder="Artikelbezeichnung..." />
+            <Input placeholder="Disabled" disabled />
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/frontend/apps/web/src/index.css
+++ b/frontend/apps/web/src/index.css
@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@effigenix/ui/theme.css';
+
+@source '../../packages/ui/src/**/*.{ts,tsx}';
--- a/frontend/apps/web/src/main.tsx
+++ b/frontend/apps/web/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/frontend/apps/web/src/vite-env.d.ts
+++ b/frontend/apps/web/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/apps/web/tsconfig.json
+++ b/frontend/apps/web/tsconfig.json
@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "composite": false,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true
+  },
+  "include": ["src"]
+}
--- a/frontend/apps/web/vite.config.ts
+++ b/frontend/apps/web/vite.config.ts
@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+});
				`@ -0,0 +1 @@`
				`{"default":{"identifier":"default","description":"Default capabilities for the scanner app","local":true,"windows":["main"],"permissions":["core:default"]}}`