Die Carnivorous Plants Website ist mit einem modernen Stack aufgebaut, der aus Python, FastAPI, Jinja2-Vorlagen und TailwindCSS besteht. Nachfolgend ein Überblick:
Backend
- FastAPI
- Das Webframework, das die Serverlogik bereitstellt.
- Verantwortlich für Routing (z. B. /, /plant/{id}, /admin).
- Schnelle API-Endpunkte und Unterstützung für Async-Funktionalität.
- Uvicorn
- ASGI-Server, der die FastAPI-App ausführt.
- Geeignet für hohe Leistung und Async-Verarbeitung.
- Jinja2
- Template-Engine, die HTML-Seiten auf Basis von Variablen aus Python rendert.
- Verwendet für dynamische Inhalte wie Pflanzendaten, Beschreibungen und Filter.
- Datenbank
- Pflanzendaten und Metadaten (wie Bilder und Beschreibungen) werden in einer SQLite-Datenbank gespeichert.
- Daten werden über SQLAlchemy aus der Datenbank geladen.
Frontend
- HTML5 & Jinja2
- Struktur der Seiten.
- Dynamische Inhalte über Jinja2-Platzhalter (z. B. {{ plant.species }}).
- TailwindCSS
- Utility-first CSS-Framework für das Styling.
- Responsives Design (Anpassungen für Mobilgeräte, Tablets und Desktops).
- Praktisch für schnelle und konsistente Layout-Entwicklung.
- Alpine.js
- Leichtgewichtiges JavaScript-Framework für interaktive Komponenten.
- Wird für das Bilderkarussell verwendet, einschließlich Swipe-Funktion und Pfeilnavigation.
- Responsives Design
- Mobilfreundliche Darstellung (Hamburger-Menü, eine Spalte auf Smartphones).
- Anpassungen je nach Bildschirmgröße über Tailwind-Breakpoints (sm:, md:, lg:).
Deployment
- Ubuntu Linux Server
- Die Anwendung läuft auf einem Ubuntu-Server.
- Nginx
- Reverse Proxy für die FastAPI-App.
- Zuständig für HTTPS und statische Dateien (/static/).
- Systemd Service
- Verwalten der FastAPI-Anwendung, damit sie automatisch startet und dauerhaft läuft.
Funktionalitäten
- Mehrsprachigkeit (NL, EN, DE)
- Dynamische Sprachauswahl über Dropdown und Cookies.
- Sprachstrings werden in Python verwaltet.
- Such- und Filtermöglichkeiten
- Live-Filterung von Pflanzen nach Gattung oder Suchbegriffen.
- Adminbereich
- Login-Funktionalität und Adminpanel zur Bearbeitung von KI-Prompts und Pflanzendaten.
- Bilderkarussell
- Pflanzenfotos mit Swipe, Pfeilen und Thumbnails.
- Suchmaschinenoptimierung (SEO)
- Automatisch erstellte sitemap.xml und robots.txt.
Architektur
Sicherheitsmaßnahmen
Um die Anwendung robuster gegen Angriffe und Missbrauch zu machen, wurde eine Reihe moderner Sicherheitsmaßnahmen implementiert. Der Fokus lag auf der Minimierung von Angriffsflächen, der Durchsetzung sicherer Kommunikation und dem Schutz von Benutzerdaten.
Der wichtigste Schritt ist die Einführung einer strikten Content Security Policy (CSP). Diese begrenzt, welche Ressourcen (Skripte, Styles, Bilder, Fonts usw.) vom Browser geladen werden dürfen. Für Inline-Skripte wird eine dynamisch generierte Nonce verwendet, sodass nur Skripte ausgeführt werden können, die ausdrücklich vom Server genehmigt wurden. Dies ist ein starker Schutz vor Cross-Site-Scripting-(XSS)-Angriffen.
Zusätzlich wurden Header hinzugefügt, um die Privatsphäre der Benutzer zu verbessern, den Zugriff auf sensible APIs zu blockieren und die Verwendung von HTTPS zu erzwingen.
Die Website und der Mailserver erreichen beide eine Bewertung von 100 % auf internet.nl.