Animations & Confetti 🎊 Trivia Train Part 4: Svelte 5 & SvelteKit 2 tutorial 🤖 LIVE Coding & Chill 🔴
Let’s DELIGHT users by adding polish to our new Game Show app! Vanilla CSS animations, more involved ones using javascript libraries, and CONFETTI 🎊
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?
✅ Vanilla CSS "appear” animations!
✅ What about Svelte transitions, Motion One, and other ways to animate with Javascript? https://svelte.dev/docs/svelte-transi... & https://motion.dev/
✅ Confetti! https://mitcheljager.github.io/svelte...
✅ Live DEMO 🥳
✅ Enhance our “Create Quiz” form, to use to edit quizzes too!
✅ “Published at” with a Date Picker! https://shadcn-svelte.com/docs/compon...
✅ List all quizzes I’ve created!
[ ] Delete a quiz!
— NEXT STEPS —
[ ] Share your results to your friends and socials! https://developer.mozilla.org/en-US/d...
[ ] What about desktop users? Let’s make a copy button! https://developer.mozilla.org/en-US/d...
[ ] Share to Threads specifically! https://www.threads.net/@0xjessel/pos...
[ ] I wrote all about this?! https://magrippis.com/blog/2020/how-t...
[ ] Persist high scores!
[ ] Answer timer (hard mode)!
[ ] Countdown to the next quiz!
[ ] SFX: Sound Effects!
[ ] User Settings!
[ ] Extra lives & skips!
[ ] Create your own quiz?!
[ ] Drag to re-order questions!
[ ] Optional fun facts after answers!
[ ] ROGUE GAME?!
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Tailwind: https://tailwindcss.com/
Turso: https://docs.turso.tech/introduction
Drizzle ORM: https://orm.drizzle.team/
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 111!
—
TIMESTAMPS
—
00:00 - What are we doing today? A Trivia / Quiz Game Show app?
7:02 - Vanilla CSS "appear” animations!
22:21 - “Delay” CSS Variable to “stagger” messages!
36:35 - What about Svelte transitions, Motion One, and other ways to animate with Javascript?
44:25 - What about reduced motion?!
47:56 - Confetti!
1:11:35 - Live 🥳 DEMO
1:19:10 - Enhance our “Create Quiz” form, to use to edit quizzes too!
1:53:27 - Update quiz 🥳 DEMO
1:57:57 - Toast notification we updated the quiz!
2:02:07 - Only enable submit button, when the form is dirty / tainted
2:08:18 - “Published at” with a Date Picker!
2:45:25 - BREAK
2:49:13 - Date-related UX touches
3:13:10 - List all quizzes I’ve created!
3:38:40 - Summer 🧸 hug cameo
3:44:40 - Next steps & Migration to tie users to quizzes!
3:58:53 - Final 🥳 DEMO
Watch video Animations & Confetti 🎊 Trivia Train Part 4: Svelte 5 & SvelteKit 2 tutorial 🤖 LIVE Coding & Chill 🔴 online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 159 once and liked it 11 people.