Produktionscode,
den Sie prüfen können.

Jedes genFabric-Projekt wird mit vollständigem Quellcode, Tests und Dokumentation geliefert. So sieht das in der Praxis aus — ein Open-Source-Demo, das Sie selbst erkunden können.

Berliner Rundschau

Ein modernes Nachrichtenportal-Demo — responsiv, barrierefrei, vollständig getestet. Mit derselben Pipeline und denselben Qualitätsstandards wie jedes genFabric-Projekt gebaut.

Live-Demo Quellcode

Quellcode

Beispiel: ArticleCard-Komponente

Typisierte Props mit sinnvollen Standardwerten. Semantisches HTML. Konfigurierbares Heading-Level für korrekte Dokumentstruktur.

            src/components/ArticleCard.tsx
            TypeScript React
          

            interface ArticleCardProps {
  article: Article;
  headingLevel?: "h2" | "h3" | "h4";
  variant?: "default" | "hero" | "compact";
  eager?: boolean;
}

export default function ArticleCard({
  article,
  headingLevel = "h3",
  variant = "default",
  eager = false,
}: ArticleCardProps) {
  const Heading = headingLevel;
  const href = routes.article(article.slug);

  return (
    <article className="group relative rounded-xl bg-(--color-surface)">
      <SafeImage
        src={article.image.fallbackSrc}
        alt={article.image.alt}
        loading={eager ? "eager" : "lazy"}
      />
      <BadgeGroup
        category={article.category}
        isPremium={article.isPremium}
      />
      <Heading>
        <Link href={href}>{article.headline}</Link>
      </Heading>
    </article>
  );
}
          

Tech Stack

Next.js 16 React 19 TypeScript 5.8 Tailwind CSS v4 Vitest Testing Library DOMPurify Vercel

Lieferung

Was Sie erhalten

Jedes Projekt wird startbereit geliefert — nicht nur Quellcode, sondern alles, was Sie für den Launch brauchen.

Architektur-Überblick

Config-Referenz

Branding & Design-Tokens

CMS-Setup-Anleitung

SEO & Performance

Testing-Anleitung

Deployment-Anleitung

API & Integrationen

$ npx setup-cms --space your-space-id

✓ Content types created (5 models)

✓ Demo content imported (12 entries)

✓ Media assets uploaded

✓ Webhooks configured

Done — CMS ready in 45 seconds.

Keine Zugangsdaten nötig. Sie führen das Setup-Script in Ihrem eigenen CMS-Space aus — wir benötigen keinen Zugang zu Ihren Konten.

Umfang

Demo vs. Ihr Projekt

Diese Demo zeigt die Code-Qualitäts-Basis. Ihr Projekt enthält alles, was für die Produktion nötig ist.

Diese Demo zeigt

✓ Code-Architektur & Komponenten-Patterns
✓ 648 Testfälle (Vitest + Testing Library)
✓ WCAG-AA-Barrierefreiheit (109 ARIA-Attr.)
✓ SEO: JSON-LD, Open Graph, Sitemap
✓ Security-Header (CSP, X-Frame-Options)
✓ Dark Mode über Design-Tokens
✓ Error Boundaries mit Retry-Logik
✓ RSS-Feed, responsive Bilder
✓ Cookie-Consent + Consent Mode v2 (EDPB-konform)
✓ Mehrsprachige Inhalte (i18n, DE + EN)
✓ 11 CMS-Adapter + automatisierte Seed-Scripts
✓ 8 Übergabe-Dokumente (DE + EN)
✓ Analytics-Integration (GA4 + Meta, consent-gated)
✓ Vercel-Deployment-Konfiguration

Ihr Projekt enthält zusätzlich

+ HubSpot-CRM-Integration
+ AWS-Deployment-Konfiguration (alternativ zu Vercel)
+ Ihre Inhalte im CMS Ihrer Wahl
+ Ihre Marke, Farben und Typografie

Dies ist ein Basis-Demo — Ihr Projekt wird auf Ihre Marke, Ihr CMS und Ihre Funktionen konfiguriert.

Bereit für Ihr eigenes Projekt?

Erzählen Sie uns von Ihrem Vorhaben.

Direkt per E-Mail: hello@genfabric.dev

Kostenloses Erstgespräch vereinbaren

Produktionscode,den Sie prüfen können.

Scores aus dem Produktions-Build