Ein modernes, mehrstufiges Formular-System mit SvelteKit und SuperForms.
git clone <repository-url>
cd svelte-stepper-form
npm install
cp .env.example .env
.env Datei mit deinen Werten bearbeiten:# Demo/Test Data
VITE_DEMO_URL= # Falls nicht gesetzt, wird VITE_TEST_WEBSITE_URL verwendet
[email protected]
VITE_DEMO_PHONE=+49123456789
VITE_DEMO_COMPANY_NAME=Test Company
# Test Website URL für Entwicklung
VITE_TEST_WEBSITE_URL=https://openmind.market/
# API Configuration
VITE_TIDYCAL_API_TOKEN=your_tidycal_api_token_here
# n8n Webhook Configuration
VITE_N8N_BASE_URL=https://n8n.chooomedia.com/webhook-test
VITE_N8N_WEBHOOK_URL=https://n8n.chooomedia.com/webhook-test/websitehealth__done
VITE_N8N_WEBSITE_HEALTH_URL=https://n8n.chooomedia.com/webhook-test/websitehealth
# Development Settings
VITE_DEV_MODE=true
VITE_DEBUG_ENABLED=false
npm run dev
Alle privaten Daten und Konfigurationswerte sind in Umgebungsvariablen ausgelagert:
VITE_DEMO_URL: Demo-URL für Tests (falls nicht gesetzt, wird VITE_TEST_WEBSITE_URL verwendet)VITE_DEMO_EMAIL: Demo-E-Mail für Tests (Standard: hi@digitalpusher.de)VITE_DEMO_PHONE: Demo-Telefonnummer für Tests (Standard: +49123456789)VITE_DEMO_COMPANY_NAME: Demo-Firmenname für Tests (Standard: Test Company)VITE_TEST_WEBSITE_URL: Test-Website-URL für Entwicklung/Demo (Standard: https://openmind.market/)VITE_TIDYCAL_API_TOKEN: TidyCal API Token für BuchungenVITE_N8N_BASE_URL: Basis-URL für n8n Webhooks (Standard: https://n8n.chooomedia.com/webhook-test)VITE_N8N_WEBHOOK_URL: URL für Email-Versand (Standard: https://n8n.chooomedia.com/webhook-test/websitehealth__done)VITE_N8N_WEBSITE_HEALTH_URL: URL für Website-Health-Checks (Standard: https://n8n.chooomedia.com/webhook-test/websitehealth)Umgebungen:
Testing: /webhook-test/ (Standard)
Live: /webhook/ (für Produktion)
VITE_DEV_MODE: Entwicklungsmodus aktivieren (Standard: true)
VITE_DEBUG_ENABLED: Debug-Modus aktivieren (Standard: false)
Wichtig: Die VITE_TEST_WEBSITE_URL wird nur für Entwicklung und Demo-Zwecke verwendet.
Alle Umgebungsvariablen werden zentral in src/lib/config/env.ts verwaltet:
import { env } from '$lib/config/env';
// Verwendung
const demoUrl = env.DEMO_URL;
const demoEmail = env.DEMO_EMAIL;
const n8nBaseUrl = env.N8N_BASE_URL;
const n8nWebhookUrl = env.N8N_WEBHOOK_URL;
src/
├── lib/
│ ├── config/
│ │ └── env.ts # Zentrale Umgebungsvariablen-Konfiguration
│ ├── components/
│ │ ├── forms/ # Formular-Komponenten
│ │ └── modal/ # Modal-Komponenten
│ ├── stores/ # Svelte Stores
│ ├── utils/ # Utility-Funktionen
│ └── schema.ts # Zod-Schemas
├── routes/
│ ├── +page.svelte # Hauptseite
│ └── +page.server.ts # Server-seitige Logik
└── app.html # HTML-Template
.env Dateien ausgelagert.env Dateien sind in .gitignore eingetragen.env.example zeigt alle benötigten Variablenenv.ts verwaltetnpm run buildnpm run previewDebug-Modus aktivieren:
VITE_DEBUG_ENABLED=true npm run dev
git checkout -b feature/amazing-featuregit commit -m 'Add amazing feature'git push origin feature/amazing-featureDieses Projekt ist unter der MIT-Lizenz lizenziert.