The Carnivorous Plants website is built using a modern stack consisting of Python, FastAPI, Jinja2 templates, and TailwindCSS. Below is an overview:
Backend
- FastAPI
- The web framework that handles the server logic.
- Handles routing (e.g., /, /plant/{id}, /admin).
- Fast API endpoints and support for async functionality.
- Uvicorn
- ASGI server that runs the FastAPI app.
- Suitable for high performance and async processing.
- Jinja2
- Template engine that renders HTML pages based on variables from Python.
- Used for dynamic content such as plant data, descriptions, and filters.
- Database
- Plant data and metadata (such as images and descriptions) are stored in a SQLite database.
- Data is retrieved from the database via SQLAlchemy.
Frontend
- HTML5 & Jinja2
- Structure of the pages.
- Dynamic content via Jinja2 placeholders (e.g., {{ plant.species }}).
- TailwindCSS
- Utility-first CSS framework for styling.
- Responsive design (adaptations for mobile, tablet, and desktop).
- Handy for rapid and consistent layout development.
- Alpine.js
- Lightweight JavaScript framework for interactive components.
- Used for the image carousel, including swipe functionality and arrow navigation.
- Responsive Design
- Mobile-friendly display (hamburger menu, 1 column on smartphones).
- Adjustments per screen size via Tailwind breakpoints (sm:, md:, lg:).
Deployment
- Ubuntu Linux Server
- The application runs on an Ubuntu server.
- Nginx
- Reverse proxy for the FastAPI app.
- Handles HTTPS and static files (/static/).
- Systemd Service
- Manages the FastAPI application to ensure it starts automatically and keeps running.
Features
- Multilingual Support (NL, EN, DE)
- Dynamic language selection via dropdown and cookies.
- Language strings managed in Python.
- Search and Filter Options
- Live filtering of plants by genus or search terms.
- Admin Section
- Login functionality and admin panel for editing AI prompts and plant data.
- Image Carousel
- Photos of plants with swipe, arrows, and thumbnails.
- Search Engine Optimalization (SEO)
- Automatically generated sitemap.xml and robots.txt.
Architecture
Security Measures
To make the application more robust against attacks and abuse, a set of modern security measures has been implemented. The focus has been on minimizing attack surfaces, enforcing secure communication, and protecting user data.
The most important step is the introduction of a strict Content Security Policy (CSP). This limits which resources (scripts, styles, images, fonts, etc.) may be loaded by the browser. A dynamically generated nonce is used for inline scripts, ensuring that only scripts explicitly approved by the server can be executed. This is a powerful protection against Cross-Site Scripting (XSS) attacks.
In addition, headers have been added to improve user privacy, block access to sensitive APIs, and enforce the use of HTTPS.
The website and mail server both achieve a score of 100% on internet.nl