Paises Svelte - Countries Explorer

Una aplicación web interactiva desarrollada en Svelte 3 que permite explorar información sobre todos los países del mundo. Búsqueda en tiempo real, filtro por región y diseño Material con acento naranja.

🌐 Producción: https://svelte-paises.vercel.app

Características

• Búsqueda en tiempo real — por nombre común, nombre oficial o capital
• Filtro por región — África, América, Asia, Europa, Oceanía
• Grid de tarjetas — bandera, nombre, badges de datos clave
• SMUI (Svelte Material UI) — TextField, Select, Button y Card con tema naranja
• Carga animada — CircularProgress mientras llega la API
• Diseño responsive — compatible con móviles y escritorio

Tecnologías

Capa	Tecnología
UI Framework	Svelte 3.55
Componentes UI	Svelte Material UI 6.1
Bundler	Rollup 3 + svelte-preprocess + sass
Servidor estático	sirv-cli
API	REST Countries (custom service)

Instalación

npm install

Scripts

npm run dev      # desarrollo con live reload
npm run build    # build de producción → public/build/
npm start        # sirve public/ en http://localhost:8080

Estructura del proyecto

paises-svelte/
├── public/
│   ├── build/           # bundle.js + bundle.css (generados)
│   ├── assets/img/      # logo.png
│   ├── global.css       # variables MDC / tema naranja
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Header.svelte
│   │   └── Footer.svelte
│   ├── App.svelte        # lógica principal + grid de países
│   └── main.js
├── rollup.config.js
├── eslint.config.js
├── vercel.json
└── package.json

API

https://countries-api-service.vercel.app/api/countries

Autor

Carlos Mur — @cmurestudillos