CRUD with SvelteKit, Drizzle & Turso 🎊 Trivia Train Part 3: Svelte 5 tutorial 🤖LIVE Coding & Chill 🔴
Let’s recap & polish our new Game Show app, AND add the ability to create new quizzes!
People often ask me “what’s the best CMS” and to do CMS tutorials, but very often… you don’t need them, or your client doesn’t! We will be covering something in the future, but for our use-case today, we’ll manage to do all the CRUD (Create, Read, Update, Delete) operations we’d need, to make Trivia Train go 🚂
As a reminder, I believe the coolest thing of this app is the ChatGPT integration which helps us assess whether an answer was indeed correct or not…
AI via LLMs is all the rage right now, and there’s tons of use-cases where it’s NOT the best approach; but I think it’s an amazing solution for something like this, so I’m super excited to show more 😄
🚀 Click around the app yourself: https://trivia-train.fly.dev/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/trivia-train
If you’re a beginner, you may want to start with our Portfolio "Paulina Puppers" series, and end up with the same or an equivalent project: • Brand new Fullstack App with Svelte 5...
Check around the channel for more playlists and increasingly complicated tech stack choices 🙌
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What are we doing today? A Trivia / Quiz Game Show app?
✅ Live DEMO 🥳 with cookies refactor!
✅ Calculate user’s score!
✅ Route to Create a new quiz!
✅ Create quiz form with Superforms Proxies: https://superforms.rocks/api#arraypro...
✅ Easier json objects and arrays with Superforms Nested Data: https://superforms.rocks/concepts/nes...
✅ Play the quiz we just made!
✅ Custom number of questions!
[ ] Repurposing our “create quiz” route for an “edit quiz” route!
[ ] “Published at” with a Date Picker! https://shadcn-svelte.com/docs/compon...
— NEXT STEPS —
[ ] Animations!
[ ] Confetti! https://mitcheljager.github.io/svelte...
[ ] List all quizzes I’ve created!
[ ] Delete a quiz!
[ ] Persist high scores!
[ ] Answer timer (hard mode)!
[ ] Countdown to the next quiz!
[ ] SFX: Sound Effects!
[ ] User Settings!
[ ] Extra lives & skips!
[ ] Share your results to your friends and socials! https://developer.mozilla.org/en-US/d...
[ ] Create your own quiz?!
[ ] Drag to re-order questions!
[ ] Optional fun facts after answers!
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Turso: https://docs.turso.tech/introduction
Drizzle ORM: https://orm.drizzle.team/
Tailwind: https://tailwindcss.com/
Fly.io: https://fly.io/
Shadcn-Svelte: https://shadcn-svelte.com/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 110!
—
TIMESTAMPS
—
00:00 - What are we doing today? A Trivia / Quiz Game Show app?
4:30 - Live DEMO 🥳
13:55 - How does this work? With cookies!
40:42 - Calculate user’s score!
50:41 - Route to Create a new quiz!
55:15 - Create Quiz form, with Superforms Proxies
1:20:00 - Easier json objects and arrays with Superforms Nested Data
1:54:53 - Action to persist a new quiz to database!
2:08:30 - DEMO 🥳 Play the quiz we just made!
2:16:20 - Validate cookie, fetch latest quiz!
2:24:05 - BREAK
2:27:30 - Play specific quiz by id!
3:02:03 - Custom number of questions!
3:38:00 - LIVE 🥳 PRODUCTION 🥳 DEMO
Смотрите видео CRUD with SvelteKit, Drizzle & Turso 🎊 Trivia Train Part 3: Svelte 5 tutorial 🤖LIVE Coding & Chill 🔴 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 283 раз и оно понравилось 13 людям.