🏗️ Der "Albertbrunnen" Tech-Stack

Willkommen im Maschinenraum! Hier ist ein transparenter Blick auf die Technologien und Tools, die diese Plattform im Hintergrund antreiben und blitzschnell machen.

1. Das Fundament (Framework & Core)

Next.js (App Router): Das Herzstück. Ich nutze die modernste Architektur mit React Server Components (RSC). Das bedeutet, dass die Seiten rasend schnell auf dem Server vorgeladen werden und der Browser kaum noch Rechenarbeit leisten muss.
TypeScript: Sorgt für absolute Typsicherheit im Code und verhindert Fehler schon während der Entwicklung.

2. Design & Styling

Tailwind CSS: Der Design-Motor. Statt endloser CSS-Dateien style ich alles direkt über Utility-Klassen. Das sorgt für einen extrem schlanken Quellcode und perfekte Mobile-Optimierung.

3. Content-Engine (Das hybride CMS)

Markdown (.md) mit Gray-Matter: Für redaktionelle Artikel. So kann ich flüssig schreiben, während Gray-Matter intelligente Metadaten (wie Titel, Veröffentlichungsdatum oder FAQ-Bereiche) ausliest.
Unified / Remark / Rehype Pipeline: Die "Waschanlage" für Texte. Sie wandelt Markdown in sicheres HTML um, misst Bilder automatisch für das perfekte Layout aus (rehype-img-size) und stattet externe Links vollautomatisch mit SEO-freundlichen und sicheren Tags (target="_blank", noopener noreferrer) aus.

4. E-Commerce & Datenbank (Die Produkt-Engine)

Supabase (PostgreSQL): Meine hochperformante Cloud-Datenbank. Hier lagern strukturiert alle Produktdaten (ASIN, Titel, EAN, Beschreibungen).
Automatisches Amazon-Widget: Eine eigens entwickelte React-Komponente, die sich anhand einer Produkt-ID (ASIN) blitzschnell die Daten aus Supabase zieht, saubere Affiliate-Links generiert und das Angebot optimal darstellt.

5. SEO & Google-Schnittstellen (Der Traffic-Motor)

Dynamische SEO-Routen: Aus kryptischen Datenbank-IDs generiert das System vollautomatisch saubere, von Menschen lesbare URLs (z.B. /produkte/beispiel-produkt-12345).
JSON-LD (Schema.org): Die Seite stellt unsichtbar maschinenlesbare strukturierte Daten für Suchmaschinen bereit (für Produkte und FAQs), um die Darstellung in den Suchergebnissen (Rich Snippets) zu maximieren.
Automatische Sitemap: Sobald ein neues Produkt in der Datenbank angelegt wird, aktualisiert sich die sitemap.xml in Echtzeit und liefert Google die neue URL auf dem Silbertablett.

6. Entwicklung & Hosting (Der Workflow)

Visual Studio Code (VS Code): Die Kommandozentrale. Mein Code-Editor der Wahl, um die gesamte Plattform zu entwickeln, zu verwalten und lokal zu testen.
GitHub: Die Versionskontrolle. Hier liegt der Quellcode sicher strukturiert. Es speichert jeden Entwicklungsfortschritt und dient als Brücke zum Server.
Vercel: Das Hosting-Zuhause. Die Macher von Next.js bieten hier die perfekte Plattform. Sobald ich neuen Code oder einen fertigen Artikel auf GitHub pushe, baut Vercel vollautomatisch im Hintergrund die neue Version der Website und stellt sie in Sekunden live (Continuous Deployment).