SvelteKit 5 Runes Mastery: Deploy Full Stack Netlify/Mongodb

Build secure, scalable, optimized, responsive full-stack apps with authentication, CRUD, serverless functions and APIs.

Created byPatrick Kavanagh

Last updated 9/2025

English

What you'll learn

Build full-stack web apps using SvelteKit 5 with Runes mode
Manage reactive state with $state, $derived, and $effect
Structure code using clean separation of concerns (UI, signals, backend)
Implement dynamic routes and conditional rendering with page parameters
Secure authentication with hashed passwords and session-based login
Connect to MongoDB Atlas using environment variables in Netlify
Deploy serverless functions for add, update, delete, and protected routes
Centralize API logic with a reusable fetch layer and token injection

Course content

9 sections • 52 lectures • 5h 25m total length

Introduction4:18
Introduction to course. Covers Aims, Expectations, Who the course is for, Technologies Used.
Also covers the Course App, Requirements Specification and What you will learn.
Concepts4:27
App Planning & Design, Architecture & Separation of Concerns, Component Lifecycle wit Runes, Reactivity in Runes Mode, Data & Program Flow, Local Storage vs Reactive State, Routing & Load Behavior, Security by Design, Serverless Logic with Netlify, State Management.
App Demo2:06
Demo of local flip2 app side by side with Live Netlify deployed app.

Set up software and accounts.2:14
MonggoDb Setup3:45
Set up Mongodb database using Mongodb Compass.
Create Database, Collection.
Sveltekit Installation (with Netlify)6:55
Set up Sveltekit Installation into your projects folder. (See Handout)
Folder Structure, Starter.zip. How we will build the course App!4:58
Brief Overview of folder structure, Starter.zip contents and Documentation. Covers How we will build this app!

Navigation Components10:01
Navigation Components: +layout.svelte, routes/+page.svelte routing file, Nav.svelte (navigtion control). HNav.svelte - horizontal navigation, VNav.svelte - vertical navigation, Sidebar.svelte - Puts navigation together vertically in the sidebar.
Navigation = Login / Logout9:57
Covers navigation component Logio.svelte, which requires appSignals.svelte.js.
Check you extracted: Sun.svelte, Moon.svelte, Seo.Svelte, Footer.svelte, links.js, Alert.svelte from Starter.zip.
Testing Navigation.
Navigation - What was covered in Navigation1:05
Review of what was covered in Navigation.

Login / Logout Process9:29
Login Process described in terms of components, Data-flow, Login Management.
Login Route file: routes/login/+page.svelte
Login / Logout Process11:48
Covers creating component: lib/backend/loginUser.js
Challenge: create lib/backend/registerUser.js
Covers: Netlify serverless function: netlify/functions/loginUser.js
Login / Logout Process continued.9:15
Challenge: created netlify/functions/registerUser.js
Helper Function: netlify/functions/lib/db-Helper.js
Login/ Logout Process continued6:11
Covers netlify/functions/lib/sessionsHelper.js helper function.
Covers netlify/functions/lib/verifyJWT.js helper function.
Covers .env file
Logout Process6:46
Covers the logout process.
Challenge: create netlify/functions/logoutUser.js
Create basic route file: routes/projects/+page.svelte
Corrections: routes/login/+page.svelte
Testing the Login/Logout Process7:32
Testing the Login/ Logout Process.
What you have learnt!

