SvelteKit 2025 🚀 Brand new SVELTE 5 app from scratch! Styling, tests, AND MORE 🔴 LIVE Coding & Chill

Let’s learn how to code by building a REAL APP! In this brand new series, we’ll go all the way from **Level 1 noob devs**, all the way to Level 99: You, or your clients, **have any app idea, and you can absolutely implement it** 🚀 We’ve done something similar last year, beginning with the Paulina Puppers series, a portfolio site for an aspiring photographer: 🐶 https://www.youtube.com/watch?v=9_y1J_4BKts&list=PLD9qSm-W5DLrKMChNEir_3kR4EE5e7FrK&index=1 This time, we’ll keep increasing the complexity in every episode, sticking with the same app! We’ll start today by developing a static site to learn HTML, CSS & Javascript fundamentals! It will be a marketing site for our brand new FITNESS APP! But we will be starting implementing straight away in my favourite meta framework, SvelteKit, so we can keep adding functionality. 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 👾: https://discord.gg/eR5Q52Sfm3 — 🥳🥳🥳 — — Agenda — Description got too long with the full agenda, check-out the timestamps! ⏱️ — 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/ bits-ui: https://next.bits-ui.com/docs/introduction shadcn-svelte: https://next.shadcn-svelte.com/ Playwright: https://playwright.dev/ Volta: https://volta.sh/ pnpm: https://pnpm.io/ Cloudflare: https://developers.cloudflare.com/ Fontsource: https://fontsource.org/ SmollCSS: https://smolcss.dev/ Adam’s GUI Challenges: https://www.youtube.com/watch?v=kZiS1QStIWc My own website: https://magrippis.com/ Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: https://discord.gg/eR5Q52Sfm3 Between the comment section and the socials, let me know **somewhere** what you’d like me to cover next 🙌 Stream number 139! — TIMESTAMPS — 00:00 - What are we doing today? A brand new code-along REAL APP? 14:54 - What should I know already 🤔 Node? Package Managers? Typescript? The Svelte tutorial? 30:13 - Getting started with the SvelteKit wizard 🧙‍♂️ explaining our many choices 45:49 - What did the wizard give us? 1:25:57 - What would the “kitchen-sink” project have given us? 1:34:32 - Who am I anyway?! 1:53:58 - CSS Styling… 💅 with global & scoped CSS! 2:14:40 - Let’s set up a classic hero section! 2:38:47 - CSS Styling… ⛵️ with Tailwind! How can it teach you CSS?! 2:57:20 - Thoughts on the Svelte CLI adder 🧙‍♂️ having a wizard do stuff for you! 3:00:17 - Mixing and matching global, scoped & Tailwind CSS! 3:04:46 - Recap, series overview ⏱️ BREAK 3:15:12 - Thinking in components: Creating a re-usable Anchor component! 3:34:00 - Let’s add a dedicated “Contact” route! 3:41:03 - Working with SvelteKit layouts! 3:59:55 - Working with libraries: Bringing in `bits-ui` and its “cleverer” button that’s sometimes an anchor! https://next.bits-ui.com/docs/components/button 4:08:28 - Dark mode 🌘 with a light-weight script! 4:29:09 - Setting up our component library: Shadcn for Svelte 5! 5:02:11 - Shadcn themes CSS Variables / Custom Properties! 5:29:58 - My “Additional Custom CSS Reset” & additions, relevant article by Josh: 5:41:08 - Setting up Playwright and writing a smoke test! 6:02:15 - Version control with Git & Github! 6:06:03 - View 💫 Transitions! 6:27:22 - Less flakey tests by waiting for app hydration! 6:38:00 - FINAL ⏱️ BREAK 6:41:15 - All about fonts & bringing in a custom one with fontsource 6:58:02 - Setting up a Github project 🚀 deploying to Cloudflare 7:21:15 - Adding page metadata, including Opengraph Images! 7:51:17 - Final 🥳 DEMO + LIKE 💜 SUBSCRIBE