Construir un dashboard con API externa, debounce y almacenamiento local.
Alcance del proyecto
- Búsqueda de ciudades con debounce y resultados persistentes.
- Consumo de API externa con manejo de loading y error.
- Lista de favoritos con localStorage.
Arquitectura recomendada
hooks/parauseWeather,useDebounce,useLocalStorage.components/para UI reutilizable (SearchBar, WeatherCard, Loader).
Flujo de datos
- El usuario escribe una ciudad, se debouncea y se consulta la API.
- Se renderiza la tarjeta con datos y se guarda en favoritos.
Ejemplos de Código
3 ejemplos
Hook de API externa
javascript
1import { useEffect, useState } from "react";
2
3export function useWeather(ciudad) {
4 const [data, setData] = useState(null);
5 const [loading, setLoading] = useState(false);
6 const [error, setError] = useState(null);
7
8 useEffect(() => {
9 if (!ciudad) return;
10
11 const controller = new AbortController();
12
13 const cargar = async () => {
14 try {
15 setLoading(true);
16 setError(null);
17 const res = await fetch(
18 `https://api.openweathermap.org/data/2.5/weather?q=${ciudad}&appid=API_KEY&units=metric&lang=es`,
19 { signal: controller.signal }
20 );
21 if (!res.ok) throw new Error("Ciudad no encontrada");
22 setData(await res.json());
23 } catch (err) {
24 if (err.name !== "AbortError") setError(err.message);
25 } finally {
26 setLoading(false);
27 }
28 };
29
30 cargar();
31 return () => controller.abort();
32 }, [ciudad]);
33
34 return { data, loading, error };
35}Input controlado
javascript
1import { useState } from "react";
2
3export function SearchBar({ onSearch }) {
4 const [input, setInput] = useState("");
5
6 const submit = (e) => {
7 e.preventDefault();
8 if (input.trim()) onSearch(input.trim());
9 };
10
11 return (
12 <form onSubmit={submit}>
13 <input
14 value={input}
15 onChange={(e) => setInput(e.target.value)}
16 placeholder="Buscar ciudad"
17 />
18 <button type="submit">Buscar</button>
19 </form>
20 );
21}Loading y error
javascript
1function EstadoUI({ loading, error }) {
2 if (loading) return <p>Cargando...</p>;
3 if (error) return <p>Error: {error}</p>;
4 return null;
5}Recursos
3 recursos disponibles
Taller Práctico
TallerIntermedio15 min🟡 IA con bitácora
Brief del proyecto
Proyecto
Construir un dashboard de clima con búsqueda, favoritos, y detalles de temperatura.
Taller Práctico
TallerIntermedio15 min🟡 IA con bitácora
Checklist de funcionalidades
Recurso
(1) Debounce, (2) API externa, (3) persistencia, (4) estados de carga, (5) responsive.
Documentación Oficial
DocumentaciónPrincipiante15 min
OpenWeather API
Documentación oficial para consultar clima.