SvelteKit-Tutorial: Google Forms Klon (Teil 1)
In dieser Reihe werden wir eine Fullstack-Anwendung bauen, die ähnlich wie Google Forms funktioniert. Man kann hierbei Formulare ("Svorms") erstellen, beantworten und auswerten. Gespeichert werden die Daten in einer Postgres-Datenbank bei Supabase. Die Benutzeroberfläche und die serverseitige Logik werden wir mit SvelteKit programmieren.
In diesem ersten Teil geht es um das Setup von SvelteKit und Supabase und die Erstellung der Formulare.
Link zur Playlist: • Google Forms Klon mit SvelteKit und Supaba...
📝 Demo & Quellcode
● Demo: https://svorm.netlify.app/
● Code: https://github.com/ScriptRaccoon/svorm
⏱ Zeitmarken
● Vorstellung 00:00
● SvelteKit Routing 08:34
● Layout 12:08
● Create-Komponente 17:51
● Fragen erstellen 22:52
● Question-Komponente 26:53
● Choices-Komponente 36:40
● Create-Endpunkt 42:38
● Supabase Tabellen 49:10
● Supabase Client 59:33
● Speicherung der Svorms in Supabase 01:04:08
● Speicherung der Fragen in Supabase 01:12:41
● Bestätigung für Speicherung 01:22:27
● Cascade Delete 01:26:03
● Outro 01:28:25
📙 Quellen
● SvelteKit Docs: https://kit.svelte.dev/docs/
● Svelte Docs: https://svelte.dev/docs/
● Supabase Docs: https://supabase.com/docs
● Supabase Client Typen: https://supabase.com/docs/guides/data...
● On Delete Cascade in Supabase: https://index.garden/a/supabase-cascade/
💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
● SvelteKit: https://kit.svelte.dev/
● Supabase: https://www.supabase.com/
● TypeScript: https://www.typescriptlang.org/
● Sass: https://sass-lang.com/
🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...
#Supabase #SvelteKit #Fullstack