Build & Deploy Real-World Apps
Learn Svelte 5 Rune Syntax, Build with Stripe, Supabase, OpenAI – Learn Svelte by building real world projects!
Lo que serás capaz de hacer
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. eBook Landing Page with Stripe Integration Create 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. Developer Portfolio with Sanity CMS Showcase 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. Authenticated CRUD App with Supabase and OpenAI Dive 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.
- 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
Temario
UNIDAD 1 - Course Intro · 4 leccionesUNIDAD 1 - Course Intro
UNIDAD 1 - Course Intro
- About this course
- How to go through this course
- All materials for this course
- Svelte 5 Release - What has changed for this course?
UNIDAD 2 - Svelte 5 Crash Course · 6 leccionesUNIDAD 2 - Svelte 5 Crash Course
UNIDAD 2 - 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
UNIDAD 3 - SvelteKit Crash Course · 4 leccionesUNIDAD 3 - SvelteKit Crash Course
UNIDAD 3 - 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
UNIDAD 4 - Project 1: Product Landing Page with Stripe Integration · 26 leccionesUNIDAD 4 - Project 1: Product Landing Page with Stripe Integration
UNIDAD 4 - Project 1: Product Landing Page with Stripe Integration
- PROJECT RESOURCES
- 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
- 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
UNIDAD 5 - Project 2: Developer portfolio with headless CMS · 33 leccionesUNIDAD 5 - Project 2: Developer portfolio with headless CMS
UNIDAD 5 - 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
UNIDAD 6 - Project 3: Personal book library with supabase authentication · 53 leccionesUNIDAD 6 - Project 3: Personal book library with supabase authentication
UNIDAD 6 - Project 3: Personal book library with supabase authentication
- PROJECT RESOURCES
- Project Overview
- Project Setup
- Hero Section
- Hero Section Styling
- Flexible Button Component
- Flexible Button Styling
- Header
- Header 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
- Fix logout
- Fetch books from supabase
- Fetch & Display username
- Side Navigation & Auth Layout
- Auth Layout Styling
- User Dashboard
- User Dashboard Styling
- Book Card Component
- Book Card Styling
- Star Rating Component
- Star Rating Styling
- Integrate Star Rating with Book Card and Database connection
- Book Category Component
- Book Category Styling
- Filter books for different book categories
- Individual Book Page
- Individual Book Styling
- Edit Mode on Book Page
- Edit Fields Styling
- Update books in database
- Upload book cover with supabase storage
- Droparea styling
- Delete book UI and delete from supabase db
- Scan Shelf Page with Dropzone
- Open AI Integration - Send picture to chat-gpt to get book array
- Scan Shelf Page - Book table and state integration
- Scan Shelf Page - Styling
- Add books to database through scan-shelf page
- Settings Page & Calculation of user statistics
- Settings Page Styling
- Edit account details on settings page
- Delete account and clean up of project and THANKS TO YOU!!!
- Project deployment
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
6 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Niklas Fischer.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 6 unidades · 126 lecciones · 30 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Niklas Fischer; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.


