SvelteKit 2025 🔐 Databases & Auth with Cloudflare D1 ☸️ Steerlist App 🔴 LIVE Coding & Chill

Learn how to code by building a REAL APP!

Fundamental learnings today as create a login flow and user accounts from scratch… In a brand new app, Steerlist!!! But: with these fundamentals, you’ll be able to add login flows to all your SvelteKit apps, including Gainzatron 🔐

Series playlist:

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

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

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

I’ve chosen my favourite meta framework, SvelteKit, for this app, but one of the reasons I love Svelte is that it guides you into using HTML and web fundamentals, and indeed today we’ll learn fundamentals we can apply to any framework 😉

In the next episodes, we’ll expand this app to make an ad-free Tiermaker competitor!

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/steerlist

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? Auth flow for a brand new app?!
[ ] Let’s setup Cloudflare D1! Cloudflare Bindings with SvelteKit: https://developers.cloudflare.com/pag... & https://developers.cloudflare.com/pag...
[ ] What about Cloudflare Durable Objects with synchronous SQLite?! https://developers.cloudflare.com/dur...
[ ] Drizzle ORM setup: https://orm.drizzle.team/docs/connect...
[ ] Email & Password Auth with Lucia: https://svelte.dev/docs/cli/sv-add & https://lucia-auth.com/
[ ] Let’s create a shadcn-inspired Login with Email & Password Superform! https://ui.shadcn.com/blocks/authenti...
[ ] Testing the auth flow with Playwright: https://playwright.dev/docs/auth#intr...
[ ] Using auth credentials to test protected routes!
[ ] Social Login with Google: https://lucia-auth.com/tutorials/goog...
[ ] Social Login with Github: https://lucia-auth.com/tutorials/gith...
[ ] Local development with Miniflare: https://miniflare.dev/
[ ] Password resets!
[ ] Magic link login!
[ ] Flash Messages & special logic for brand new users: https://superforms.rocks/flash-messag...
[ ] Final 🥳 DEMO + LIKE 💜 SUBSCRIBE
— 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/
Lucia: https://lucia-auth.com/
Tailwind: https://tailwindcss.com/
bits-ui: https://next.bits-ui.com/docs/introdu...
shadcn-svelte: https://next.shadcn-svelte.com/
Unplugin Icons: https://github.com/unplugin/unplugin-...

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