Membership Subscription Service with SvelteKit & Supabase 🏦🔴 LIVE Coding & Chill
Who needs Patreon when you can create your own members-only personal site? Build up your SEO and save on Patreon’s cut, while having fun building a proper modern web app with SvelteKit 🙌
— COMMUNITY —
New DISCORD SERVER for us 😱: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What are we doing today? What’s Patreon? https://www.patreon.com/
✅ New SvelteKit app with the SvelteKit wizard: https://kit.svelte.dev/docs/creating-...
✅ Setting up styling with Tailwind.css: https://tailwindcss.com/
✅ Spin up a local Supabase instance: https://supabase.com/docs/guides/cli/...
✅ The Stripe starter schema to eventually take on subscriptions! https://stripe.com/
✅ Adding public static environment variables: https://kit.svelte.dev/docs/modules#$...
✅ Setting up with `@supabase/auth-helpers-sveltekit`: https://supabase.com/docs/guides/with...
✅ Login with Github: https://supabase.com/docs/guides/auth...
— BONUS —
[ ] Dark Mode 🌘
✅ Automatic Typescript types generation for Supabase: https://supabase.com/docs/guides/api/...
[ ] Login via Magic Link!
[ ] Login with Email & Password: https://supabase.com/docs/guides/auth...
[ ] Forgotten password / password reset
[ ] Have your CI login with email & password?
[ ] Protected posts!
[ ] Next steps: Take subscriptions with Stripe!
— 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.css: https://tailwindcss.com/
Supabase: https://supabase.com/
Stripe: https://stripe.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 🙌
—
TIMESTAMPS
—
0:00 - What we’re building today!
2:34 - New SvelteKit app with the SvelteKit wizard
6:10 - Thoughts on project structure
10:04 - Setup GitHub repo
11:14 - Connect repo & deploy with Vercel!
13:30 - Setting up styling with Tailwind.css
35:46 - Thoughts on Stripe & Supabase
42:00 - Initialising Supabase & spinning up local instance with Docker
49:55 - The Stripe starter schema to eventually take on subscriptions!
53:35 - Adding public static environment variables & setting up `@supabase/auth-helpers-sveltekit`
1:09:05 - Automatic typescript types generation
1:21:20 - Login route!
1:34:55 - Looking for Login with Github in the local project (it’s not there)
1:37:20 - Implementing “Login with Github”!