Vorlagen-Zentrale: Von Idee zur Web-App

Nach dem erfolgreichen Launch unserer Rechner Zentrale fragten wir uns: Welches Problem können wir als nächstes lösen? Die Antwort wurde zur Vorlagen-Zentrale – einer Plattform für Lebensläufe, Kündigungen und E-Rechnungen. In dieser Case Study teilen wir unseren kompletten Entwicklungsprozess.

Phase 1: Die Idee finden

Marktanalyse

Wir starteten mit einer systematischen Keyword-Recherche:

Insight: Über 300.000 monatliche Suchen im Vorlagen-Bereich – mit Potenzial für eine Privacy-First-Lösung.

Wettbewerbsanalyse

Die bestehenden Anbieter hatten Schwächen:

1. Datenschutz: Upload auf Server, Registrierungspflicht
2. Kosten: Versteckte Gebühren, Abo-Modelle
3. Qualität: Veraltete Designs, Word-Dokumente aus 2010
4. E-Rechnung: Kein Anbieter bot kostenlosen ZUGFeRD-Generator

Unsere Differenzierung

Wir definierten drei Kernprinzipien:

1. 100% clientseitig – Keine Daten verlassen den Browser
2. Kostenlos nutzbar – Keine Registrierung, keine versteckten Kosten
3. Modern & aktuell – Zeitgemäße Designs, aktuelle Gesetze (E-Rechnung 2026)

Phase 2: UX Research & Design

User Personas

Wir identifizierten drei Hauptzielgruppen:

Persona 1: Lisa, 26, Berufseinsteigerin

• Sucht: Modernen Lebenslauf ohne Word-Kenntnisse
• Pain Point: Keine Zeit für komplizierte Software
• Ziel: In 10 Minuten zum fertigen PDF

Persona 2: Thomas, 42, Freelancer

• Sucht: Schnelle Rechnungserstellung
• Pain Point: E-Rechnungspflicht 2026 verstehen
• Ziel: Gesetzeskonforme Rechnungen ohne Buchhaltungssoftware

Persona 3: Maria, 35, Wechselwillige

• Sucht: Kündigungsvorlage für Fitnessstudio
• Pain Point: Rechtssichere Formulierungen
• Ziel: Kündigung in 2 Minuten fertig

User Flows

Für jeden Generator definierten wir optimale Flows:

Lebenslauf-Generator:
1. Design wählen (3 Optionen)
2. Persönliche Daten eingeben
3. Berufserfahrung hinzufügen
4. Ausbildung hinzufügen
5. Skills & Sprachen
6. Live-Vorschau + PDF-Download

Ziel: < 10 Minuten bis zum fertigen Lebenslauf

Wireframes & Prototyping

Wir skizzierten zunächst low-fidelity Wireframes:

Lebenslauf-Generator:

• Split-Screen: Formular links, Vorschau rechts
• Sticky Preview auf Mobile
• Drag & Drop für Sektionen-Reihenfolge

Kündigungs-Generator:

• Anbieter-Suche mit Autovervollständigung
• Vorausgefüllte Adressen und Fristen
• Ein-Klick-Download

Phase 3: Technische Architektur

Tech-Stack Entscheidung

Nach unseren Erfahrungen mit der Rechner Zentrale wählten wir:

Architektur-Übersicht

src/
├── app/                      # Next.js App Router
│   ├── (generators)/         # Generator-Routen
│   │   ├── page.tsx          # Lebenslauf (Homepage)
│   │   ├── bewerbung/        # Anschreiben
│   │   ├── rechnungen/       # Rechnungen + E-Rechnung
│   │   └── kuendigungen/     # Kündigungen
│   └── ratgeber/             # SEO-Content
├── components/
│   ├── generators/           # Generator-Komponenten
│   ├── pdf/                  # PDF-Templates
│   └── ui/                   # Shared UI
├── lib/
│   ├── e-invoice/            # ZUGFeRD/XRechnung
│   ├── providers/            # Kündigungs-Anbieter
│   └── templates/            # Vorlagen-Daten
└── hooks/                    # Custom Hooks