Projects Introduction6:56
Corrections: 1. sessionId only locally. 2. flip2 key not user key for local storage. 3. Preloading of projects moved to home route.
Component Planning for Projects and Projects Development Plan.
Projects : projectsSignals.7:54
Challenge: Create lib/signals/projectSignals.svelte.js
Create home route data preloading file: routes/+page.js
Create home route file: routes/+page.svelte
Create project route: routes/projects/+page.svelte
Create dynamic project route: routes/projects/[id]/+page.svelte
Projects: UI Components6:51
Create lib/components/Projects/Projects.svelte
Create lib/components/Projects/ProjectFilter.svelte
Create lib/components/Projects/ProjectItem.svelte
Projects: Dynamic Route for CRUD11:45
Create Dynamic Project Update file: routes/projectupdate/[id]/+page.svelte
Create lib/utils/projectDefault.js
Create lib/components/Projects/ProjectForm.svelte
Create lib/config/projectFields.js
Create lib/utils/validate.js
Projects: client side api layer: project.js7:44
Create client-side API layer: lib/services/projects.js (Note: in video, the code shows this as lib/backend/ but it is in lib/services/)
Create generic apiService.js: lib/services/apiService.js
Projects: Netlify Functions9:29
Create file: netlify/functions/lib/allowedProjectFields.js (or copy from Checkpoint zip)
Create Netlify Project addProject.js: netlify/functions/addProject.js
Challenge: Create updProjects.js in netlify/functions/ folder
Challenge: Create delProject.js in netlify/functions/ folder
Challenge: Create getProjects.js in netlify/functions/ folder
Projects: validate-sessions.js3:22
Create helper function validate-session.js in netlify/functions.
Projects: Testing7:22
Project Testing. Run through various tests to check that all functionality of Projects are working. Test for log out and log in.
Project Testing Part 27:14
Complete testing on Projects - Part 2.
Review: What you have learnt!
Projects : Redirect Issue7:25
Detailed explanation of a Sveltekit Redirect Issue.
Projects: Redirect Issue Fix7:38
Projects Redirect Issue & Fix. Best Practices & Goto Wrapper.

Introduction6:21
Introduction to Deploying to Netlify
Deploy Preparation, Create Local Git Repository, Deploy to Netlify
Git Repository and GitHub Repository4:18
Create git repo locally (git init, git add . , git commit -m "Initial Commit")
Create GitHub Repository (see Handout)
Create Netlify Site, Connect to GitHub repo5:42
Create Netlify Site, Link to GitHub
Test Deployed Netlify Site5:25
Access Live Site. Test all functionality.

Introduction: How we will tackle this section.6:34
Introduction : how we will tackle this section.
Challenge: create lib/config/contactFields.js
Challenge: create lib/signals/contactSignals.svelte.js
Challenge: create lib/services/dataService.js
Contacts UI Components7:02
Challenge: Create lib/components/Contacts//Contacts.svelte
Challenge: Create lib/components/Contacts//ContactItem.svelte
Challenge: Create lib/components/Contacts//ContactForm.svelte
Contacts Route Components5:39
Challenge: create routes/contacts/+page.js
Challenge: create route/contacts/+page.svelte
Contacts: Dynamic Routes7:16
Challenge: create routes/contactupdate/[id]/+page.svelte
Challenge: create routes/contacts/[id]/+page.svelte
Contacts: Combined Netlify Function6:37
Create Combined Netlify function: netlify/functions/contactsHandler.js
Create netlify/functions/lib/allowedConactFields.js
Change to: lib/services/apiService.js
Create Contacts collection in MongoDB Contacts
Contacts Testing6:32
Testing Changes to: updProject.js, delProject.js, ContactForm.svelte,
Testing locally
Contacts : Update Repos6:52
Update local Repo (git add. , git commit -m "Complete Contacts", git push origin main
Test LIVE contacts
What you have learnt!

EzFlip Intro6:59
Corrections for ,toString(): updProject.js, delProject.js, contactsHandler.js
Ezflip quick analysis tool: how we will tackle this section.
Challenge: create lib/config/ezflipFields.js
Challenge create lib/components/Ezflip/EzFlipForm.svelte
EzFlip: Routes5:47
Create ezflip route: src//routes/ezflip/+page.svelte.
Challenge: create dynamic route: routes/ezflip/[id]/+page.svelte
Ezflip: Update Repos & Deploy3:34
Update Repos locally and GitHub.
Check/test deployed site.
What you have learnt!

Introduction: Security Gaps6:25
Introduction to Security Gaps
Security Gap 1 - No maximum limits on users/projects/contacts. Changes to: .env, addProject.js, contactsHandler.js, registerUser.js
Security Gap 2: No Captcha / anti-bot3:15
Changes to registerUser.js and register route (routes/register/+page.svelte) using captcha and honeypot.
Security Gap 3: User Verification (Email)4:35
Overview of using EmailJS to verify user email, splitting register and login logic for clarity.
How we will handle closing this gap. Steps 1-3.
See Handout for procedure and email template code.
Security Gap 3: User Verification - Step 4 of 83:53
Step 4: Update netlify/functions/registerUser.js for emailJS updates.
New fields will be programmatically created for MongoDB (verified, verifyToken, URLcreatedAt)
Security Gap 3: User Verification - Step 5,6 of 83:08
Security Gap 3: User Verification = Steps 5 & 6 of 8
Step 5: Create routes/verify/+server.js
Step 6: Update netlify/functions/loginUser.js
Security Gap 3: User Verification - Steps 7,8 of 85:11
Security Gap 3: User Verification - Steps 7,8 of 8
Step 7: Updates to: routes/register/+page.svelte
Step 8: Updates to: routes/login/+page.svelte
Security Gap 4: Rate Limiting7:03
Rate Limiting using MongoDB to track logins/registers per IP.
Create netlify/functions/lib/checkRateLimit.js
Updates for rate limits to netlify functions: loginUser.js, registerUser.js
Updates to lib/backend/loginUser.js and registerUser.js
Updates to routes/login/+page.svelte and routes/register/+page.svelte
Create rateLimits collection in MongoDB compass.
Security Gap 5: Security Credentials5:18
Update front end and backend for secure passwords.
Create lib/helpers/pwRules.js
Update routes/login/+page.svelte for password rules.
Update routes/register/+page.svelte for password rules.
Update netlify functions: registerUser.js
Security Gap 6: Route Protection for getProjects()4:00
Update ,env file for PUBLIC_APP_ACCESS_KEY
Update netlify/functions/getProjects.js
Update routes/+page.js with refined GET method including header
Create src/hooks.server.js to cleanup/block unwanted Netlify requests to .well-known ... app specific URLs,
Security - Testing & App-wide Fixes9:10
Please refer to Handout for Final Fixes.
Update to src/routes/+layout.svelte
Update src/routes/+page.js
Update src/routes/contacts/+page.js
Update src/routes/contacts/+page.svelte
Update src/lib/component/UI/Modal.svelte
Update src/routes/ezflip/[id]/+page.svelte
Update src/netlify/functions/validate-sessions.js
Update src/netlify/functions/lib/db-helper.js
Update src/hooks.server.js
Update netlify.toml
Update .env file. NOTE: do NOT use VITE_. Use prefix PUBLIC_ instead.
Final Video with demo4:37
Final video in flip2 course by Kode-Xs.
Notes on testing, updating repos.
Demo
What you learnt!
Final Remarks

Requirements

No prior Svelte experience needed — basic JavaScript knowledge recommended

Description

Hello Everyone! I have coupons available so you can not only get a full blown amazing course but also get a DISCOUNT. Happy thanksgiving!

This hands-on course walks you step-by-step through building a complete, production-ready full-stack application with SvelteKit 5 in Runes Mode. You’ll master SvelteKit’s new RUNES reactivity, craft responsive navigation, and implement authentication with secure session management, hashed passwords, and a cookie-based login state. Along the way, you’ll apply practical patterns for organizing components, managing state with signals, and structuring features for long-term scalability and clarity.

On the data side, you’ll build end-to-end CRUD for Projects and Contacts backed by MongoDB, and you’ll write robust Netlify serverless functions for create, read, update, and delete operations. Security is a first-class theme: you’ll add CAPTCHA/anti-bot checks, email verification, rate limiting, and route protection so your app resists common abuse vectors and stays stable under load.

You’ll also polish the user experience with responsive layouts, conditional rendering, and reusable form components designed for maintainability. A real-world feature, EzFlip, ties it all together—a property analysis tool that calculates Maximum Allowable Offer (MAYO) and integrates with your project data, giving you tangible, job-ready experience.

Finally, you’ll deploy to Netlify, configure environment variables, and verify everything in a live environment. By the end, you’ll have a secure, professional-grade SvelteKit 5 app—and the confidence to design, build, secure, and deploy full-stack applications on your own.

AI Disclosure: for the purpose of voice clarity, the voice has been enhanced using artificial intelligence software.

Who this course is for:

This course is for web developers, students, and coders who want to build full-stack applications using SvelteKit 5 Runes mode. It’s ideal for those comfortable with JavaScript/HTML/CSS who want to learn client-server architecture using Netlify functions and MongoDB.

SvelteKit 5 Runes Mastery: Deploy Full Stack Netlify/Mongodb

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 11min

Setup4 lectures • 18min

Navigation3 lectures • 21min

Authentication6 lectures • 51min

Projects11 lectures • 1hr 24min

Deploy to Netlify4 lectures • 22min

Contacts7 lectures • 47min

EzFlip3 lectures • 16min

Securities Considerations11 lectures • 57min

Requirements

Description

Who this course is for: