New “Game Show” app 🎊 Svelte 5 with SvelteKit, Turso, Drizzle & ChatGPT-4o 🤖 LIVE Coding & Chill 🔴

Опубликовано: 01 Январь 1970
на канале: Johnny Magrippis
301
12

Let’s build a fun new “Game Show” / trivia tower web app, with “Who Wants To Be A Millionaire meets Wordle” vibes, implemented with fullstack SvelteKit!

The critical part of this Game Show, is that it’s not going to be multiple choice answer: Users will be replying with free text! So, we’ll be integrating with ChatGPT to help 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 gameshow? Who wants to be a millionaire, but it’s free text answers, with Wordle elements?!
✅ CI/CD recap: Github Action Deploy to Fly!
✅ Drizzle schema and migrations for the `quizzes` & `questions` tables! https://orm.drizzle.team/docs/joins#m...
✅ Seeding a sample quiz!
✅ Fetch and show the latest quiz, first question! https://kit.svelte.dev/docs/load
✅ Drizzle schema and migrations for `answers`!
✅ Submitting an answer and displaying whether it was correct!
✅ Using ChatGPT to validate freeform answers more intuitively! https://sdk.vercel.ai/docs/reference/...
✅ Getting an object response from ChatGPT! https://sdk.vercel.ai/docs/ai-sdk-cor...
[ ] Showing the next question!
[ ] Going through the whole quiz!
— NEXT STEPS —
[ ] High scores!
[ ] Answer timer!
[ ] Countdown to the next quiz
[ ] UI / CRM to add quizzes
[ ] Extra lives & skips!
[ ] Share your results to your friends and socials!
[ ] Anonymous users: Play without an account!
[ ] Create your own quiz?!
— 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/

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 109!


TIMESTAMPS

00:00 - What are we doing today? A gameshow? Who wants to be a millionaire, but it’s free text answers, with Wordle elements?!
4:06 - CI/CD recap: Github Action Deploy to Fly!
9:33 - Drizzle schema and migrations for the `quizzes` & `questions` tables!
32:19 - Seeding a sample quiz!
49:40 - Fetch and show the latest quiz, first question!
1:12:28 - Drizzle schema and migrations for `answers`!
1:22:00 - Submitting an answer with Superforms!
1:39:28 - Persisting answer & determining whether it was correct!
2:11:45 - Displaying whether our answer was correct!
2:21:00 - Data reset and RECAP 🥳 DEMO
2:27:10 - Using ChatGPT to intuitively validate free text answers!
2:40:29 - Getting an object response from ChatGPT!
2:48:50 - Caching ChatGPT responses
3:15:25 - Demo attempt but discovering we forgot a WHERE clause
3:22:15 - Final 🥳 DEMO


Смотрите видео New “Game Show” app 🎊 Svelte 5 with SvelteKit, Turso, Drizzle & ChatGPT-4o 🤖 LIVE Coding & Chill 🔴 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 301 раз и оно понравилось 12 людям.