svelte-stepper-form Svelte Themes

Svelte Stepper Form

Svelte Stepper Form

Ein modernes, mehrstufiges Formular-System mit SvelteKit und SuperForms.

🚀 Schnellstart

Voraussetzungen

  • Node.js 18+
  • npm oder yarn

Installation

  1. Repository klonen:
git clone <repository-url>
cd svelte-stepper-form
  1. Dependencies installieren:
npm install
  1. Umgebungsvariablen konfigurieren:
cp .env.example .env
  1. .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
  1. Entwicklungsserver starten:
npm run dev

🔧 Konfiguration

Umgebungsvariablen

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 Buchungen

n8n Webhook-Konfiguration

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)

Test-URL Konfiguration

Wichtig: Die VITE_TEST_WEBSITE_URL wird nur für Entwicklung und Demo-Zwecke verwendet.

  • Entwicklung: Entwickler können die Test-URL über Umgebungsvariablen anpassen
  • Live-Version: Nutzer geben ihre eigene Website-URL im Formular ein
  • Demo: Die Test-URL kann als Beispiel/Placeholder verwendet werden

Zentrale Konfiguration

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;

📁 Projektstruktur

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

🔒 Sicherheit

  • Keine privaten Daten im Code: Alle privaten Daten sind in .env Dateien ausgelagert
  • Gitignore: .env Dateien sind in .gitignore eingetragen
  • Beispiel-Konfiguration: .env.example zeigt alle benötigten Variablen
  • Zentrale Verwaltung: Alle Umgebungsvariablen werden zentral in env.ts verwaltet

🚀 Deployment

  1. Umgebungsvariablen in der Produktionsumgebung setzen
  2. Build erstellen: npm run build
  3. Build testen: npm run preview
  4. Deployment durchführen

📝 Entwicklung

Code-Standards

  • TypeScript für alle Dateien
  • ESLint für Code-Qualität
  • Prettier für Code-Formatierung
  • SvelteKit Best Practices

Debugging

Debug-Modus aktivieren:

VITE_DEBUG_ENABLED=true npm run dev

🤝 Beitragen

  1. Fork erstellen
  2. Feature-Branch erstellen: git checkout -b feature/amazing-feature
  3. Änderungen committen: git commit -m 'Add amazing feature'
  4. Branch pushen: git push origin feature/amazing-feature
  5. Pull Request erstellen

📄 Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert.

Top categories

Loading Svelte Themes