Datos reales, respuestas impredecibles
Consumir una API pública real y presentarla con claridad: cada búsqueda puede tardar, volver vacía o fallar, y la interfaz tiene que comunicar cada caso.
Volver a proyectos
N.º 005 · Web app
ORBIT
Consumo APIs reales con JavaScript modular y async/await, y diseño los estados de carga, vacío y error para que ninguna espera quede en blanco.
- Año
- 2026
- Tipo
- Web app · Consumo de API
- Rol
- Diseño y desarrollo front-end
- Stack
- HTML5 · Sass · JavaScript (módulos ES) · Axios
Reto, solución y resultado
Una capa de datos y módulos pequeños
Peticiones con Axios y async/await, módulos ES con una sola responsabilidad y un diseño editorial que deja el protagonismo a las imágenes.
Un explorador publicado y accesible
Muestra la foto astronómica del día, busca en el archivo de la NASA, filtra por tipo de objeto y abre cada imagen en alta resolución.
Lo destacado
Qué hace y cómo lo resuelve
Búsqueda en el archivo de la NASA
Búsqueda libre y filtros rápidos para galaxias, nebulosas, la Luna, la Tierra y misiones. Cada tarjeta se genera desde un template de HTML y abre un modal nativo con la imagen en alta resolución.
Estados claros
Esqueletos de carga, resultados vacíos y un error de conexión con botón para reintentar. Ninguna espera queda en blanco.
Pensado para todos
Enlace para saltar al contenido, foco visible con teclado, modal con <dialog> y soporte para movimiento reducido.
Una decisión técnica
Ninguna respuesta lenta pisa a una nueva
Si alguien busca «galaxias» y enseguida «nebulosas», la primera respuesta puede llegar después de la segunda y mostrar resultados equivocados.
Cada búsqueda recibe un número (requestId). Cuando llega la respuesta, solo se muestra si sigue siendo la más reciente; las demás se descartan.
let requestId = 0;
async function runSearch(query) {
const id = ++requestId;
showState('loading');
try {
const items = await searchImages(query);
// Llegó tarde: ya hay una búsqueda más reciente.
if (id !== requestId) return;
renderCards(items, openModal);
showState(items.length ? 'results' : 'empty');
} catch (error) {
if (id !== requestId) return;
showState('error');
}
}
Lo que muestra
Imágenes reales del archivo de la NASA
Imágenes: NASA, JPL y GSFC. ORBIT es un proyecto independiente, sin afiliación con la NASA.