Wenn man zum ersten Mal eine eigene Webseite aufbaut, fühlt sich das oft wie eine Reise in ein unbekanntes Land an: Es gibt zahlreiche Tools, Begriffe und Konzepte, die man noch nicht richtig einordnen kann. So erging es mir auch, als ich mich an der Webseite rigged-motion.com versuchte. Damit das Vorhaben nicht in Chaos und Frust endet, habe ich drei Werkzeuge gewählt, die meinen Einstieg deutlich erleichtert haben: Vite, shadcn/ui und Google Login (kombiniert mit Supabase). Ich erzähle dir, was ich daran so schätze und warum diese Kombination für mich funktioniert.

Vite – ein blitzschnelles Build-Tool für dein Webprojekt

Bevor ich mit Vite losgelegt habe, stellte sich mir zuerst die Frage: Wieso braucht man überhaupt ein spezielles Tool, um eine Webseite zu entwickeln? Reicht es nicht aus, ein paar HTML-, CSS- und JavaScript-Dateien in einem Ordner zu haben und diese im Browser zu öffnen?

In kleinen Projekten kann das tatsächlich funktionieren. Sobald jedoch mehr Dynamik und komplexere Funktionen ins Spiel kommen, wird es schnell unübersichtlich. Hier kommt Vite ins Spiel. Es kümmert sich beim Entwickeln um das sogenannte Bundling – also das Zusammenfassen deiner einzelnen Code-Dateien – und bietet gleichzeitig einen Entwicklungsserver, der deine Änderungen direkt im Browser aktualisiert.

Was macht Vite?

Vite überwacht deinen Code und zeigt dir mit Hot Module Replacement (HMR) sofort jede Änderung, ohne dass du die Seite neu laden musst. Das spart dir enorm viel Zeit beim Entwickeln und Testen. Sobald du schliesslich deine Seite ins Netz stellen willst, bündelt Vite alle Dateien zu einem optimierten Paket, damit die Ladezeiten gering bleiben.

Besonders hilfreich ist zudem die Unterstützung von Komponenten in Frameworks wie React, Vue oder Svelte. So kannst du deine Seite in wiederverwendbare Bausteine unterteilen, anstatt alles in einer riesigen Datei zu verwalten.

Warum ich mich für Vite entschieden habe

Ich wollte einen möglichst schnellen Entwicklungsprozess und fand es hilfreich, dass Vite so unkompliziert funktioniert. Obwohl ich noch relativ neu in der Webentwicklung bin, liess es sich intuitiv einsetzen: Die Anleitung auf der offiziellen Webseite ist übersichtlich, und mit einem Befehl wie npm create vite@latest erhält man eine startklare Projektstruktur.

Wenn du bisher nur klassische HTML/CSS/JS-Dateien kennst und nun ein grösseres Projekt angehen möchtest, kann ich dir Vite nur empfehlen. Die Lernkurve ist relativ flach, und du wirst dich schnell fragen, wie du jemals ohne das schnelle Aktualisieren leben konntest.

shadcn/ui – individuelles Styling dank fertiger Komponenten

Sobald bei mir das Grundgerüst mit Vite stand, brauchte ich ein stimmiges Design für rigged-motion.com. Als ich überlegte, ob ich jede Schaltfläche, jedes Formular und jede Navigation selbst gestalten sollte, stiess ich auf shadcn/ui.

Diese Bibliothek bietet vorgefertigte UI-Komponenten, die auf Tailwind CSS aufbauen. Du bekommst also nicht nur ein paar Code-Vorlagen, sondern direkt gut durchdachte Designelemente, die du an deine Wünsche anpassen kannst.

Warum shadcn/ui frühzeitig integrieren?

Gerade als Neuling fühlt es sich zuerst an, als würde man mit „Vorgefertigtem“ seine Freiheit aufgeben. In Wirklichkeit spart man aber Unmengen an Zeit und verhindert, dass man sich in unnötigen Details verliert – zum Beispiel beim stundenlangen Feinjustieren von CSS. Ausserdem kann man bei shadcn/ui gleich zu Beginn ein einheitliches Theme auswählen. Das sorgt für ein konsistentes Erscheinungsbild und verhindert, dass alles kunterbunt wird.

Ich habe mich am Anfang an ein Theme gehalten, das meinem gewünschten Design nahekam, und konnte Inhalte und Funktionen gleichzeitig mit dem Styling entwickeln. So gab es keine grossen Umbauaktionen am Ende, weil Design und Funktion parallel entstanden sind.

Meine Lernkurve mit shadcn/ui

