From zero to production with SvelteKit
Full Stack SvelteKit is a full and comprehensive video course that will teach you how to build and deploy full stack web applications using SvelteKit.
By Justin Ahinon.
What will be covered in the course?
The goal of this course is to take you from a beginner level in SvelteKit, and go through the whole process of building and deploying a full stack web application. We will cover everything from the philosophy of Svelte and SvelteKit, to setting up a project, choosing a component library, connecting to a database, authentication, payments, and more.
Module 1
Introduction to Svelte
What is Svelte?
The philosophy of the framework
Compiler vs Runtime framework
Svelte components
Styling
Stores
Logic blocs and special elements
Directives (component & elements)
Svelte 5
Module 2
What we’re going to build
Module 3
Introduction to SvelteKit
What’s SvelteKit
Framework vs Meta framework
TypeScript support
Routing
Rendering strategies (SSR, CSR, Prerendering)
Data loading
API Routes
Errors and redirects
Headers, locals and cookies
SvelteKit stores
Hooks
Environment variables
Advanced routing
Module 4
Forms
Form actions
Progressive enhancement
Validation: Zod and Valibot
Superforms
Module 5
Components libraries
Should you use one?
Most interesting options (Melt UI, Bits UI, Shadcn Svelte)
Module 6
Integrating a database
SQLite?
Simplest option with raw SQL queries
Using an ORM
Drizzle
Basic CRUD operations
Relations and queries
Module 7
Authentication
Session based authentication
Options / libraries for authentication in SvelteKit
Lucia auth
Email and Password authentication
Email verification and password reset with Resend
OAuth with Google
Module 8
Payments
Payments implementation in SaaS are tricky
Main options: Stripe and Lemon Squeezy
Using a hosted payment form
Integrating Stripe payments to a SaaS
Module 9
Deployment
SvelteKit adapters
Using Docker and Docker Compose
Coolify
Tech Stack
Here is an overview of the main technologies used in this course.
Svelte
Svelte is a modern JavaScript framework for building user interfaces.
https://svelte.devSvelteKit
SvelteKit is a framework for building web applications using Svelte.
https://kit.svelte.devTypeScript
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
https://www.typescriptlang.orgTailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
https://tailwindcss.comSQLite
SQLite is a lightweight, serverless, and self-contained database engine.
https://sqlite.orgDrizzle
Drizzle provides a set of tools for interacting with databases in TypeScript applications. It includes a framework agnostic ORM, a query builder, and a migration CLI.
https://drizzle.teamLucia Auth
Lucia is an open-source, lightweight and highly customizable session-based authentication library for TypeScript applications.
https://lucia-auth.comDocker
Docker is a platform for building, shipping, and running distributed applications.
https://www.docker.comStripe
Stripe is a payment processing platform that allows you to accept payments online and in-app.
https://stripe.com