🔥 WPGuru Frontend (Heatly)

Wärmepumpen-Lead-Generierung Web-App

Letzter Scan: 29.04.2026 React AWS Cloud

📋 Quick Facts

  • Projektname: wpguru-frontend-main
  • Plattform: React Single Page Application
  • Hosting: AWS Amplify
  • Primärziel: Lead-Generierung für Wärmepumpen-Installateure
  • Standort: D:\arbeit\git\wpguru-frontend-main (192.168.178.71)

🛠️ Technologie-Stack

Frontend Framework

React v17.0.2 - UI Framework
React Router v5.2.0 - Client-side Routing
React Scripts v5.0.1 - Build Tooling

UI Komponenten & Styling

Material-UI (MUI) v4.12.3 + v5.2.2 - Komponenten-Bibliothek
@emotion CSS-in-JS Styling
Styled Components v5.3.0 - Komponenten-Styling
MUI Markdown v0.5.3 - Markdown Rendering

AWS & Cloud Services

AWS Amplify v4.2.3 - Backend-as-a-Service
@aws-amplify/ui-react v1.2.26 - Auth UI Components
AWS SDK v2.1032.0 - AWS Services
Amazon Location amazon-location-helpers - Karten-Service

Karten & Geodaten

MapLibre GL v1.15.2 - Open Source Kartendarstellung
maplibre-gl-js-amplify v4.0.0 - Amplify Karten-Integration
react-map-gl v5.3.16 - React Karten-Komponenten
@math.gl/web-mercator Koordinaten-Transformationen

Build & Entwicklung

CRACO @craco/craco v7.1.0 - Webpack Konfiguration
DevContainer Docker-basierte Entwicklungsumgebung
Storybook Komponenten-Dokumentation

Analytics & Tracking

React GA4 v1.0.6 - Google Analytics 4
React GTM Module v2.0.11 - Google Tag Manager
React Hotjar v4.0.0 - Heatmaps & Feedback
React Cookiebot v1.0.10 - Cookie Consent

Charts & Visualisierung

React Google Charts v3.0.15 - Datenvisualisierung

📁 Projektstruktur

wpguru-frontend-main/
├── .devcontainer/          # Docker Dev Environment
│   ├── devcontainer.json
│   ├── Dockerfile
│   └── init.sh
├── .storybook/            # Storybook Konfiguration
├── .vscode/               # VSCode Settings
├── amplify/               # AWS Amplify Backend
│   ├── backend/
│   │   ├── api/wpgurufrontend/     # GraphQL API
│   │   ├── auth/wpgurufrontend/    # Cognito Auth
│   │   ├── function/               # Lambda Functions
│   │   │   ├── buyLead/
│   │   │   ├── enrichResults/
│   │   │   ├── exploreOpenLeads/
│   │   │   ├── leadChangeEmailSend/
│   │   │   ├── locationService/
│   │   │   ├── newRequestEmailSend/
│   │   │   ├── sendEmailToNewCustomer/
│   │   │   └── wpgurufrontendPreTokenGeneration/
│   │   └── geo/wpguruDisplayMap/   # Location Service
│   └── team-provider-info.json
├── public/                # Statische Assets
├── src/
│   ├── components/        # React Komponenten
│   │   ├── ConfiguratorForm/
│   │   ├── CostCalculator/
│   │   ├── RequestInfo/
│   │   ├── AddressForm.js
│   │   ├── AmplifyAuth.js
│   │   ├── Analytics.js
│   │   ├── BuyButton.js
│   │   ├── ContactForm.js
│   │   ├── Footer.js
│   │   ├── HeroSection.js
│   │   ├── LeadCard.js
│   │   ├── LeadMap.js
│   │   ├── Navbar.js
│   │   └── Section.js
│   ├── graphql/           # GraphQL Queries/Mutations
│   ├── media/             # Bilder & Assets
│   ├── models/            # Amplify Modelle
│   ├── pages/             # Page Komponenten
│   │   ├── admin.js
│   │   ├── costcalculator.js
│   │   ├── details.js
│   │   ├── forms.js
│   │   ├── result.js
│   │   └── partner/
│   │       ├── dashboard.js
│   │       └── explore.js
│   ├── stories/           # Storybook Stories
│   ├── ui-components/     # Generierte UI Komponenten
│   ├── util/              # Utility Funktionen
│   ├── _app.js            # Haupt App Komponente
│   └── index.js           # Entry Point
├── craco.config.js        # Webpack Override
├── package.json
└── customHttp.yml         # CloudFront Config

✨ Hauptfunktionen

🔐 Authentifizierung

AWS Cognito-basierte Benutzeranmeldung mit Amplify Auth. Unterstützt Partner-Login für Installateure.

🗺️ Interaktive Karten

MapLibre GL-basierte Kartendarstellung für Lead-Visualisierung mit Geo-Suche.

📊 Cost Calculator

Dynamischer Kostenrechner für Wärmepumpen mit individuellen Parametern.

📝 Lead Management

Formular-basierte Lead-Erfassung mit Validierung und E-Mail-Workflows.

🔍 Partner Dashboard

Installateur-Portal zur Verwaltung und Annahme von Leads.

📱 Responsive Design

Mobile-first Ansatz mit Material-UI Komponenten.

⚙️ NPM Scripts

# Entwicklungsserver starten
npm start           # craco start

# Produktionsbuild
npm run build       # craco build

# Tests ausführen
npm test            # craco react-scripts test

# Eject (nicht empfohlen)
npm run eject       # craco react-scripts eject

⚠️ Wichtige Konfigurationen

Webpack Alias (craco.config.js)

Mapbox wird durch MapLibre ersetzt (Lizenz-Optimierung):

module.exports = {
  webpack: {
    alias: {
      "mapbox-gl": "maplibre-gl"
    }
  }
}

AWS Amplify Backend

Lambda Functions

Function Zweck
buyLead Lead-Kauf Prozessierung
enrichResults Daten-Anreicherung
exploreOpenLeads Verfügbare Leads anzeigen
leadChangeEmailSend Status-Änderungs-Benachrichtigungen
locationService Geocoding & Standort
newRequestEmailSend Neue Anfrage Benachrichtigung
sendEmailToNewCustomer Kunden-E-Mail Versand
PreTokenGeneration JWT Token Anpassung

📦 Hauptabhängigkeiten

Core Dependencies

Material Design

Karten

Analytics

🚀 Deployment

Das Projekt ist für AWS Amplify Hosting konfiguriert: