https://github.com/walpurga03/kochrezepte
Eine moderne, Open-Source Web-Anwendung zur Verwaltung und Präsentation von Kochrezepten. Entwickelt mit React, TypeScript und Chakra UI, bietet sie ein responsives Design für eine nahtlose Benutzererfahrung auf Desktop und Mobilgeräten. Perfekt für Hobbyköche und Feinschmecker, die ihre Lieblingsrezepte digital organisieren und teilen möchten.
https://github.com/walpurga03/kochrezepte
chakra-ui cooking open-source react react-router recipe-app responsive-design typescript vite web-application
Last synced: 22 days ago
JSON representation
Eine moderne, Open-Source Web-Anwendung zur Verwaltung und Präsentation von Kochrezepten. Entwickelt mit React, TypeScript und Chakra UI, bietet sie ein responsives Design für eine nahtlose Benutzererfahrung auf Desktop und Mobilgeräten. Perfekt für Hobbyköche und Feinschmecker, die ihre Lieblingsrezepte digital organisieren und teilen möchten.
- Host: GitHub
- URL: https://github.com/walpurga03/kochrezepte
- Owner: Walpurga03
- Created: 2024-10-21T10:40:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-19T12:56:15.000Z (8 months ago)
- Last Synced: 2025-11-14T16:25:35.924Z (7 months ago)
- Topics: chakra-ui, cooking, open-source, react, react-router, recipe-app, responsive-design, typescript, vite, web-application
- Language: TypeScript
- Homepage: https://walpurga03.github.io/kochrezepte/
- Size: 5.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kochrezepte App
Eine moderne Web-Anwendung zur Verwaltung und Anzeige von Kochrezepten, entwickelt mit React, TypeScript und Chakra UI.
## 🌟 Features
- 📱 Responsive Design für Desktop und Mobile
- 🖼️ Ansprechende Darstellung von Rezepten mit Bildern
- 🔍 Detaillierte Ansicht für jedes Rezept
- ⏱️ Anzeige der Zubereitungszeit
- 📝 Auflistung von Zutaten und Zubereitungsschritten
- 🎨 Anpassbares Farbschema mit Chakra UI
## 🛠️ Technologien
- React
- TypeScript
- Chakra UI
- React Router
- Vite (als Build-Tool)
## 📁 Projektstruktur
```
kochrezepte-app/
│
├── public/
│ ├── images/ # Rezeptbilder
│ └── recipes/ # JSON-Datei mit Rezeptdaten
│
├── src/
│ ├── components/ # React-Komponenten
│ ├── pages/ # Seitenkomponenten
│ ├── types/ # TypeScript-Typdefinitionen
│ ├── utils/ # Hilfsfunktionen (z.B. API-Aufrufe)
│ ├── App.tsx # Hauptkomponente
│ ├── main.tsx # Einstiegspunkt der Anwendung
│ └── theme.ts # Chakra UI Theme-Konfiguration
│
├── recipe_manager.py # Python-Skript zur Rezeptverwaltung
├── README.md # Diese Datei
├── package.json # NPM-Paketdefinition
└── tsconfig.json # TypeScript-Konfiguration
```
## 🚀 Installation und Setup
1. Klonen Sie das Repository:
```
git clone https://github.com/yourusername/kochrezepte-app.git
cd kochrezepte-app
```
2. Installieren Sie die Abhängigkeiten:
```
npm install
```
3. Starten Sie den Entwicklungsserver:
```
npm run dev
```
4. Öffnen Sie die Anwendung in Ihrem Browser unter `http://localhost:5173/kochrezepte`
## 📝 Rezeptverwaltung
Zur Verwaltung der Rezepte wird ein Python-Skript (`recipe_manager.py`) verwendet. Dieses Skript ermöglicht das Erstellen, Anzeigen, Aktualisieren und Löschen von Rezepten.
Führen Sie das Skript aus, um Rezepte zu verwalten:
```
python recipe_manager.py
```
## 🖼️ Hinzufügen von Bildern
Platzieren Sie die Rezeptbilder im Verzeichnis `public/images/`. Stellen Sie sicher, dass der Dateiname des Bildes mit dem `image`-Feld im entsprechenden Rezept-JSON übereinstimmt.
## 🎨 Anpassen des Designs
Das Design der Anwendung kann durch Änderung der Theme-Konfiguration in `src/theme.ts` angepasst werden. Hier können Sie Farben, Schriftarten und andere Design-Elemente nach Ihren Wünschen ändern.
## 📄 Lizenz
Dieses Projekt ist unter der MIT-Lizenz lizenziert. Weitere Details finden Sie in der [LICENSE](LICENSE) Datei.
## 🤝 Beitragen
Als Open-Source-Projekt freuen wir uns über Beiträge jeder Art! Ob Sie Fehler melden, neue Funktionen vorschlagen oder Pull Requests einreichen möchten - Ihre Mitarbeit ist willkommen.
## 📞 Kontakt
Bei Fragen oder Anregungen können Sie mich über Nostr kontaktieren:
npub: npub1hht9umpeet75w55uzs9lq6ksayfpcvl9lk64hye75j0yj4husq5ss8xsry
## ⚡ Unterstützung
Wenn Ihnen dieses Projekt gefällt und Sie meine Motivation stärken möchten, würde ich mich sehr über eine kleine Bitcoin Lightning Spende freuen:
Lightning-Adresse: aldobarazutti@getalby.com
Ihre Unterstützung hilft mir, dieses Projekt weiter zu verbessern und neue Features zu entwickeln. Vielen Dank für Ihre Großzügigkeit!
---
Viel Spaß beim Kochen und Genießen! 🍽️👨🍳👩🍳