web.vity Toolbox

All-in-One SEO & Analytics Platform - die europaeische Alternative zu Semrush + Hotjar.

Tech Stack

• Framework: Next.js 16 (App Router, Turbopack)
• Language: TypeScript (strict mode)
• Database: PostgreSQL + Prisma ORM
• Styling: Tailwind CSS 4
• State: Zustand + TanStack Query
• Auth: NextAuth.js (3-Faktor: Email + Passwort + TOTP)

Schnellstart

# Dependencies installieren
npm install

# Datenbank-Schema synchronisieren
npm run db:push

# Entwicklungsserver starten
npm run dev

Oeffne http://localhost:3000 im Browser.

Befehle

Befehl	Beschreibung
npm run dev	Entwicklungsserver (Port 3000)
npm run build	Production Build
npm run db:push	Prisma Schema -> Datenbank synchronisieren
npm run db:studio	Prisma Studio GUI

Module

SEO & Keywords

• Keyword Research - DataForSEO-Integration, Keyword-Vorschlaege, Suchvolumen
• Rank Tracking - SERP-Monitoring, Positionsaenderungen, Wettbewerbsvergleich
• Site Audit - On-Page SEO Analyse
• Backlinks - Backlink-Profil Analyse

Social Media Toolbox

• YouTube Tools - Keyword Explorer, Tag Manager, SEO Studio, Search Rankings, Videolytics, Channelytics, CTR Analyzer, Best Time to Post
• Content Pool - Transkripte, Analyzer

Website Intelligence

• Crawl-Engine - Automatische Website-Crawls mit Vergleich
• Content Gaps - Inhaltsluecken erkennen
• Regional SEO - Lokale Suchmaschinenoptimierung
• Technologie-Erkennung - Frameworks, CMS, Analytics Tools erkennen

Behaviour Tracking

• Sessions & Heatmaps - Nutzerverhalten aufzeichnen und visualisieren
• Frustration Detection - Rage Clicks, Dead Clicks, Error Clicks
• A/B Testing - Split-Tests mit statistischer Auswertung
• Formular-Analytics - Abbruchraten, Feldzeiten
• Funnels - Konversions-Trichter Analyse
• Visitor Segmentation - Dynamische Nutzersegmente
• KI-Assistent - Google Gemini-basierte Analyse-Empfehlungen
• Email Reports - Automatische Berichtsversendung
• Personas - Datengetriebene Nutzer-Personas

Competitor Intelligence

• Kanal-Monitoring - YouTube-Kanaele der Konkurrenz tracken
• Analyse - Regelbasierte Wettbewerbsanalyse
• Intelligence Events - Automatische Benachrichtigungen

Content Creator

• Script Generator - KI-gestuetzte Video-Scripts
• Templates - Wiederverwendbare Content-Vorlagen

Ads Tracker

• Account-Management - Meta Ads, Google Ads, TikTok Ads Accounts verwalten
• Anzeigen-Monitoring - Konkurenz-Anzeigen tracken, forensische Analyse
• Creative-Galerie - Creatives bewerten (Hook, CTA, Kreativitaet)

Forum Intelligence

• RSS-Scraper - Foren ueber RSS-Feeds archivieren (XenForo, phpBB, vBulletin)
• Thread-Archiv - Volltextsuche, Sektionsfilter, Pagination
• Entity-Extraktion - URLs, @Mentions, Produktnamen automatisch erkennen
• Analyse - Sentiment, Qualitaets-Score, Kategorie-Erkennung

Korrelations-Engine

• Event Bus - Module emittieren Intelligence Events
• Pattern Matching - Regelbasierte Korrelationserkennung
• "Kein Zufall"-Algorithmus - 3+ korrelierte Events in Zeitfenstern erkennen
• Timeline - Chronologische Event-Ansicht mit Filtern
• Rules - CRUD fuer Korrelations-Regeln

Auto-Insights (Phase 6)

• Crawl-Insights - Automatische Vergleiche zwischen Website-Crawls
• Cross-Module Connections - Verbindungen zwischen Modulen erkennen (SEO <-> YouTube <-> Competitor <-> Forum)

Orchestrator

• Feature Planning - Modul-uebergreifende Feature-Planung
• Task Management - Aufgabenverwaltung
• Storage - Zentraler Dateispeicher

Projektstruktur

src/
  app/
    (dashboard)/dashboard/    # Dashboard-Seiten (12 Sektionen)
    api/                      # API Routes (80+ Endpoints)
    auth/                     # Auth-Flow (Login, Register, 2FA)
  components/
    dashboard/                # Sidebar, MobileNav
    customer-project/         # Multi-Tenancy Switcher
    behaviour-tracking/       # 40+ Tracking-Komponenten
    website-intelligence/     # Crawl-Komponenten
  lib/
    services/                 # Business Logic
      ads-tracker/            # Meta/Google/TikTok Ads
      auto-insights/          # Crawl-Insights, Cross-Module
      behaviour-tracking/     # 22 Service Files
      competitor-intelligence/# Scraper, Analyzer
      correlation-engine/     # Event Bus, Pattern Matcher
      dataforseo/             # API Client
      forum-intelligence/     # RSS Scraper, Entity Extractor
      google-ai/              # Gemini Client
      orchestrator/           # Feature/Task/Storage
      social-media/           # YouTube Analytics
      website-intelligence/   # Crawl, Gaps, Technologien
    validators/               # Zod Schemas
    stores/                   # Zustand Stores
    db/                       # Prisma Client
    auth/                     # NextAuth Config
    customer-project/         # Multi-Tenancy Middleware
prisma/
  schema.prisma               # 50+ Models

Umgebung

Voraussetzungen

• Node.js 20+
• PostgreSQL 15+
• DataForSEO Account (IP-Whitelisting erforderlich)

Konfiguration

Erstelle .env.local basierend auf den benoetigten Umgebungsvariablen:

• DATABASE_URL - PostgreSQL Connection String
• NEXTAUTH_SECRET - Auth Secret
• NEXTAUTH_URL - Base URL
• DATAFORSEO_LOGIN / DATAFORSEO_PASSWORD - DataForSEO API
• GOOGLE_AI_API_KEY - Google Gemini API

Server-Infrastruktur

• VS200 (Production): Next.js App + PostgreSQL
• VS250 (Services): Docker Host (ClickHouse, Elasticsearch, Puppeteer)

Architektur-Patterns

• Multi-Tenancy: Customer Projects mit customerProjectId auf allen Daten-Models
• API Routes: Auth Check -> Zod Validation -> DB Query -> Error Handling
• Dashboard: MobileNav + DashboardSidebar (activePage prop)
• State: Zustand Stores mit externen Selector Hooks
• Services: Barrel Exports via index.ts, Feature-spezifische Files
• Middleware: Rate Limiting + Security Headers + Auth Stage Routing

Lizenz

Proprietaer - Alle Rechte vorbehalten.