OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps

Niklas Fischer

Learn Svelte 5 from scratch through hands-on, real-world projects. Whether you're a JavaScript developer eager to explore a hot new framework or looking to add modern web development skills to your toolkit, this course is for you.

Why Learn Svelte & SvelteKit?

Read more

Learn Svelte 5 from scratch through hands-on, real-world projects. Whether you're a JavaScript developer eager to explore a hot new framework or looking to add modern web development skills to your toolkit, this course is for you.

Why Learn Svelte & SvelteKit?

Svelte is a revolutionary framework that compiles your code to pure JavaScript, making your web apps fast, lightweight, and highly efficient. Unlike other frameworks, Svelte doesn’t rely on a virtual DOM, meaning it ships less code and performs faster. Pair it with SvelteKit, and you’ve got a full-featured toolkit for building server-rendered, highly interactive, and accessible apps with ease.With Svelte 5, the code you write is even leaner and more efficient, and this course covers all the new syntax and best practices, making it the perfect time to start learning Svelte.

What You’ll Learn:

  • Master the brand-new Svelte 5 features

  • Build three fully-functional projects: from a product landing page with Stripe integration to authenticated web apps

  • Integrate Stripe for payments, Sanity CMS for content management, and Supabase for authentication

  • Automate emails with SendGrid and connect your app to OpenAI for image recognition

  • Apply project-based learning to solve real problems

  • How to use TypeScript within a Svelte & SvelteKit app (second & third project are using it)

Course Overview:

This course takes you deep into Svelte 5, the next major version of the Svelte framework. You’ll build three progressively complex projects, designed to help you level up with practical, hands-on learning. The second and third project are written in TypeScript, while the first one uses vanilla JavaScript.

  1. eBook Landing Page with Stripe IntegrationCreate a sleek landing page to sell a product online, fully integrated with Stripe for payments. Learn how to handle webhooks with your SvelteKit API endpoints and send emails with the ebook automatically when receiving a request from Stripe.

  2. Developer Portfolio with Sanity CMSShowcase your skills with a developer portfolio powered by Sanity CMS. Capture contact requests using a dynamic form, and use SendGrid to send personalized emails. Ideal for freelance developers looking to land new clients.

  3. Authenticated CRUD App with Supabase and OpenAIDive into user authentication, database management, and image recognition with this feature-rich app. Upload book covers and leverage OpenAI to recognize books from a bookshelf image. The ultimate full-stack project.

Why This Course?

  • Project-Based Learning: Forget boring theory. Each project tackles real-world scenarios that you’ll use in your own work.

  • Svelte 5 Syntax: Be one of the first to learn Svelte 5, including the latest syntax and features.

  • Progressive Difficulty: As you progress, the projects get more advanced, helping you build confidence and a solid understanding of SvelteKit.

  • CSS Simplified: Every project comes with a skeleton CSS templates to skip styling videos and focus on JavaScript and Svelte functionality. If you don't want to, you don't have to write a single line of CSS.

Who is This Course For?

Everybody who knows JavaScript. Svelte is super easy to pick up and everything you need to know is covered in the course.

Enroll now

What's inside

Learning objectives

  • Build modern web applications using svelte 5 and sveltekit, applying the latest syntax, including rune syntax, to real-world projects.
  • Integrate third-party services like stripe, supabase, and openai into web apps to handle payments, authentication, and image recognition.
  • Develop and deploy server-rendered apps that are highly interactive, lightweight, and optimized for performance using sveltekit.
  • Create a fully functional crud application with authentication, database management, and user interfaces, including uploading and processing images through ai.
  • How to use typescript within svelte & sveltekit

Syllabus

