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 build
npm run preview
Debug-Modus aktivieren:
VITE_DEBUG_ENABLED=true npm run dev
git checkout -b feature/amazing-feature
git commit -m 'Add amazing feature'
git push origin feature/amazing-feature
Dieses Projekt ist unter der MIT-Lizenz lizenziert.