Скачать или смотреть SvelteKit 2025 💌 Emails & Forms with meaningful tests! 🏋️‍♂️ Gainzatron Part 2 🔴 LIVE Coding & Chill

Learn how to code by building a REAL APP!

We’ll increase the complexity of the app we just started last stream by adding two features our client really wants:

1. Email capture 💌
2. Engaging content 👀

And one “feature” that I, as the developer, really want: Meaningful automated tests so I can roll with the punches and adapt this app fast even while requirements change 🚀

Series playlist:

🏋️‍♀️    • SvelteKit 2025 🚀 Brand new SVELTE 5 app fr...  

We’ve done something similar last year, beginning with the Paulina Puppers series, a portfolio site for an aspiring photographer:

🐶    • Brand new Fullstack App with Svelte 5! Run...  

Today our static site starts doing something dynamic: We’ll add a form to capture a user’s email, and notify them when we have new features ready for them, or sign-them up for our newsletter!

We’ll be managing our audience with Resend, a SaaS with a free tier that we’ll also be using to send emails later in the series, including transactional emails for sign-ups and email logins!

We’ll still learn loads of HTML, CSS & Javascript as we keep expanding our marketing site for our brand new FITNESS APP!

We’ve chosen our favourite meta framework, SvelteKit, so we can keep adding functionality and turn this marketing site into a proper complex app: And we are doing Svelte 5, because runes are great 😉

In the next episodes, we’ll be adding a CMS integration, authentication & user accounts, premium features & subscription payments and even building a native mobile app!

And we’ll be doing everything live, so speak up in the chat or the comments, if you’d like a particular tech choice or feature 🙏

🚀 Click around the app yourself: https://gainzatron.com/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/gainzatron

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 —
Description got too long, check the timestamps for the agenda 👀
— HAVE FUN —

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Playwright: https://playwright.dev/
Cloudflare: https://developers.cloudflare.com/
Resend: https://resend.com/emails
Tailwind: https://tailwindcss.com/
bits-ui: https://next.bits-ui.com/docs/introdu...
shadcn-svelte: https://next.shadcn-svelte.com/

My own website: https://magrippis.com/

And, of course, remember: Get this repository AND MORE with Johnnify Premium!

https://johnnify.com/premium

Search for `@jmagrippis` to find me on socials like Instagram & Threads! And I’m most active in 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 140!

— TIMESTAMPS —
00:00 - What are we doing today? Our REAL APP goes from static to dynamic?
6:18 - What have we done so far? What did I do offline?
16:01 - Who needs Dependabot? ⬆️ Updating dependencies with npm-check-updates!
33:19 - BDD Form with 🎭 Playwright!
46:39 - Using a shadcn Card!
59:48 - What do I think about Svelte 5 anyway?!
1:06:22 - shadcn Label & Input components
1:12:47 - Send the user’s email to our backend, with SvelteKit Form Actions!
1:29:31 - How do we know this worked?! Toast notifications with shadcn & sonner
1:38:03 - The Toast disappears for Playwright, due to full browser navigation!
1:41:07 - Checking Playwright’s video to figure out what went wrong!
1:43:50 - Adding `use:enhance` to switch to client-side form submission and keep our toast!
2:09:19 - Standardised enhanced forms SvelteKit Superforms, validated with Zod
3:07:36 - Standardised & type-safe Superform messages!
3:25:35 - Emails 💌 Newsletter Audiences with Resend
3:30:54 - Buying & setting up a domain with the Cloudflare Registrar:
3:34:22 - Email Routing to sign-up for Free Resend as our client / ops account!
3:38:28 - API Keys and working with secret & public environment variables
3:53:16 - Prove to Resend that we own our domain!
4:01:10 - DEMO 🥳 Add contact to resend audience
4:05:19 - Setting up MSW: Mock Service Worker
4:12:35 - Where should we start our MSW server? Creating a `hooks.server.ts`!
4:29:10 - Resend MSW Handler, to test happy paths & error cases!
4:31:38 - Watch me think how we should be conditionally importing MSW instead!
4:35:03 - Cool Cloudflare features, but also alternatives such as ImprovMX
4:42:53 - Set yourself up for success with my flavour of dependency injection!
5:12:11 - IMPORTANT! Conditionally import MSW!
5:23:37 - Final 🥳 DEMO + LIKE 💜 SUBSCRIBE