Course Intro
About this course
How to go through this course
All materials for this course
Read more
Svelte 5 Release - What has changed for this course?
Svelte 5 Crash Course
Structure of a Svelte File
Reactivity in Svelte - state & derived rune
Using reactive state in inputs and effect rune
Debugging in Svelte - Inspect rune
Passing props around Svelte components
Snippets, templating language and more advanced reactive state
SvelteKit Crash Course
SvelteKit Structure & Routing
Fetching Data server-side with page.server.ts file
Fetching data server & client side with load function
Building API endpoints in SvelteKit
Project 1: Product Landing Page with Stripe Integration
Project Overview: Landing Page for Digital Product with Payment integration
Optional: In case you do not want to write any css
Getting started - initial project setup (svelte & css reset)
Hero Section - HTML Structure
Hero Section - Styling
Creating a reusable button - HTML
Button - Styling
Chapter Preview Section
Chapter Preview - Styling
Chapter Preview - Svelte Templating language - Usage of #each keyword
Chapter Preview - Render content dynamically on user input
Chapter Preview - Derive state to simplify code structure
About the author section - HTML structure
About the author section - Styling
FAQ Section - HTML structure
FAQ Section - Styling
FAQ Section - Functionality
Stripe Account Setup
Payment integration with stripe conceptually explained
Stripe integration code
Success & Failure pages after payment
Stripe renamed webhooks to event destinations!
Sendgrid account registration & API key creation
Deployment to vercel & setup of stripe webhook
Send out email with digital product on payment webhook from stripe
Optional: How to secure your stripe webhook
Project 2: Developer portfolio with headless CMS
PROJECT RESOURCES
Project overview & app infrastructure
Project setup
Hero Section
Flexible Button Component
Flexible Button Styling
Section Headline Component
About Me Section
About Me Section Styling
Work Experience Table
Work Experience Table Styling
Sanity Setup
Fetch data from Sanity in SvelteKit frontend
Display sanity data on frontend
My Work Section - Sanity data schema & adding data
Set up types for processed and raw data of sanity
Process data from raw to usable on the frontend
My Work Section - HTML structure
My Work Section - Styling
Dynamic routing & loading of blog article
Render blog article on frontend
Blog article styling
Create skills & add skill icons
Skills section
Skills section - styling
Contact Section
Contact Section Styling
Frontend Validation of Contact Me form
Handling of contact me section in backend endpoint
Header
Header Styling
Footer Structure & Styling
Project deployment to vercel
Project 3: Personal book library with supabase authentication
Project Overview
Project Setup
Hero Section Styling
Auth Form for Register & Login Page
Auth Form Styling
Form Actions in SvelteKit for Registration & Login
Supabase Setup
Supabase Signup with Email and Password
Overview Svelte & Supabase Auth Flow
Auth implementation server side
Login form action
Set up context to keep track of user state
Social Login with Google
Database setup and addition of username on registration

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Covers Svelte 5, which compiles code to pure JavaScript, making web apps fast and efficient, which is highly desirable for JavaScript developers
Teaches Stripe integration, Sanity CMS, Supabase authentication, SendGrid emails, and OpenAI image recognition, which are all valuable skills for full-stack JavaScript developers
Includes project-based learning with real-world scenarios, which allows learners to apply their knowledge and build a portfolio, which is useful for JavaScript developers
Requires knowledge of JavaScript, which may exclude learners without prior experience, but allows the course to focus on advanced Svelte 5 and SvelteKit concepts
Emphasizes Svelte 5 syntax, which may require learners to adapt to new features and best practices, but ensures they are up-to-date with the latest framework version
Involves integration with third-party services like Stripe, Sanity, Supabase, SendGrid and OpenAI, which may require learners to create accounts and manage API keys

Save this course

Save Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps with these activities:
Review JavaScript Fundamentals
Solidify your understanding of JavaScript fundamentals, including variables, data types, functions, and control flow, to prepare for Svelte's reactivity system and component logic.
Browse courses on JavaScript Fundamentals
Show steps
  • Read through a JavaScript tutorial or online course.
  • Practice writing basic JavaScript functions and scripts.
  • Review concepts like closures, prototypes, and asynchronous JavaScript.
Practice TypeScript
Familiarize yourself with TypeScript syntax and features, as the second and third projects in the course use TypeScript.
Browse courses on TypeScript
Show steps
  • Work through a TypeScript tutorial or online course.
  • Convert existing JavaScript code to TypeScript.
  • Practice using TypeScript's type system and interfaces.