Der grösste Vorteil war für mich, dass ich nicht jeden Button und jedes Formular neu erfinden musste. Die vorgefertigten Komponenten sind durchdacht, man muss sie nur noch in das eigene Projekt einbauen und bei Bedarf anpassen. Etwas Zeit für die Einarbeitung sollte man aber einplanen, um zu verstehen, wie das Designsystem funktioniert. Nach ein paar Testläufen ging es mir in Fleisch und Blut über, und die Optik meiner Seite konnte sich sehen lassen.

Google Login mit Supabase – die bequeme Anmeldung für deine Nutzer

Als Layout und Grundstruktur standen, fragte ich mich, wie Nutzerinnen und Nutzer sich auf rigged-motion.com anmelden sollen. Ein eigenes Kontosystem aufzubauen, bei dem man Passwörter selbst sicher speichern und verwalten muss, kann sehr aufwendig sein – vor allem für mich als Einsteiger. Also entschied ich mich für Google Login über OAuth, gestützt durch Supabase, um den Vorgang zu vereinfachen.

Warum überhaupt ein Login-System und was ist OAuth?

Sobald eine Anwendung Nutzern die Möglichkeit geben soll, sich anzumelden oder eigene Daten abzulegen, brauchst du ein Sicherheitskonzept. Du musst gewährleisten, dass nur Berechtigte auf vertrauliche Bereiche zugreifen, Passwörter oder andere Informationen sicher gespeichert werden und die Privatsphäre deiner Nutzerinnen und Nutzer gewahrt bleibt.

Hier setzt OAuth an (sprich: „Oh-Auth“). Das ist ein offener Standard, der es ermöglicht, dass Nutzer sich bei deiner Webseite mit einem bereits vorhandenen Konto (zum Beispiel Google) einloggen können, ohne dir ihr Passwort direkt zu geben. Google überprüft im Hintergrund die Identität und gibt deiner Anwendung das Signal, dass es sich um einen legitimen Nutzer handelt. Das ist sicherer für die Nutzer, weil sie nicht überall neue Passwörter anlegen müssen, und weniger aufwendig für dich, weil du deine eigene Passwort-Verwaltung nicht selbst erstellen musst.

Eigenes Login vs. Google OAuth – wo liegen die Unterschiede?

Wenn man das Login völlig selbst programmieren möchte, schreibt man die komplette Logik dafür, wie man Konten anlegt, Passwörter speichert, Sitzungen verwaltet und mehr. Das bedeutet viel Aufwand und birgt Sicherheitsrisiken, wenn man nicht genau weiss, was man tut.

Google OAuth dagegen setzt auf ein bestehendes, global genutztes System. Wer ohnehin ein Google-Konto besitzt, klickt einfach „Mit Google anmelden“ und ist sofort eingeloggt. Deine Webseite erhält dabei lediglich ein Token, mit dem du den Nutzer als echt identifizieren kannst. Das macht die Implementierung einfacher und ist für viele Nutzer intuitiver.

Wozu Supabase?

Mit Supabase musst du zudem nicht einmal ein eigenes Backend dafür programmieren. Das Tool kümmert sich um Dinge wie Datenbankverwaltung, Authentifizierung und Dateispeicherung. Du kannst einen Grossteil dieser Funktionen einfach über das Supabase-Dashboard konfigurieren und musst nicht tief in Datenbankkonfigurationen und Sicherheitsregeln einsteigen. Für mich war das ein Segen, weil ich meine Zeit lieber in das eigentliche Produkt stecken wollte, statt mich in Passwort-Hashing oder Row-Level Security hineinzufuchsen.

Dank Supabase konnte ich also in wenigen Schritten einen Google-Login einrichten, ohne selbst komplizierte Code-Bausteine für die OAuth-Anmeldung erstellen zu müssen. Das spart nicht nur Entwicklungszeit, sondern schont auch meine Nerven, weil das Risiko von Sicherheitslücken deutlich geringer ist.

Mein Fazit

Am Anfang fühlte sich das alles an, als würde ich in eine völlig neue Welt vordringen. Doch mit etwas Probieren und den richtigen Tools war es gar nicht so kompliziert. Vite beschleunigt meine Entwicklungsprozesse und liefert ein sauberes Bundling, shadcn/ui erspart mir unzählige Design-Experimente und sorgt für einen professionellen Look, und Google Login mit Supabase macht das Einloggen schnell, sicher und vertrauenswürdig.

Wenn du selbst über ein eigenes Webprojekt nachdenkst, kannst du diese Werkzeuge gerne einmal ausprobieren. Mein Lernprozess war einfacher, als ich erwartet hatte, und vielleicht hilft dir diese Kombination ja genauso wie mir, deine ersten Schritte in der Webentwicklung erfolgreich zu meistern. Viel Spass beim Tüfteln und Erstellen deiner eigenen Seite.

(eli)