Clima Bolivia — Pronóstico de 7 días
Aplicación web que muestra el pronóstico de los próximos siete días para las
nueve capitales departamentales de Bolivia.
Aplicación desplegada: https://clima-bolivia-theta.vercel.app/
Repositorio: https://github.com/MarlonTMF/Clima_Bolivia
Cómo ejecutar el proyecto
Requisitos: Node.js 20 o superior (desarrollado con la 24.14.0) y npm.
No hace falta ninguna clave de API ni archivo .env: la API elegida no pide
autenticación.
git clone https://github.com/MarlonTMF/Clima_Bolivia.git
cd Clima_Bolivia
npm install
npm run dev # http://localhost:5173
Todos los comandos
| Comando | Qué hace |
|---|
npm run dev | Servidor de desarrollo |
npm run build | Compila tipos y genera dist/ para producción |
npm run preview | Sirve el dist/ ya compilado |
npm run test | 19 pruebas con Vitest |
npm run typecheck | Comprobación de tipos |
npm run lint | oxlint |
npm run audit | Auditoría propia de fallos silenciosos (ver más abajo) |
npm run check | Los cinco anteriores en orden. Es el que se ejecuta antes de cada commit |
Una nota sobre typecheck: usa tsc -b --noEmit, no tsc --noEmit. El
tsconfig.json raíz es un archivo de referencias sin archivos propios, así
que tsc --noEmit devuelve éxito aunque haya errores de tipos. Se
descubrió introduciendo un error a propósito para comprobar que el hook de
verificación servía de algo, y no servía.
Tecnologías
| Pieza | Elección | Por qué |
|---|
| Framework | React 19 | Componentización y tipado, y es lo más reconocible para quien evalúa. Svelte habría sido más ligero; se eligió React por familiaridad, no por superioridad técnica |
| Lenguaje | TypeScript | Tipar la respuesta de la API convierte un error de mapeo en un fallo de compilación en vez de en una pantalla en blanco |
| Build | Vite | Un comando para arrancar y para compilar, sin configuración |
| Estilos | CSS plano | Sin framework: son unas 970 líneas que se pueden explicar una a una |
| Pruebas | Vitest + Testing Library | 19 pruebas: lógica, mapeo de la API, los cinco casos de error y los cuatro estados de la interfaz |
| Linter | oxlint | Viene con la plantilla de Vite |
| Despliegue | Vercel (plan gratuito) | Sitio estático servido desde CDN |
Dependencias de producción: dos
"dependencies": { "react": "^19.2.8", "react-dom": "^19.2.8" }
Eso es todo. Sin router, sin gestor de estado, sin cliente HTTP, sin
librería de CSS, sin librería de iconos, sin librería de fechas. Para una
sola pantalla, cada dependencia sería una decisión más que defender y una
superficie más que explicar:
- Sin router, porque no hay rutas: una vista con cuatro estados.
- Sin gestor de estado, porque el estado son cuatro
useState en el
componente raíz.
- Sin cliente HTTP:
fetch nativo cubre el caso, incluido el timeout con
AbortController.
- Sin librería de iconos: los iconos meteorológicos son SVG escritos a
mano, unas pocas líneas cada uno. Empezaron siendo emoji y se retiraron
porque se renderizan distinto en cada sistema operativo.
- Sin librería de fechas: el formato lo resuelve
Intl.DateTimeFormat,
que está en el navegador.
Las dependencias de desarrollo sí existen —Vitest, Testing Library,
jsdom, TypeScript— y no contradicen lo anterior: no entran en el paquete
final ni llegan al usuario.
El resultado compilado son 99 KB comprimidos, de los que unos 68 KB son
React. Ese peso es la contrapartida asumida de la decisión.
La API: Open-Meteo, y por qué
Se compararon cuatro opciones contra su documentación oficial antes de
elegir, no después.
| API | 7 días diarios en plan gratuito | Clave | Peticiones para 9 ciudades | Veredicto |
|---|
| Open-Meteo | Sí | No requiere | 1 | Elegida |
| OpenWeather | Vía One Call, modelo de pago por uso con 1 000 llamadas diarias gratis | Sí | 9 | Descartada |
| WeatherAPI.com | No: sólo 3 días | Sí | 9 | Descartada por no cumplir el requisito |
| Meteosource | Sí | Sí | 9 | Descartada: 9 llamadas por carga sobre un límite de 400 diarias |
Las tres razones de la elección:
- Cobertura del requisito. WeatherAPI ofrece tres días en su plan
gratuito y el desafío pide siete. Queda fuera por no cumplir, no por
preferencia.
- Una petición en lugar de nueve. Open-Meteo acepta varias coordenadas
en la misma llamada. Es la decisión de rendimiento más grande del
proyecto y sale gratis.
- Superficie operativa cero. Sin clave, sin cuenta que mantener, sin
secreto que rotar y sin backend necesario para ocultarlo.
La limitación real, dicha por delante: el uso gratuito de Open-Meteo es
no comercial, bajo licencia CC-BY 4.0. Si este proyecto pasara a uso
comercial habría que pagar su plan o reevaluar OpenWeather — que además
exigiría un backend propio para no exponer la clave en el navegador.
Ventajas y limitaciones
Ventajas
- Carga completa en 1,5–1,9 s hasta ver datos en pantalla, medido sobre
el despliegue real: mediana de cinco cargas, 1 896 ms en Chromium y
1 463 ms en Firefox. First Contentful Paint de 1,4–1,7 s.
- Lighthouse 99-100 en rendimiento, 100 en accesibilidad, 100 en prácticas
recomendadas y 100 en SEO, medido en producción.
- Cumulative Layout Shift de 0: la página no da ningún salto al llegar
los datos, porque el estado de carga reserva el espacio exacto que
ocupará el contenido.
- Funciona sin conexión a la API si ya se había cargado antes: muestra la
última lectura guardada avisando de su antigüedad.
- Cambiar de proveedor de clima costaría tocar un archivo, porque la
respuesta cruda nunca sale de
weatherApi.ts.
- Añadir ciudades es una línea en
src/data/cities.ts.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