Read "Svelte and Sapper in Action"
Gain a deeper understanding of Svelte's core concepts and architecture by reading a book dedicated to Svelte and its ecosystem.
View Svelte and Sapper in Action on Amazon
Show steps
  • Read the book cover to cover.
  • Try out the code examples in the book.
  • Take notes on key concepts and techniques.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Build a Simple To-Do App with Svelte 5
Practice Svelte 5's new features, including Rune syntax, by building a simple to-do application that allows users to add, delete, and mark tasks as complete.
Show steps
  • Set up a new SvelteKit project.
  • Create components for displaying and managing to-do items.
  • Implement functionality for adding, deleting, and marking tasks as complete.
  • Style the application using CSS or a CSS framework.
Write a Blog Post on Svelte 5's New Features
Solidify your understanding of Svelte 5 by writing a blog post that explains its new features, such as Rune syntax, and how they improve the developer experience.
Show steps
  • Research Svelte 5's new features and improvements.
  • Write a clear and concise explanation of each feature.
  • Provide code examples to illustrate how to use the new features.
  • Publish the blog post on a personal blog or platform like Medium.
Contribute to a SvelteKit Open Source Project
Deepen your understanding of SvelteKit by contributing to an open-source project, such as reporting bugs, writing documentation, or contributing code.
Show steps
  • Find a SvelteKit open-source project on GitHub.
  • Identify an issue or feature to work on.
  • Submit a pull request with your changes.
  • Respond to feedback from the project maintainers.
Read "Effective TypeScript"
Gain a deeper understanding of TypeScript's core concepts and architecture by reading a book dedicated to TypeScript.
View Effective Typescript on Amazon
Show steps
  • Read the book cover to cover.
  • Try out the code examples in the book.
  • Take notes on key concepts and techniques.

Career center

