Production code
you can inspect.

Every genFabric project ships with full source code, tests, and documentation. Here's what that looks like in practice — an open-source demo you can explore yourself.

Berliner Rundschau

A modern news portal demo — responsive, accessible, fully tested. Built with the same pipeline and quality standards as every genFabric project.

Live Demo Source Code

Lighthouse

Scores from production build

Performance

100

Accessibility

100

Best Practices

100

SEO

Source Code

Example: ArticleCard component

Typed props with sensible defaults. Semantic HTML. Configurable heading level for correct document outline.

            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

Delivery

What you receive

Every project ships ready to launch — not just source code, but everything you need to go live and stay in control.

Architecture Overview

Config Reference

Branding & Design Tokens

CMS Setup Guide

SEO & Performance

Testing Guide

Deployment Guide

API & Integrations

$ 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.

No credentials shared. You run the setup script in your own CMS space — we never need access to your accounts.

Scope

Demo vs. your project

This demo shows the code quality baseline. Your project adds everything needed for production.

This demo shows

✓ Code architecture & component patterns
✓ 648 test cases (Vitest + Testing Library)
✓ WCAG AA accessibility (109 ARIA attrs)
✓ SEO: JSON-LD, Open Graph, sitemap
✓ Security headers (CSP, X-Frame-Options)
✓ Dark mode via design tokens
✓ Error boundaries with retry logic
✓ RSS feed, responsive images
✓ Cookie consent + Consent Mode v2 (EDPB-compliant)
✓ Multilingual content (i18n, DE + EN)
✓ 11 CMS adapters + automated seed scripts
✓ 8 handoff documents (DE + EN)
✓ Analytics integration (GA4 + Meta, consent-gated)
✓ Vercel deployment config

Your project also includes

+ HubSpot CRM integration
+ AWS deployment config (alternative to Vercel)
+ Your content in the CMS of your choice
+ Your brand, colors, and typography

This is a baseline demo — your project is configured to your brand, CMS, and feature set.

Production codeyou can inspect.