Proyectos desarrollados con svelte

CRUD Fullstack con Svelte, Flask y MySQL
CRUD Fullstack con Svelte, Flask y MySQL CRUD Fullstack con Svelte, Flask y MySQL

A continuación, te mostraremos como desarrollar un CRUD completo (Crear, Leer, Actualizar y Eliminar) utilizando Svelte en el frontend, Flask en el backend y MySQL como base de datos.

👉 Código Aquí:   

Consumir API REST en Svelte
Consumir API REST en Svelte Consumir API REST en Svelte

En este proyecto, aprenderás a consumir una API REST utilizando el poderoso framework Svelte. Esta habilidad es fundamental para cualquier desarrollador web, ya que te permite acceder a una amplia variedad de datos y servicios en línea.

👉 Código Aquí:   

Consumir API REST en Svelte con Loading Request
Consumir API REST en Svelte con Loading Request Consumir API REST en Svelte con Loading Request

En este proyecto, aprenderás a consumir una API REST utilizando el poderoso framework Svelte. Esta habilidad es fundamental para cualquier desarrollador web, ya que te permite acceder a una amplia variedad de datos y servicios en línea. Además, integraremos el paquete loading-request para mejorar la experiencia de usuario al mostrar indicadores de carga durante las solicitudes de datos.

👉 Código Aquí:   

Consumir data desde archivo JSON con Svelte
Consumir data desde archivo JSON con Svelte Consumir data desde archivo JSON con Svelte

Este proyecto demuestra cómo consumir datos desde un archivo .json en Svelte 5. Es una habilidad esencial para cualquier desarrollador web, ya que te permite acceder a una amplia variedad de datos y servicios en línea.

👉 Código Aquí:   

Contador con Svelte
Contador con Svelte Contador con Svelte

Este componente de contador está desarrollado con Svelte 5 e integra Bootstrap 5 para un diseño moderno y elegante. Ofrece funcionalidades para incrementar, decrementar y restablecer el valor del contador, todo con una interfaz limpia y fácil de usar.

👉 Código Aquí:   

Cotizador de Préstamos Dinámico con Svelte 🚀
Cotizador de Préstamos Dinámico con Svelte 🚀 Cotizador de Préstamos Dinámico con Svelte 🚀

Un proyecto interactivo desarrollado con Svelte que permite a los usuarios simular cotizaciones de préstamos de manera dinámica, ajustando variables como monto, plazo y visualizando los pagos mensuales y el total a pagar.

👉 Código Aquí:   

Eliminar Registros Dinámicamente en una Tabla con Svelte
Eliminar Registros Dinámicamente en una Tabla con Svelte Eliminar Registros Dinámicamente en una Tabla con Svelte

Este proyecto es un ejemplo simple de cómo eliminar registros de una tabla utilizando el framework Svelte. La tabla muestra una lista de personas y permite eliminar un registro al hacer clic en el ícono de la papelera.

👉 Código Aquí:   

Función onMount() con Svelte
Función onMount() con Svelte Función onMount() con Svelte

La función onMount programa una devolución de llamada para que se ejecute inmediatamente después de que el componente esté disponible en el DOM. Es importante destacar que debe llamarse durante la inicialización del componente (aunque puede provenir de un módulo externo).

👉 Código Aquí:   

Light/Dark Toggle Button con Svelte
Light/Dark Toggle Button con Svelte Light/Dark Toggle Button con Svelte

Este proyecto muestra cómo implementar fácilmente un botón para alternar entre el modo claro y oscuro utilizando Svelte, proporcionando una experiencia visual dinámica y personalizada.

👉 Código Aquí:   

Procesar envíos de formularios HTML con Svelte
Procesar envíos de formularios HTML con Svelte Procesar envíos de formularios HTML con Svelte

Proyecto que muestra cómo crear un formulario en Svelte, capturar la entrada de los usuarios y procesar los datos al enviarlo. El ejemplo incluye la validación de los datos antes de enviarlos y muestra cómo usar notificaciones (toast) para informar al usuario sobre el éxito o error del proceso.

👉 Código Aquí:   

Recorrer un array en Svelte con each
Recorrer un array en Svelte con each Recorrer un array en Svelte con each

En Svelte, {#each} no es un método ni una función, sino una estructura de control declarativa que forma parte del lenguaje de plantillas de Svelte. Es similar a un bucle for en JavaScript, pero se utiliza dentro de los archivos .svelte para iterar sobre arrays y renderizar contenido dinámico en el DOM.

👉 Código Aquí:   

Seleccionar Múltiples Elementos en una Tabla con Checkboxes en Svelte
Seleccionar Múltiples Elementos en una Tabla con Checkboxes en Svelte Seleccionar Múltiples Elementos en una Tabla con Checkboxes en Svelte

Este proyecto es una aplicación sencilla de gestión de registros en una tabla, implementada con Svelte. Permite eliminar registros seleccionados de una lista, seleccionar todos los registros a la vez, y mostrar alertas emergentes para confirmar las operaciones.

👉 Código Aquí:   

TODO List Tasks con Svelte
TODO List Tasks con Svelte TODO List Tasks con Svelte

Este es un proyecto de una lista de tareas simple donde puedes agregar, editar y eliminar tareas. Utiliza Svelte como framework para crear una interfaz dinámica y reactiva.

👉 Código Aquí:   

Tienda Online con Svelte: Carrito de Compras en Tiempo Real
Tienda Online con Svelte: Carrito de Compras en Tiempo Real Tienda Online con Svelte: Carrito de Compras en Tiempo Real

Esta es una tienda en línea de café, donde los usuarios pueden agregar productos a su carrito, ver el subtotal de su pedido y enviarlo a través de WhatsApp. La aplicación está desarrollada con Svelte y utiliza Bootstrap para el diseño.

👉 Código Aquí: