Beauty by Negin – Mehrsprachige Website für ein Kosmetikstudio.

Über das Projekt

Beauty by Negin ist die Website eines Studios für Facials und Hautpflege – ein echtes Kundenprojekt. Das Studio ist heute im Iran und zieht über die Türkei nach Deutschland. Deshalb spricht die Seite fünf Sprachen: Persisch, Türkisch, Deutsch, Englisch und Arabisch – Persisch und Arabisch werden von rechts nach links dargestellt, jede Sprache hat eigene übersetzte Adressen.

Die Inhaberin ist keine Technikerin. Darum war das wichtigste Ziel ein Admin-Panel, das ohne Vorwissen bedienbar ist: Jede Seite erklärt oben in einfachen Worten, was Kundinnen auf der Website damit machen und warum es wichtig ist, jedes Feld hat eine kurze Hilfe, und Anleitungen (z. B. Gmail-Einrichtung, Google Search Console) führen Schritt für Schritt.

Besucherinnen können Behandlungen ansehen, Termine anfragen, über ein Kundenkonto mit Login-Code per E-Mail chatten, Bewertungen schreiben und den Newsletter abonnieren. Im Panel lassen sich Texte mit einem Klick per KI in alle Sprachen übersetzen und die Farben der ganzen Website über 20 fertige Drei-Farben-Kombinationen ändern.

Das Projekt wurde per Vibe Coding entwickelt: Ich habe Anforderungen, Design und Verhalten in natürlicher Sprache beschrieben, eine KI hat den Großteil des Codes geschrieben – Anforderungen, Prüfung jedes Schritts, Architektur-Entscheidungen, Tests und Auslieferung lagen bei mir.

Technische Umsetzung

ASP.NET Core MVC mit Razor auf .NET 10, aufgeteilt in drei Schichten: DataAccess (EF Core, Entitäten, Migrationen, Seed-Daten in 5 Sprachen), Business (Services für Inhalte, Einstellungen, E-Mail, Telegram, KI-Übersetzung, Theme, Backup) und Web (öffentliche Seite plus Admin-Area). Datenbank ist SQLite, Migrationen laufen beim Start automatisch. Das Panel nutzt ASP.NET Core Identity mit Rollen (Admin/Editor); Kundenkonten sind davon getrennt und arbeiten passwortlos mit 6-stelligem Code und gehashten Sitzungs-Tokens.

Die Website lädt nichts von Dritten: Schriften, Bibliotheken und Bilder kommen vom eigenen Server, es gibt eine strikte Content-Security-Policy ohne Inline-Skripte und -Styles. Farben laufen über semantische CSS-Variablen; aus den Panel-Einstellungen wird eine kleine /theme.css erzeugt, die nur geänderte Werte überschreibt. Hochgeladene Bilder werden automatisch in WebP-Größen umgerechnet. Auslieferung als Self-contained-Build für Windows/Plesk, per Docker oder als Render-Blueprint (Frankfurt).

Wichtige Funktionen

• Mehrsprachige Website: Persisch, Türkisch, Deutsch, Englisch und Arabisch mit übersetzten Adressen, hreflang und automatischer Rechts-nach-links-Darstellung.
• Termine & Kontakt: Terminanfragen mit Status im Panel, Kontaktformular, Benachrichtigung per E-Mail oder Telegram.
• Kundenkonten & Chat: Login ohne Passwort per 6-stelligem Code, eigene Terminanfragen ansehen, Live-Chat mit dem Studio.
• KI-Übersetzung: Persisch schreiben, Knopf drücken: Google Gemini füllt alle anderen Sprachen in die richtigen Felder.
• Website-Farben: 20 Drei-Farben-Kombinationen oder 8 Farbgruppen mit je ~20 Vorschlägen, Live-Vorschau und automatisch lesbarer Schrift.
• Einfaches Admin-Panel: Erklärung auf jeder Seite, Hilfe an jedem Feld, Schritt-für-Schritt-Anleitungen, mobil bedienbar.
• Datenschutz & Sicherheit: Keine Tracker, keine CDNs, strikte CSP, verschlüsselte Zugangsdaten, mehrsprachige Datenschutzerklärung.
• Backup & Umzug: Sicherung und Wiederherstellung als eine Zip-Datei, tägliche automatische Backups, Docker und Render-Blueprint.

Meine Rolle

Eigenständig umgesetzt für eine echte Kundin: Anforderungen aufgenommen, per Vibe Coding mit KI entwickelt, jeden Schritt geprüft und getestet, Inhalte und Bilder vorbereitet, Preisangebot und Präsentation erstellt sowie Auslieferung (Hosting-Paket, Docker, Render) vorbereitet.

Architektur

Web (ASP.NET Core MVC, öffentliche Seite + Admin-Area, Middleware für Sprache, Sicherheit und Assets) → Business (Services und Geschäftsregeln: Inhalte, Kundenkonten, Chat, Einstellungen, E-Mail, Telegram, Gemini-Übersetzung, Theme, Backup) → DataAccess (AppDbContext für SQLite, Entitäten, Migrationen, Seeder). Alle veränderlichen Daten liegen in zwei Ordnern (App_Data und uploads) – ein Umzug zwischen Ländern und Servern ist dadurch ein einfaches Kopieren oder eine Backup-Zip.

Herausforderungen

Fünf Sprachen mit zwei Schreibrichtungen, eine Inhaberin ohne Technikkenntnisse und ein Umzug Iran → Türkei → Deutschland: Die Seite muss auf iranischen Servern laufen (wo Google und Telegram gesperrt sind) und später in Deutschland DSGVO-konform sein – ohne dass dafür neu programmiert werden muss.

Lösungen

Übersetzte URLs und hreflang je Sprache, automatische RTL-Darstellung, ein Panel mit Erklärung auf jeder Seite und Hilfe an jedem Feld, KI-Übersetzung per Knopfdruck (Ergebnisse werden nur eingetragen, nicht automatisch gespeichert), Funktionen, die bei fehlenden Diensten sauber abschalten, keine externen Ressourcen, mehrsprachige Datenschutzerklärung (DSGVO, KVKK) und eine Backup-Zip für den Umzug.

Code-Highlight

5 Sprachen inkl. RTL · über 20 Panel-Bereiche mit Erklärtext · KI-Übersetzung (Google Gemini) neben jedem mehrsprachigen Feld · 20 Drei-Farben-Paletten + 8 Farbgruppen mit Live-Vorschau und Kontrastprüfung (WCAG AA) · passwortlose Kundenkonten und Live-Chat · strikte CSP ohne CDNs · Lighthouse 97–100 · automatisierte Playwright-Prüfungen über alle öffentlichen Seiten und Panel-Seiten in mehreren Bildschirmbreiten

Lernpunkte

Mit KI als Haupt-Entwickler arbeiten und trotzdem Qualität und Verantwortung behalten · Mehrsprachigkeit mit RTL sauber planen · Oberflächen für Menschen ohne Technikwissen gestalten · Content-Security-Policy konsequent umsetzen · Datenschutz für mehrere Länder berücksichtigen · Kundengespräch, Preisgestaltung und Auslieferung eines echten Projekts