• No hay productos en el carrito.

Inicio / Cursos / Build & Deploy Real-World Apps
Impartido por Niklas FischerPago único de $2,800 MXN · acceso por 12 meses

Build & Deploy Real-World Apps

Learn Svelte 5 Rune Syntax, Build with Stripe, Supabase, OpenAI – Learn Svelte by building real world projects!

Certificado oficial emitido por la SEPA través del Gobierno del Estado de México
12 meses de acceso En línea · 30 h 6 unidades
Qué aprenderás

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 lecciones

UNIDAD 1 - Course Intro

  • About this courseVideo · 3 min
  • How to go through this courseVideo · 5 min
  • All materials for this courseLectura · 0 min
  • Svelte 5 Release - What has changed for this course?Video · 3 min
UNIDAD 2 - Svelte 5 Crash Course · 6 lecciones

UNIDAD 2 - Svelte 5 Crash Course

  • Structure of a Svelte FileVideo · 9 min
  • Reactivity in Svelte - state & derived runeVideo · 8 min
  • Using reactive state in inputs and effect runeVideo · 6 min
  • Debugging in Svelte - Inspect runeVideo · 1 min
  • Passing props around Svelte componentsVideo · 6 min
  • Snippets, templating language and more advanced reactive stateVideo · 10 min
UNIDAD 3 - SvelteKit Crash Course · 4 lecciones

UNIDAD 3 - SvelteKit Crash Course

  • SvelteKit Structure & RoutingVideo · 9 min
  • Fetching Data server-side with page.server.ts fileVideo · 10 min
  • Fetching data server & client side with load functionVideo · 6 min
  • Building API endpoints in SvelteKitVideo · 5 min
UNIDAD 4 - Project 1: Product Landing Page with Stripe Integration · 26 lecciones

UNIDAD 4 - Project 1: Product Landing Page with Stripe Integration

  • PROJECT RESOURCESLectura · 0 min
  • Project Overview: Landing Page for Digital Product with Payment integrationVideo · 4 min
  • Optional: In case you do not want to write any cssVideo · 2 min
  • Getting started - initial project setup (svelte & css reset)Video · 13 min
  • Hero Section - HTML StructureVideo · 12 min
  • Hero Section - StylingVideo · 7 min
  • Creating a reusable button - HTMLVideo · 6 min
  • Button - StylingVideo · 3 min
  • Chapter Preview SectionVideo · 7 min
  • Chapter Preview - StylingVideo · 7 min
  • Chapter Preview - Svelte Templating language - Usage of #each keywordVideo · 5 min
  • Chapter Preview - Render content dynamically on user inputVideo · 6 min
  • Chapter Preview - Derive state to simplify code structureVideo · 4 min
  • About the author section - HTML structureVideo · 3 min
  • About the author section - StylingVideo · 3 min
  • FAQ Section - HTML structureVideo · 9 min
  • FAQ Section - StylingVideo · 13 min
  • FAQ Section - FunctionalityVideo · 13 min
  • Stripe Account SetupVideo · 6 min
  • Payment integration with stripe conceptually explainedVideo · 9 min
  • Stripe integration codeVideo · 18 min
  • Success & Failure pages after paymentVideo · 6 min
  • Sendgrid account registration & API key creationVideo · 5 min
  • Deployment to vercel & setup of stripe webhookVideo · 10 min
  • Send out email with digital product on payment webhook from stripeVideo · 8 min
  • Optional: How to secure your stripe webhookLectura · 0 min
UNIDAD 5 - Project 2: Developer portfolio with headless CMS · 33 lecciones

UNIDAD 5 - Project 2: Developer portfolio with headless CMS

  • PROJECT RESOURCESLectura · 0 min
  • Project overview & app infrastructureVideo · 4 min
  • Project setupVideo · 5 min
  • Hero SectionVideo · 5 min
  • Flexible Button ComponentVideo · 10 min
  • Flexible Button StylingVideo · 1 min
  • Section Headline ComponentVideo · 7 min
  • About Me SectionVideo · 4 min
  • About Me Section StylingVideo · 1 min
  • Work Experience TableVideo · 7 min
  • Work Experience Table StylingVideo · 3 min
  • Sanity SetupVideo · 15 min
  • Fetch data from Sanity in SvelteKit frontendVideo · 15 min
  • Display sanity data on frontendVideo · 9 min
  • My Work Section - Sanity data schema & adding dataVideo · 14 min
  • Set up types for processed and raw data of sanityVideo · 14 min
  • Process data from raw to usable on the frontendVideo · 11 min
  • My Work Section - HTML structureVideo · 14 min
  • My Work Section - StylingVideo · 5 min
  • Dynamic routing & loading of blog articleVideo · 6 min
  • Render blog article on frontendVideo · 10 min
  • Blog article stylingVideo · 2 min
  • Create skills & add skill iconsVideo · 6 min
  • Skills sectionVideo · 8 min
  • Skills section - stylingVideo · 2 min
  • Contact SectionVideo · 6 min
  • Contact Section StylingVideo · 8 min
  • Frontend Validation of Contact Me formVideo · 12 min
  • Handling of contact me section in backend endpointVideo · 18 min
  • HeaderVideo · 3 min
  • Header StylingVideo · 2 min
  • Footer Structure & StylingVideo · 3 min
  • Project deployment to vercelVideo · 3 min
