De Carnivorous Plants website is gebouwd met een moderne stack die bestaat uit Python, FastAPI, Jinja2 templates, en TailwindCSS. Hieronder een overzicht:
Backend
- FastAPI
- Het webframework dat de serverlogica verzorgt.
- Zorgt voor routing (bijv. /, /plant/{id}, /admin).
- Snelle API-endpoints en ondersteuning voor async-functionaliteit.
- Uvicorn
- ASGI-server die de FastAPI-app draait.
- Geschikt voor hoge prestaties en async-verwerking.
- Jinja2
- Template engine die HTML-pagina’s rendert op basis van variabelen vanuit Python.
- Gebruikt voor dynamische inhoud zoals plantendata, beschrijvingen en filters.
- Database
- Plantendata en metadata (zoals afbeeldingen en beschrijvingen) worden opgeslagen in een SQLite database.
- Data wordt via SQLAlchemy uit de database gehaald.
Frontend
- HTML5 & Jinja2
- Structuur van de pagina’s.
- Dynamische inhoud via Jinja2 placeholders (bijv. {{ plant.species }}).
- TailwindCSS
- Utility-first CSS framework voor styling.
- Responsive design (aanpassingen voor mobiel, tablet en desktop).
- Handig voor snelle en consistente layout-ontwikkeling.
- Alpine.js
- Lightweight JavaScript framework voor interactieve componenten.
- Wordt gebruikt voor de afbeeldingencarrousel, inclusief swipe-functionaliteit en pijltjesnavigatie.
- Responsive Design
- Mobielvriendelijke weergave (hamburger menu, 1 kolom op smartphones).
- Aanpassingen per schermformaat via Tailwind breakpoints (sm:, md:, lg:).
Deployment
- Ubuntu Linux Server
- De applicatie draait op een Ubuntu-server.
- Nginx
- Reverse proxy voor de FastAPI-app.
- Verzorgt HTTPS en statische bestanden (/static/).
- Systemd Service
- Beheert de FastAPI-applicatie zodat die automatisch start en blijft draaien.
Functionaliteiten
- Meertaligheid (NL, EN, DE)
- Dynamische taalkeuze via dropdown en cookies.
- Taalstrings beheerd in Python.
- Zoek- en filtermogelijkheden
- Live filteren van planten op genus of zoektermen.
- Beheerdersgedeelte
- Login-functionaliteit en adminpanel voor aanpassen van AI-prompts en plantendata.
- Afbeeldingencarrousel
- Foto's van planten met swipe, pijltjes en thumbnails.
- Zoekmachine optimalisatie (SEO)
- Automatisch gecreeerde sitemap.xml en robots.txt.
Architectuur
Beveiligingsmaatregelen
Om de applicatie robuuster te maken tegen aanvallen en misbruik, zijn een reeks moderne beveiligingsmaatregelen doorgevoerd. De focus is gelegd op het minimaliseren van aanvalsvlakken, het afdwingen van veilige communicatie en het beschermen van gebruikersgegevens.
De belangrijkste stap is de invoering van een strenge Content Security Policy (CSP). Hiermee wordt beperkt welke bronnen (scripts, styles, afbeeldingen, fonts, etc.) geladen mogen worden door de browser. Er wordt een dynamisch gegenereerde nonce voor inline scripts, waardoor alleen scripts die expliciet door de server zijn goedgekeurd, uitgevoerd kunnen worden. Dit is een krachtige bescherming tegen Cross-Site Scripting (XSS)-aanvallen.
Daarnaast zijn headers toegevoegd om de privacy van gebruikers te verbeteren, toegang tot gevoelige API’s te blokkeren en het gebruik van HTTPS af te dwingen.
Website en mailserver behalen beide een score van 100% op internet.nl.