Learners who complete Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps will develop knowledge and skills that may be useful to these careers:
Frontend Developer
A Frontend Developer builds user interfaces for websites and applications, often using JavaScript frameworks. This course is perfectly suited as it provides hands-on experience with Svelte 5 and SvelteKit, a modern framework used to create highly performant and interactive web applications. This course demonstrates how to build components, manage reactive state, fetch data, and create API endpoints, all of which are vital in a frontend development role. Furthermore, this course allows a frontend developer to learn how to use Typescript in a Svelte project. By taking this course, a frontend developer will also pick up skills in integrating with Stripe for payments and headless CMS systems, as well as user authentication, broadening their skill set.
See salaries and explore the career path for Frontend Developer
Web Application Developer
A Web Application Developer is responsible for the full life cycle of web application development, from design to deployment. This course aligns strongly with that role because it teaches Svelte 5 and SvelteKit, which are comprehensive tools for building performant server-rendered apps. The practical projects in this course, such as the landing page with Stripe integration, the developer portfolio with Sanity CMS, and the full-stack authenticated app using Supabase and OpenAI are all directly applicable to the real-world challenges faced by a web application developer. This course will help you build a foundation needed to work on the entire stack of a web application. This course also gives experience with Typescript, which is commonly used in the role.
See salaries and explore the career path for Web Application Developer
Full-Stack Developer
A Full Stack Developer works on both the front end and back end of web applications, needing a broad skill set. This course helps build that foundation by providing hands-on experience in Svelte 5 and SvelteKit, allowing developers to build responsive user interfaces and server-side logic. The course includes projects that cover user authentication, database management, API development, and third-party service integrations such as Stripe, Supabase, Sanity CMS, SendGrid, and OpenAI, making it highly useful for full stack roles. The use of Typescript in the more advanced projects would be helpful to a full stack developer, adding to their skill set. By taking this course, a full stack developer will be well equipped to handle a diverse range of tasks.
See salaries and explore the career path for Full-Stack Developer
JavaScript Developer
A JavaScript Developer focuses on writing code for interactive web elements and applications. This course is beneficial because it delves into using the Svelte framework, which is written in JavaScript, specifically the newest version of Svelte 5. The hands-on projects in this course will give a JavaScript developer experience using modern JavaScript syntax and integrating third party services. A JavaScript developer will learn how to use Typescript in a Javascript project through the second and third project. Furthermore, because this course is project-based, a JavaScript developer will learn to enhance their existing skills, allowing them to tackle complex projects with increased ease and efficiency.
See salaries and explore the career path for JavaScript Developer
UI Developer
A UI Developer specializes in creating user interfaces that are visually appealing and user-friendly. This course is relevant because it centers on the Svelte framework, which is ideal for developing interactive and responsive UIs. Through the course’s projects, a UI developer can learn to build different components and work with reactive state management, essential for developing complex UIs. This course also allows a UI developer to skip styling videos and focus on JavaScript and Svelte functionality, making it ideal for getting straight to the work of building user interfaces. Furthermore, working on projects with various third party integrations will help a UI developer broaden their skill set.
See salaries and explore the career path for UI Developer
Software Engineer
A Software Engineer designs, develops, and maintains software systems, often working with various technologies and programming languages. This course may be useful because it teaches a new framework, Svelte 5, and its ecosystem, SvelteKit. The course involves projects that integrate with different services like Stripe, Supabase, and OpenAI, which could be useful for a software engineer who needs to connect various APIs. The full stack nature of the projects and use of Typescript may also be helpful. A software engineer will find this course a great way to learn and practice a modern web framework.
See salaries and explore the career path for Software Engineer
Web Designer
A Web Designer is focused on the aesthetics and usability of websites. This course may be useful as it emphasizes creating interactive and functional web applications using Svelte 5 and SvelteKit. While the focus is on the JavaScript and framework logic, this course provides a foundation for web designers to understand how their designs can be implemented into fully functional web applications. The project-based approach will help a web designer gain a new perspective on what is possible on the web. This course may also help a web designer to build their own portfolio.
See salaries and explore the career path for Web Designer
Application Developer
An Application Developer's role is to build software applications for a variety of platforms. This course may be helpful as it teaches Svelte and SvelteKit which are used for building web applications. Application developers will learn how to build interactive UIs and handle server-side logic using SvelteKit. The course also has practical projects that integrate various third-party services and APIs, such as Stripe, Supabase, and OpenAI. The focus on the latest syntax for Svelte may be useful for keeping up to date with the newest versions of the framework. This course would allow an application developer to augment their skill set with web development.
See salaries and explore the career path for Application Developer
Technology Consultant
A Technology Consultant provides expert guidance on technology to clients, often requiring a broad understanding of different systems and frameworks. This course may be useful as it introduces Svelte 5 and SvelteKit, a modern framework for web development. By completing this course, a technology consultant can expand their knowledge of the tech landscape and gain a deeper understanding of the capabilities of modern web technologies. The project based approach of the course will give a good understanding of the practical implications of using Svelte. Understanding payment integrations through Stripe may also be useful in certain consulting roles.
See salaries and explore the career path for Technology Consultant
Technical Project Manager
A Technical Project Manager oversees software projects, ensuring they are completed on time and within budget. This course may be useful as it provides exposure to the Svelte ecosystem, and the hands-on experience of building web applications and integrating third party services like Stripe, Supabase and OpenAI. Technical project managers may find the project-based nature of this course makes it easier to understand the challenges that a technical team faces. Because this course goes over Svelte 5 specifically, this course would be helpful in understanding how new versions of frameworks affect deadlines and technical debt.
See salaries and explore the career path for Technical Project Manager
Solutions Architect
A Solutions Architect designs and oversees the implementation of technology solutions, needing knowledge about various systems. This course may be useful as it provides an introduction to Svelte 5 and SvelteKit. A Solutions Architect will be able to understand how they can implement Svelte projects in their solutions. The use of third party integrations like Stripe, Supabase, and OpenAI also may be useful for a solutions architect. Because this course provides hands on experience, it offers a more practical understanding than reading academic papers. This course may also help a Solutions Architect better estimate the amount of effort needed for a Svelte project.
See salaries and explore the career path for Solutions Architect
Product Manager
A Product Manager defines the strategy and roadmap for a product, often working closely with engineering teams. This course may be useful as it will help a product manager gain familiarity with Svelte 5 and SvelteKit. This course's project-based approach could offer a product manager better insight into the development process. Furthermore, the course provides a good overview of the types of web applications that can be built using the Svelte framework. Though a product manager does not need to code, this course will allow a product manager to discuss technical limitations and feasibility with engineers, which may be helpful in team communication.
See salaries and explore the career path for Product Manager
Engineering Manager
An Engineering Manager leads and manages engineering teams, requiring both technical knowledge and managerial skills. This course may be useful because it provides hands-on experience with the Svelte 5 framework and its ecosystem, SvelteKit. An engineering manager may find the project based approach helpful for understanding how junior developers learn new technologies. The emphasis on the newest features of Svelte 5 may be helpful when estimating technical debt for projects. The wide range of projects would provide an engineering manager an idea of the scope and complexity of projects that use svelte.
See salaries and explore the career path for Engineering Manager
IT Support Specialist
An IT Support Specialist is responsible for providing technical assistance to end-users and maintaining computer systems. This course may be useful as it provides a basic understanding of how web technologies work. This course offers a practical approach to learning through hands-on projects using Svelte 5 and SvelteKit, potentially helping build technical knowledge for an IT Support Specialist. This course gives a broader view of the technologies used in web development and may be helpful to their work. Though an IT Support Specialist does not need to develop web applications, this course might help them understand the systems they support.
See salaries and explore the career path for IT Support Specialist
Technical Writer
A Technical Writer creates documentation for software and hardware products, needing a technical understanding of these products. This course may be useful, as it offers a practical and hands-on approach to learning Svelte 5 and SvelteKit. By completing this course, a Technical Writer can gain a better understanding of the technical aspects they may need to document. The course demonstrates how to build several different types of web applications using Svelte. Since Svelte is a web UI framework, it may be helpful for those writing about web-based products. This hands on experience can be useful to technical writers.
See salaries and explore the career path for Technical Writer

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps.
Cover image
Svelte and Sapper in Action
Save
Provides a comprehensive guide to building web applications with Svelte and Sapper. While it may not cover Svelte 5's latest features, it offers valuable insights into Svelte's component model, reactivity system, and server-side rendering capabilities. It useful resource for understanding the underlying concepts behind SvelteKit and building more complex applications. This book is more valuable as additional reading than it is as a current reference.
Svelte and Sapper in Action
Paperback
$$
Svelte and Sapper in Action
Kindle Edition
$$
Cover image
Effective Typescript
Save
Provides a comprehensive guide to writing high-quality TypeScript code. It offers valuable insights into TypeScript's type system, best practices, and advanced features. It useful resource for understanding the underlying concepts behind TypeScript and building more robust applications. This book is more valuable as additional reading than it is as a current reference.
Effective Typescript
Paperback
Check
Effective Typescript
Kindle Edition
Check

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
16 total hours
Via
Udemy
Instructor
Niklas Fischer
Language
English
Good to know
Covers Svelte 5, which compiles code to pure JavaScript, making web apps fast and efficient, which is highly desirable for JavaScript developers
Teaches Stripe integration, Sanity CMS, Supabase authentication, SendGrid emails, and OpenAI image recognition, which are all valuable skills for full-stack JavaScript developers
Includes project-based learning with real-world scenarios, which allows learners to apply their knowledge and build a portfolio, which is useful for JavaScript developers
Requires knowledge of JavaScript, which may exclude learners without prior experience, but allows the course to focus on advanced Svelte 5 and SvelteKit concepts
Emphasizes Svelte 5 syntax, which may require learners to adapt to new features and best practices, but ensures they are up-to-date with the latest framework version
Involves integration with third-party services like Stripe, Sanity, Supabase, SendGrid and OpenAI, which may require learners to create accounts and manage API keys
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser