Volver a clases
Frontend Development●●Intermedio
Proyecto Integrador - Dashboard de Clima
120 min
0 vistas
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
Brief del proyecto
Proyecto
Construir un dashboard de clima con búsqueda, favoritos, y detalles de temperatura.
Taller Práctico
TallerIntermedio15 min
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.