Moderne Versicherungsplattform für Privatkunden, Gewerbekunden und Beamte.
🌐 Live-Demo: https://semkodi.github.io/versicherung
Entwickelt von Semir Borogovac als praxisnahes Webprojekt für den Versicherungsmakler Sven Kegler.
- 5 Hauptseiten
- Interaktive Bedarfsanalyse
- Kontakt- und Schadensformulare
- Responsive Design
- Moderne React-Architektur
- GitHub Pages Deployment
Simply Switch unterstützt Interessenten dabei, ihren Versicherungsbedarf digital zu analysieren, Schäden zu melden und unkompliziert Kontakt zu einem Versicherungsexperten aufzunehmen.
Interaktive Analyse des individuellen Versicherungsbedarfs.
Informationsbereich für Selbstständige und Unternehmer.
Digitale Meldung und Weiterleitung von Schadensfällen.
Direkte Kontaktaufnahme mit dem Versicherungsmakler.
Dieses Projekt wurde nicht als Tutorial oder Lernprojekt erstellt, sondern zur Umsetzung realer Anforderungen eines Versicherungsmaklers entwickelt.
- 🏠 Startseite mit Hero-Bereich, Zielgruppen, Bewertungen und FAQ
- 👥 Privatkundenbereich
- 🎖️ Beamtenbereich
- 💼 Gewerbekundenbereich
- 📊 Interaktives Bedarfs-Radar
- 📬 Kontaktformular
⚠️ Schadensmeldung- 📱 Vollständig responsives Design
- ♿ Barrierefreiheitsfunktionen
- 🍪 Cookie-Consent
| Bereich | Technologie |
|---|---|
| Frontend | React |
| Sprache | TypeScript |
| Styling | Tailwind CSS |
| Routing | React Router |
| Animationen | Framer Motion |
| Backend Services | Supabase (geplant) |
| Build Tool | Vite |
| Deployment | GitHub Pages |
Benutzer
│
▼
React Frontend
│
▼
React Router
│
├── Startseite
├── Privatkunden
├── Gewerbekunden
├── Beamte
├── BedarfsRadar
├── Kontakt
└── Schadensmeldung
Die größte Herausforderung war die Entwicklung einer skalierbaren Struktur für mehrere Zielgruppen (Privatkunden, Beamte und Selbstständige), ohne dabei die Benutzerfreundlichkeit zu verlieren.
Zusätzlich mussten Routing, Deployment und Formularlogik sauber miteinander integriert werden.
Während der Entwicklung habe ich meine Kenntnisse in React, TypeScript, Responsive Design und modernen Frontend-Architekturen deutlich erweitert.
Besonders wertvoll waren:
- Strukturierung größerer React-Projekte
- React-Komponentenarchitektur
- TypeScript
- React Router
- Responsive Webdesign
- Deployment-Prozesse
- Git und GitHub Workflows
- Zusammenarbeit mit einem realen Auftraggeber
git clone https://github.com/Semkodi/versicherung.git
cd versicherung
npm install
npm run devDieses Projekt folgt einer modularisierten React Enterprise-Architektur:
- Pfad-Aliase (
@/*): Absolute Imports zeigen direkt auf dassrc/-Verzeichnis (konfiguriert intsconfig&vite.config). - Barrel Exports (
index.ts): Bündelung und Re-Export von Komponenten zur Vermeidung von Import-Wüsten. - Zentralisiertes CSS: Alle Styles liegen sauber gekapselt in
src/styles/.
src/
├── assets/ # Lokale Medien (Bilder & Icons)
├── komponenten/ # Modulare UI-Komponenten
│ ├── home/ # Startseiten-Sektionen (mit index.ts)
│ ├── kontakt/ # Kontakt-Formular (mit index.ts)
│ ├── layout/ # Navigationsleiste, Fusszeile, Preloader etc. (mit index.ts)
│ ├── rechner/ # Rechner & BedarfsRadar (mit index.ts)
│ ├── rechtliches/ # Impressum, Datenschutz, Cookies (mit index.ts)
│ └── ui/ # Chatbot-Komponente
├── seiten/ # Hauptseiten (Startseite, Beamte etc. mit index.ts)
├── lib/ # Supabase & Konfigurationen
└── styles/ # Konsolidierte CSS-Dateien (index.css etc.)
Geplante Erweiterungen:
- Terminbuchung
- Erweiterte Bedarfsanalyse
- Kundenportal
- Dokumentenverwaltung
Semir Borogovac
Umschulung zum Fachinformatiker für Anwendungsentwicklung (FIAE)
Sven Kegler
Versicherungsmakler