Learn How To Build Modern Web Apps With SvelteKit

Video Description

SvelteKit is the Swiss army knife of web frameworks for building resilient apps that run anywhere where JavaScript runs. 👉️ Support ▶️ YouTube Membership https://youtube.com/@joyofcodedev/join 🔴 Patreon https://www.patreon.com/joyofcode 👉️ Links: Learn SvelteKit Playlist: https://www.youtube.com/playlist?list=PLA9WiRZ-IS_zfHpxmztJQLeBISsQkh9-M Learn Svelte Playlist: https://www.youtube.com/playlist?list=PLA9WiRZ-IS_ylnMYxIFCsZN6xVVSvLuHk Posts: 1. https://joyofcode.xyz/what-is-sveltekit 2. https://joyofcode.xyz/sveltekit-project-structure 3. https://joyofcode.xyz/sveltekit-routing 4. https://joyofcode.xyz/sveltekit-loading-data 5. https://joyofcode.xyz/working-with-forms-in-sveltekit 6. https://joyofcode.xyz/sveltekit-advanced-layouts 7. https://joyofcode.xyz/sveltekit-hooks 8. https://joyofcode.xyz/sveltekit-deployment 👉️ Uses: 🔗 https://joyofcode.xyz/uses 👉️ Socials: 🐦️ https://twitter.com/joyofcodedev 💬 https://discord.gg/k6ZpwAKwwZ 🔖 Timestamps 0:00 Intro 2:15 What Is SvelteKit? 5:00 SvelteKit Blurs The Line Between Frontend And Backend 8:29 Convention Over Configuration 11:17 Best Of Both Worlds: Server-Side Rendering With Client-Side Navigation 16:57 SvelteKit Uses The Web Platform 19:18 SvelteKit Apps Are More Resilient Using Progressive Enhancement 21:02 SvelteKit Runs Where javaScript Runs 22:12 SvelteKit For Component Libraries 22:45 SvelteKit Is Made For Everyone 23:14 SvelteKit Project Setup 24:06 Creating A SvelteKit Project From Scratch 34:12 Using The SvelteKit CLI 45:24 SvelteKit Routing 47:14 Project Setup 48:44 Pages 59:17 Layout 1:03:44 The Power of Nested Routes 1:12:51 Dynamic Routes 1:14:55 Advanced Routing 1:14:58 Multiple Route Parameters 1:16:43 Optional Parameters 1:18:04 Rest Parameters 1:20:18 Matching Parameters 1:23:41 Loading Data 1:23:48 Project Setup 1:24:28 Database Setup 1:38:49 API Endpoints 1:59:28 Showing Page Data Using Client-Side Rendering 2:05:14 Showing Page Data Using Server-Side Rendering 2:13:17 Sometimes You Only Want To Run Code On The Server 2:20:05 Your Layout Files Can Also Load Data 2:29:42 Making Your Data Available Everywhere 2:33:09 Using Data From The URL 2:40:28 Using Parent Layout Data 2:45:09 How Load Functions Work 2:51:19 Working With Forms 2:51:25 Project Setup 2:52:14 Creating A Fake Database 2:55:27 Reintroduction To Forms 2:59:25 Working With Forms Using API Endpoints 3:16:52 Working With Forms The SvelteKit Way Using Form Actions 3:26:31 Progressive Form Enhancement 3:30:44 Customize The Enhance Action To Show A Loading UI 3:37:09 Form Validation In SvelteKit 3:48:27 Advanced Enhance Action Customization 3:53:39 Advanced Layouts 3:53:45 Project Setup 3:54:10 Sometimes You Want Routes With Different Layouts 3:56:18 Using Group Layouts To Group Related Routes 4:03:19 Breaking Out Of Layouts 4:04:28 Layout Reset 4:06:28 SvelteKit Hooks 4:06:34 What Are Hooks? 4:07:44 Creating Routes 4:11:58 Authentication 4:16:39 Transforming HTML 4:19:24 Measuring Page Load Speed 4:21:58 Error Logging 4:23:46 Modifying A Fetch Response 4:25:12 Parsing Form Data 4:28:45 Using Multiple Hooks Together 4:29:53 SvelteKit Deployment 4:30:54 Web Hosting Types 4:36:11 Deploying A SvelteKit Project 4:48:09 Optimizing Your Site 4:59:58 Outro #joyofcode #svelte #sveltekit