Native Share, straight to Threads & “Copy Link” 📲 Trivia Train Part 5 🚂 LIVE Coding & Chill 🔴
Share-ability is a bigger “SEO” factor nowadays, than the things “SEO Experts” would traditionally have you do… So let’s see how we can add native share UI for mobile devices, as well as a first-party “Share to Threads” button, and a fallback generic “copy button”!
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?
✅ 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...
✅ “Copied ✅” success text!
✅ Share to Threads specifically! https://www.threads.net/@0xjessel/pos...
✅ I wrote all about this?! https://magrippis.com/blog/2020/how-t...
— BONUS —
✅ Domains with Cloudflare Registrar!
✅ DNS records to work with Fly! https://fly.io/docs/networking/custom...
✅ Creating a certificate for HTTPS: https://fly.io/docs/networking/custom...
— NEXT STEPS —
[ ] Persist high scores!
[ ] Answer timer (hard mode)!
[ ] Countdown to the next quiz!
[ ] SFX: Sound Effects!
[ ] User Settings!
[ ] Extra lives & skips!
[ ] Drag to re-order questions!
[ ] Optional fun facts after answers!
[ ] Dialog to delete a quiz!
[ ] 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 112!
—
TIMESTAMPS
—
00:00 - What are we doing today? A Trivia / Quiz Game Show app?
8:15 - Share your results to your friends and socials!
18:10 - Testing it works on mobile using vite dev --host!
29:45 - How do we do the quiz chats anyway?
38:55 - What about desktop users? Let’s make a copy button!
59:45 - “Copied ✅” success text!
1:11:03 - Share to Threads specifically!
1:44:35 - I wrote all about this?!
1:53:35 - Domains with Cloudflare Registrar!
1:58:20 - DNS records to work with Fly!
2:05:30 - Creating a certificate for HTTPS
2:19:11 - Only show the share options after you’ve completed the quiz!
2:42:40 - Final 🥳 DEMO
Смотрите видео Native Share, straight to Threads & “Copy Link” 📲 Trivia Train Part 5 🚂 LIVE Coding & Chill 🔴 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 148 раз и оно понравилось 7 людям.