UNIDAD 6 - Project 3: Personal book library with supabase authentication · 53 lecciones

UNIDAD 6 - Project 3: Personal book library with supabase authentication

  • PROJECT RESOURCESLectura · 0 min
  • Project OverviewVideo · 2 min
  • Project SetupVideo · 4 min
  • Hero SectionVideo · 5 min
  • Hero Section StylingVideo · 1 min
  • Flexible Button ComponentVideo · 9 min
  • Flexible Button StylingVideo · 2 min
  • HeaderVideo · 5 min
  • Header StylingVideo · 1 min
  • Auth Form for Register & Login PageVideo · 11 min
  • Auth Form StylingVideo · 4 min
  • Form Actions in SvelteKit for Registration & LoginVideo · 17 min
  • Supabase SetupVideo · 5 min
  • Supabase Signup with Email and PasswordVideo · 6 min
  • Overview Svelte & Supabase Auth FlowVideo · 5 min
  • Auth implementation server sideVideo · 13 min
  • Login form actionVideo · 9 min
  • Set up context to keep track of user stateVideo · 17 min
  • Social Login with GoogleVideo · 16 min
  • Database setup and addition of username on registrationVideo · 13 min
  • Fix logoutVideo · 4 min
  • Fetch books from supabaseVideo · 19 min
  • Fetch & Display usernameVideo · 6 min
  • Side Navigation & Auth LayoutVideo · 9 min
  • Auth Layout StylingVideo · 3 min
  • User DashboardVideo · 4 min
  • User Dashboard StylingVideo · 2 min
  • Book Card ComponentVideo · 12 min
  • Book Card StylingVideo · 6 min
  • Star Rating ComponentVideo · 10 min
  • Star Rating StylingVideo · 1 min
  • Integrate Star Rating with Book Card and Database connectionVideo · 4 min
  • Book Category ComponentVideo · 5 min
  • Book Category StylingVideo · 2 min
  • Filter books for different book categoriesVideo · 20 min
  • Individual Book PageVideo · 20 min
  • Individual Book StylingVideo · 2 min
  • Edit Mode on Book PageVideo · 11 min
  • Edit Fields StylingVideo · 3 min
  • Update books in databaseVideo · 22 min
  • Upload book cover with supabase storageVideo · 17 min
  • Droparea stylingVideo · 3 min
  • Delete book UI and delete from supabase dbVideo · 4 min
  • Scan Shelf Page with DropzoneVideo · 13 min
  • Open AI Integration - Send picture to chat-gpt to get book arrayVideo · 15 min
  • Scan Shelf Page - Book table and state integrationVideo · 13 min
  • Scan Shelf Page - StylingVideo · 7 min
  • Add books to database through scan-shelf pageVideo · 14 min
  • Settings Page & Calculation of user statisticsVideo · 17 min
  • Settings Page StylingVideo · 2 min
  • Edit account details on settings pageVideo · 17 min
  • Delete account and clean up of project and THANKS TO YOU!!!Video · 15 min
  • Project deploymentVideo · 6 min
Certificado oficial

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
Cómo funciona

Tu itinerario, de la inscripción al certificado

  1. 1

    Inscripción con pago único

    Pagas $2,800 MXN una sola vez y entras de inmediato al curso.

  2. 2

    Estudias a tu ritmo

    6 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.

  3. 3

    Cuestionarios por unidad

    Cuestionarios para comprobar lo aprendido.

  4. 4

    Certificado

    Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.

Lo que obtienes

Un certificado oficial de la SEP

Muestra del certificado: Build & Deploy Real-World Apps

Muestra · verificable por folio y QR

  • 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.
Medios que necesitas
Equipo de cómputo Conexión estable a internet
Pago único

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
Pago único
$2,800MXN
Acceso por 12 meses
Inscribirme Hablar con un asesor
Preguntas frecuentes

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.

Certificado emitido por la SEP a través del Gobierno del Estado de México · Build & Deploy Real-World Apps

Inscribirme
  INEC es una Marca de SalesPartners Ciudad de México S de RL de CV. Template Design © Learnify LMS. All rights reserved. Terminos y Condiciones Aviso de Privacidad Politica de Devolución
Hide picture