Eine moderne Next.js-Anwendung, mit der Sie beliebige Dateien in QR-Codes umwandeln und diese dann mit einem anderen Gerät scannen können, um die ursprüngliche Datei zu rekonstruieren.

• 📤 Datei-Upload: Laden Sie beliebige Dateien (Bilder, Dokumente, etc.) hoch
• 🎯 QR-Code-Generierung: Konvertiert Dateien automatisch in eine Serie von QR-Codes
• 📱 QR-Code-Scanner: Eingebauter Kamera-Scanner zum Rekonstruieren von Dateien
• 💾 Download-Funktionen:
  • QR-Codes als ZIP-Datei herunterladen
  • Gescannte Dateien automatisch herunterladen
• 🔧 Intelligente Chunking: Große Dateien werden automatisch in mehrere QR-Codes aufgeteilt
• 📊 Fortschrittsanzeige: Zeigt den Scan-Fortschritt visuell an
• 🎨 Modernes UI: Responsive Design mit Tailwind CSS
• 🔄 Flexible Reihenfolge: QR-Codes können in beliebiger Reihenfolge gescannt werden
• 🔒 Datenschutz: Alle Verarbeitung erfolgt lokal im Browser
• ⚡ Optimiert für Lesbarkeit: Kleinere Chunks, höhere Fehlerkorrektur, bessere QR-Code-Qualität
• 🔍 Verbesserte Erkennung: Robustere Scanning-Algorithmen für schwierige Bedingungen## 🚀 Installation

• Node.js (Version 18 oder höher)
• npm oder yarn

1. Repository klonen:

git clone https://github.com/MettaBlender/file-to-qr-code.git

cd file-to-qr-code

2. Abhängigkeiten installieren:

npm install

3. Entwicklungsserver starten:

npm run dev

4. App öffnen: Öffnen Sie http://localhost:3000 in Ihrem Browser.

1. Tab "Datei zu QR-Code" auswählen
2. Datei auswählen über den Upload-Button
3. "QR-Codes generieren" klicken
4. QR-Codes werden angezeigt - Die App zeigt alle generierten QR-Codes an
5. Optional: QR-Codes als ZIP-Datei herunterladen für einfache Weiterleitung

1. Tab "QR-Code scannen" auswählen
2. "Kamera starten" klicken und Kamera-Berechtigung erteilen
3. QR-Codes scannen - Reihenfolge ist egal! Die App erkennt automatisch:
   • Welcher QR-Code bereits gescannt wurde
   • Wie viele QR-Codes noch fehlen
   • Den Fortschritt in Echtzeit
4. Automatischer Download - Sobald alle QR-Codes gescannt wurden, wird die ursprüngliche Datei automatisch heruntergeladen

• Next.js 15 - React-Framework mit App Router
• React 19 - UI-Framework
• Tailwind CSS 4 - Modernes Styling
• qrcode - QR-Code-Generierung
• qr-scanner - QR-Code-Scanning mit Kamera
• jszip - ZIP-Archiv-Erstellung
• file-saver - Browser-Datei-Downloads

1. Datei-Verarbeitung: Dateien werden in Base64 konvertiert und mit Metadaten versehen
2. Chunking: Große Datenmengen werden in QR-Code-taugliche Chunks aufgeteilt (max. 2000 Zeichen)
3. QR-Code-Generierung: Jeder Chunk wird mit Index- und Validierungsinformationen in einen QR-Code umgewandelt
4. Anzeige: QR-Codes werden übersichtlich dargestellt

1. Kamera-Scanning: Eingebauter Scanner erkennt QR-Codes automatisch
2. Intelligente Verarbeitung:
   • Duplikate werden ignoriert
   • Reihenfolge spielt keine Rolle
   • Fortschritt wird live angezeigt
3. Validierung: Überprüfung auf Vollständigkeit und Integrität
4. Rekonstruktion: Gescannte Chunks werden in der richtigen Reihenfolge zusammengefügt
5. Download: Ursprüngliche Datei wird automatisch heruntergeladen

• Bilder: JPG, PNG, GIF, SVG, WebP, etc.
• Dokumente: PDF, DOC, DOCX, TXT, etc.
• Archive: ZIP, RAR, 7Z, etc.
• Code: JS, HTML, CSS, JSON, etc.
• Alle anderen Dateiformate

• ✅ Keine Server-Übertragung: Alle Verarbeitung erfolgt lokal im Browser
• ✅ Keine Datenspeicherung: Dateien werden nicht gespeichert oder übertragen
• ✅ Client-seitige Verarbeitung: Höchste Privatsphäre und Sicherheit
• ✅ Offline-fähig: Funktioniert ohne Internetverbindung
• ✅ Open Source: Transparenter und verifizierbarer Code

• ✅ Chrome/Chromium (empfohlen)
• ✅ Firefox
• ✅ Safari
• ✅ Edge

• Kamera-Zugriff: Erforderlich für QR-Code-Scanning
• HTTPS oder localhost: Für Kamera-Berechtigung erforderlich
• JavaScript aktiviert: Für alle Funktionen erforderlich

• 📱 Smartphones (iOS & Android)oid)
• 📟 Tablets
• 💻 Desktop-Computer

• Touch-optimierte Benutzeroberfläche
• Responsive Design für alle Bildschirmgrößen
• PWA-Unterstützung (installierbar als App)
• Optimierte Kamera-Performance

1. Computer → Smartphone: QR-Codes auf dem Computer generieren, mit dem Smartphone scannen
2. Smartphone → Computer: QR-Codes auf dem Smartphone generieren, mit Computer-Webcam scannen
3. Smartphone → Smartphone: Dateien zwischen zwei Geräten übertragen

# Entwicklungsserver mit Turbopack (empfohlen)
npm run dev



# Production Build erstellen
npm run build



# Production Server starten
npm run start



# Code Linting
npm run lintt

src/
├── app/
│   ├── page.js              # Haupt-Anwendung mit QR-Code-Funktionalität
│   ├── layout.js            # App-Layout mit PWA-Konfiguration
│   ├── globals.css          # Globale Styles (Tailwind)
│   └── api/                 # API-Routen (legacy, nicht mehr verwendet)
public/
├── manifest.json            # PWA-Manifest für App-Installation
└── ...                      # Statische Assets
 Assets

• Lösung: Stellen Sie sicher, dass die App über HTTPS oder localhost aufgerufen wird
• Chrome: Überprüfen Sie die Kamera-Berechtigungen in den Browser-Einstellungen
• Mobile: Erlauben Sie Kamera-Zugriff wenn nachgefragt

• Bildschirm-Helligkeit: Stellen Sie die Helligkeit auf Maximum
• Abstand: Halten Sie die Kamera 10-30cm vom QR-Code entfernt
• Stabilität: Halten Sie das Gerät ruhig beim Scannen
• Qualität: Stellen Sie sicher, dass der QR-Code scharf und vollständig sichtbar ist

• Vollständigkeit: Stellen Sie sicher, dass alle QR-Codes gescannt wurden
• Browser-Speicher: Bei sehr großen Dateien kann der Browser-Speicher begrenzt sein
• Format: Überprüfen Sie, ob die ursprüngliche Datei korrekt war

Öffnen Sie die Browser-Konsole (F12) um detaillierte Logging-Informationen zu sehen.

Wir freuen uns über Beiträge zur Verbesserung der App!

1. Fork das Repository
2. Feature-Branch erstellen: git checkout -b feature/AmazingFeature
3. Änderungen committen: git commit -m 'Add some AmazingFeature'
4. Branch pushen: git push origin feature/AmazingFeature
5. Pull Request erstellen

• Folgen Sie den bestehenden Code-Konventionen
• Testen Sie Ihre Änderungen gründlich
• Dokumentieren Sie neue Features
• Berücksichtigen Sie Mobile-Kompatibilität

• 🔐 Verschlüsselung: Optionale Passwort-Verschlüsselung für sensible Dateien
• 📊 Komprimierung: Datei-Komprimierung für kleinere QR-Codes
• 🎨 Anpassbare QR-Codes: Farbige und branded QR-Codes
• 📱 PWA-Verbesserungen: Vollständige Offline-Funktionalität
• 🔄 Batch-Verarbeitung: Mehrere Dateien gleichzeitig verarbeiten

Dieses Projekt ist unter der MIT-Lizenz lizenziert - siehe die LICENSE Datei für Details.

• ✅ Kommerzielle Nutzung erlaubt
• ✅ Modifikation erlaubt
• ✅ Distribution erlaubt
• ✅ Private Nutzung erlaubt
• ❌ Keine Haftung
• ❌ Keine Garantie

• qrcode - Excellente QR-Code-Generierung
• qr-scanner - Zuverlässiges QR-Code-Scanning
• Next.js - Fantastisches React-Framework
• Tailwind CSS - Modernes und flexibles Styling
• Vercel - Hosting und Deployment-Platform

Bei Fragen oder Problemen:

1. GitHub Issues: Erstellen Sie ein Issue
2. Dokumentation: Lesen Sie diese README gründlich
3. Browser-Konsole: Überprüfen Sie die Konsole auf Fehlermeldungen

Erstellt mit ❤️ von Aaron Mettler

Genießen Sie die sichere und einfache Dateiübertragung ohne Cloud-Services!

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.