Die PDF-Challenge

Browser-basierte PDF-Generierung ist komplex:

Problem 1: Performance

// Schlecht: PDF bei jedem Keystroke neu rendern
useEffect(() => {
  generatePdf(formData)
}, [formData])
 
// Besser: Debounce + Lazy Loading
const debouncedData = useDebounce(formData, 500)
const [pdfBlob, setPdfBlob] = useState<Blob | null>(null)
 
useEffect(() => {
  const generate = async () => {
    const blob = await pdf(<ResumeDocument data={debouncedData} />).toBlob()
    setPdfBlob(blob)
  }
  generate()
}, [debouncedData])

Problem 2: Schriften

// Schriften müssen explizit registriert werden
import { Font } from '@react-pdf/renderer'
 
Font.register({
  family: 'Inter',
  fonts: [
    { src: '/fonts/Inter-Regular.ttf', fontWeight: 400 },
    { src: '/fonts/Inter-Bold.ttf', fontWeight: 700 },
  ],
})

Problem 3: Live-Vorschau

// PDFViewer für Desktop, Screenshot für Mobile
export function LivePreview({ data, template }) {
  const isMobile = useMediaQuery('(max-width: 768px)')
 
  if (isMobile) {
    return <PreviewImage data={data} template={template} />
  }
 
  return (
    <PDFViewer className="w-full h-[600px]">
      <ResumeDocument data={data} template={template} />
    </PDFViewer>
  )
}

Phase 4: Feature Development

Lebenslauf-Generator

Drei Designs mit unterschiedlichen Charakteren:

Modern:

• Minimalistisch, viel Whitespace
• Akzentfarbe wählbar
• Ideal für Tech/Kreativ-Berufe

Klassisch:

• Traditionelles Layout
• Zeitlose Typografie
• Ideal für konservative Branchen

Kreativ:

• Sidebar mit Foto
• Grafische Skill-Anzeige
• Ideal für Marketing/Design

// components/pdf/templates/modern.tsx
export function ModernResume({ data }: { data: ResumeData }) {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        {/* Header mit Name und Kontakt */}
        <View style={styles.header}>
          <Text style={styles.name}>{data.personalInfo.name}</Text>
          <Text style={styles.title}>{data.personalInfo.title}</Text>
          <View style={styles.contact}>
            <Text>{data.personalInfo.email}</Text>
            <Text>{data.personalInfo.phone}</Text>
          </View>
        </View>
 
        {/* Berufserfahrung */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Berufserfahrung</Text>
          {data.experience.map((exp, i) => (
            <ExperienceItem key={i} experience={exp} />
          ))}
        </View>
 
        {/* ... weitere Sektionen */}
      </Page>
    </Document>
  )
}

Kündigungs-Generator

73 vorausgefüllte Anbieter mit korrekten Adressen und Fristen:

// lib/providers/mobilfunk.ts
export const mobilfunkProviders: Provider[] = [
  {
    id: 'vodafone',
    name: 'Vodafone',
    category: 'mobilfunk',
    address: {
      company: 'Vodafone GmbH',
      street: 'Ferdinand-Braun-Platz 1',
      zip: '40549',
      city: 'Düsseldorf',
    },
    cancellationPeriod: '3 Monate zum Vertragsende',
    minimumTerm: '24 Monate',
    hints: [
      'Rufnummernmitnahme rechtzeitig beantragen',
      'Kündigungsbestätigung aufbewahren',
    ],
  },
  // ... 72 weitere Anbieter
]

E-Rechnungsgenerator

Das technisch anspruchsvollste Feature:

// lib/e-invoice/generator.ts
export async function generateEInvoice(
  invoice: InvoiceData,
  format: 'zugferd' | 'xrechnung'
): Promise<Uint8Array> {
  // 1. Validierung
  const validation = validateInvoice(invoice)
  if (!validation.valid) {
    throw new ValidationError(validation.errors)
  }
 
  // 2. PDF generieren
  const pdfComponent = <InvoiceDocument data={invoice} />
  const pdfBlob = await pdf(pdfComponent).toBlob()
  const pdfBytes = await pdfBlob.arrayBuffer()
 
  // 3. XML erstellen
  const xml = format === 'zugferd'
    ? generateZugferdXml(invoice, invoice.profile)
    : generateXRechnungXml(invoice)
 
  // 4. XML in PDF einbetten
  const pdfDoc = await PDFDocument.load(pdfBytes)
  await embedXml(pdfDoc, xml, format)
 
  // 5. PDF/A-3 Compliance
  await setPdfACompliance(pdfDoc)
 
  return pdfDoc.save()
}

Phase 5: SEO & Content

Keyword-Strategie

Jede Seite targetet spezifische Keywords:

Ratgeber-Content

SEO-optimierte Artikel zu relevanten Themen:

• "E-Rechnung Guide 2026" – erklärt ZUGFeRD und XRechnung
• "Kündigung schreiben" – rechtliche Grundlagen
• "Lebenslauf Tipps 2026" – aktuelle Best Practices

Strukturierte Daten

Jeder Generator hat passende JSON-LD Schemas:

// components/seo/GeneratorSchema.tsx
export function GeneratorSchema({ generator }: { generator: GeneratorInfo }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'SoftwareApplication',
    name: generator.name,
    applicationCategory: 'BusinessApplication',
    operatingSystem: 'Web Browser',
    offers: {
      '@type': 'Offer',
      price: '0',
      priceCurrency: 'EUR',
    },
    creator: {
      '@type': 'Organization',
      name: 'HEADON.pro',
      url: 'https://headon.pro',
    },
  }
 
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  )
}

Phase 6: Launch & Learnings

Launch-Checkliste

Vor dem Go-Live:

• Alle Generatoren funktionsfähig
• Mobile-Optimierung getestet
• Lighthouse > 90 auf allen Seiten
• Analytics eingerichtet (Umami)
• Sitemap generiert
• Google Search Console verifiziert
• Social Media Preview-Images

Performance-Ergebnisse

Was wir gelernt haben

1. Client-Side PDF ist machbar – mit Kompromissen

Die Browser-basierte PDF-Generierung funktioniert gut, aber:

• Schriften müssen manuell eingebunden werden
• Komplexe Layouts erfordern viel CSS-in-JS
• Live-Vorschau ist performanceintensiv

2. E-Rechnung ist komplexer als gedacht

ZUGFeRD-Konformität erfordert:

• Präzise XML-Struktur nach EN16931
• Korrekte PDF/A-3 Metadaten
• Validierung aller Pflichtfelder

3. SEO für Tools ist anders

Anders als bei Content-Seiten:

• Nutzer wollen sofort loslegen (keine lange Intro)
• CTA muss above-the-fold sein
• FAQ-Sektion für SEO, aber unter dem Tool

4. Privacy ist ein echtes Verkaufsargument

"Keine Datenspeicherung" überzeugt Nutzer:

• Höhere Conversion als Wettbewerber mit Registrierung
• Keine DSGVO-Banner nötig
• Vertrauen durch Transparenz

Nächste Schritte

Die Vorlagen-Zentrale ist live, aber wir entwickeln weiter:

1. Mehr Vorlagen: Arbeitszeugnis, Abmahnung, Testament
2. Mehr Designs: Zusätzliche Lebenslauf-Templates
3. API-Zugang: Für Entwickler und Unternehmen
4. Premium-Features: Word-Export, erweiterte Anpassungen

Sie planen eine eigene Web-App? Die Vorlagen-Zentrale zeigt, wie wir komplexe Dokumenten-Anwendungen datenschutzkonform umsetzen. Kontaktieren Sie uns für ein unverbindliches Beratungsgespräch zu Ihrem Projekt.