Proyectos desarrollados con svelte

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    

CaféExpress - Tienda Online de Café (Kiosco) con Svelte, PHP y MySQL

CaféExpress es una tienda en línea desarrollada con Svelte y Bootstrap para la interfaz de usuario, mientras que el backend utiliza PHP y MySQL para la gestión de productos y pedidos.

Código    

CaféExpress es una tienda (Kiosco) en línea con Svelte y Supabase

CaféExpress es una tienda (Kiosco) en línea moderna y eficiente para la venta de café y productos relacionados, desarrollada con las tecnologías más avanzadas del mercado.

Código    

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    

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    

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    

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    

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    

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    

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    

Modo Claro y Oscuro 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    

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    

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    

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    

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    

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