Dies ist eine Rezepte-App mit einem simplen Login-System. Die App ermöglicht es angemeldeten Benutzern, Rezepte hinzuzufügen, zu bearbeiten, zu löschen und als Favoriten zu markieren. Nicht angemeldete Benutzer können Rezepte suchen und anzeigen.
Projekt im Rahmen eines JS-Kurses:
Dieses Projekt wurde als Abschlussprojekt innerhalb eines JavaScript-Kurses erstellt. Die App wurde in einer Woche entwickelt und stellt den aktuellen Stand des Projekts dar. Es gibt noch einige Funktionen, die verbessert und erweitert werden, z. B. eine optimierte Benutzeroberfläche und Zugangskontrolle für bestimmte Seiten.
Das Projekt ist noch Work-in-Progress und wird in der Zukunft weiterentwickelt.
- Benutzeroberfläche: Verbesserung und Optimierung der Benutzeroberfläche für eine bessere Nutzererfahrung.
- Zugangskontrolle für Seiten: Derzeit sind Seiten wie z. B.
http://localhost:3000/add-recipe
über direkte Links erreichbar, obwohl sie nur für angemeldete Nutzer zugänglich sein sollten. Diese Funktionalität wird noch angepasst, sodass nicht angemeldete Benutzer an der Navigation zu geschützten Seiten gehindert werden.
- Rezepte erstellen: Neue Rezepte hinzufügen.
- Rezepte bearbeiten/löschen: Eigene Rezepte ändern oder entfernen.
- Favoriten verwalten: Rezepte als Favoriten speichern oder aus Favoriten entfernen.
- Rezepte suchen: Rezepte nach Namen, Zutaten oder Kategorien durchsuchen.
- Rezepte anzeigen: Details zu Rezepten einsehen.
-
CouchDB:
- CouchDB muss installiert und lauffähig sein.
- Benutzer und Rezepte werden in der CouchDB gespeichert. Die Verbindung wird in einer
credentials.json
konfiguriert.
-
Node.js und npm:
- Node.js in Version
16.x
oder höher wird benötigt. - Installiere Node.js hier.
- Node.js in Version
-
Proxy:
- Stelle sicher, dass der Proxy im Frontend auf die korrekte Backend-Adresse verweist. Standardmäßig ist dies
http://localhost:5000
.
- Stelle sicher, dass der Proxy im Frontend auf die korrekte Backend-Adresse verweist. Standardmäßig ist dies
rezepteapp/
└── backend/
└── controller/ # Funktionen für API-Anfragen
└── data/
└── credentials.json # Zugangsdaten für CouchDB
└── db/ # Konfiguration/Verbindung zur DB
└── routes/ # Routen für API-Anfragen
└── uploads/ # Speicherort für Bilder
└── server.js # Verbindung zum Server
# React-Frontend-Dateien
└── public/ # Statische Dateien
└── source/
└── components/ # React-Komponenten
└── services/ # Service-Funktionen
└── views/ # Seitenansichten
└── App.js, index.js # Einstiegspunkte
- Stelle sicher, dass CouchDB läuft und über
http://127.0.0.1:5984
oder eine andere Adresse erreichbar ist. - Lege in der CouchDB eine Datenbank namens
user
(für Benutzer) undrezepte
(für Rezepte) an.
Erstelle die Datei backend/data/credentials.json
mit folgendem Inhalt und passe die Zugangsdaten an:
{
"user": "your username",
"password": "your password",
"url": "http://127.0.0.1:5984"
}
Navigiere in das Backend-Verzeichnis und installiere die Abhängigkeiten:
cd backend
npm install
Abhängigkeiten, die verwendet werden:
cors
: Ermöglicht die Kommunikation zwischen Frontend und Backend.express
: Webserver-Framework.multer
: Zum Hochladen von Bildern (Speicherort:backend/uploads
).nano
: Node.js-Client für CouchDB.
Navigiere in das Frontend-Verzeichnis und installiere die Abhängigkeiten (vom backend-Verzeichnis aus gesehen):
cd ..
npm install
Abhängigkeiten, die verwendet werden:
md5
: Zum Verschlüsseln von Passwörtern (nicht sicher für produktive Umgebungen).- Der Proxy für die Backend-Verbindung ist standardmäßig auf
http://localhost:5000
gesetzt. Passe dies bei Bedarf in derpackage.json
an:"proxy": "http://dein-backend-server:5000"
Starte den Server im Backend-Verzeichnis:
cd backend
npm node server.js
Starte die React-App im Frontend-Verzeichnis (vom backend-Verzeichnis aus gesehen):
cd ..
npm start
Es sind keine benutzerdefinierten Tests vorhanden. Die vorhandenen Tests stammen aus der standardmäßigen React-App-Generierung.
- CouchDB wird für die Benutzerverwaltung (
user
) und die Speicherung der Rezepte (rezepte
) verwendet. - Bilder werden lokal im Ordner
backend/uploads
gespeichert. Wenn du einen externen Speicher verwenden möchtest, passe die Konfiguration entsprechend an. - Für zusätzliche Sicherheitsmaßnahmen (z. B. bei Passwörtern) sollte ein sichererer Hashing-Algorithmus wie bcrypt verwendet werden.
- Das Backend ist unter der ISC-Lizenz lizenziert (siehe
package.json
im Backend). - Das Frontend nutzt die Standardlizenz von React.