Public API Gallery

Demo publicada: https://public-api-gallery.kevincarcache.com/

Public API Gallery es una demo MVP de exploracion de APIs publicas construida como una galeria interactiva de productos digitales. El proyecto reune diferentes integraciones con APIs reales en una experiencia coherente, navegable y visualmente consistente.

Mas que una coleccion de ejemplos aislados, el objetivo es presentar una plataforma donde cada API funciona como una pequena demo funcional, con su propia pagina, datos reales, estados de carga, manejo de errores e interacciones utiles para el usuario.

Problema

Muchas demos tecnicas de portafolio muestran integraciones de APIs de forma fragmentada: paginas sueltas, estilos inconsistentes, datos crudos o interfaces poco cuidadas.

El problema que aborda este proyecto es convertir esas integraciones en una experiencia con intencion de producto: una galeria organizada, clara y reutilizable, donde cada demo demuestre valor funcional y criterio tecnico.

Solucion

La solucion propuesta es una galeria web de APIs publicas en la que el usuario puede descubrir diferentes servicios, acceder a una demo dedicada para cada API y explorar datos reales mediante busquedas, filtros, paginacion, vistas de detalle o acciones interactivas.

El proyecto combina frontend moderno, arquitectura reutilizable y consumo seguro de APIs externas, manteniendo una interfaz unificada en todas las secciones.

Que permite hacer

El proyecto permite explorar una homepage con tarjetas de APIs publicas, navegar hacia demos individuales para cada integracion y consultar datos reales de servicios como PokéAPI, Rick and Morty API, TheMealDB y Open Library.

Cada demo incorpora interacciones utiles para el usuario:

• Busqueda.
• Filtros.
• Paginacion.
• Generacion aleatoria.
• Navegacion a detalle.
• Estados de carga, error y vacio.
• Experiencia responsive para distintos tamanos de pantalla.

Arquitectura

La aplicacion esta organizada en modulos claros:

• Catalogo central de APIs: fuente unica para renderizar la homepage y mantener alineadas las rutas.
• Paginas de demo por API: cada integracion tiene una vista dedicada y funcional.
• Componentes compartidos: tarjetas, estados de carga, errores, empty states, buscadores y layout.
• Rutas dinamicas: paginas de detalle para entidades como Pokémon, recetas, personajes o libros.
• Server routes de Nuxt: encapsulan logica de integracion, normalizacion o acceso a APIs externas cuando conviene proteger la experiencia.

Stack tecnico

• Nuxt 4
• Vue 3
• TypeScript
• Composition API
• Vuetify
• useFetch
• $fetch
• Nuxt server routes
• Integraciones con APIs publicas reales

Enfoque de ingenieria

El proyecto esta construido con un enfoque de claridad, consistencia y mantenibilidad.

Las decisiones tecnicas priorizan la separacion entre datos, vistas y componentes reutilizables; el uso de tipos explicitos para estructuras relevantes; integraciones con APIs reales; manejo defensivo de respuestas incompletas o inestables; y componentes compartidos para mantener una experiencia visual coherente.

La arquitectura es lo suficientemente flexible para crecer sin caer en abstracciones innecesarias. Cada demo puede evolucionar de forma independiente, mientras el catalogo y los componentes comunes mantienen la sensacion de producto unificado.

Valor del MVP

Como MVP, Public API Gallery demuestra como convertir multiples integraciones externas en un producto navegable, coherente y presentable.

Su valor no esta solo en consumir APIs, sino en mostrar criterio para organizar una aplicacion real, disenar una experiencia de usuario consistente, manejar datos externos con estados robustos y aplicar pensamiento de producto a una demo tecnica.

Posibles extensiones

El proyecto podria evolucionar con favoritos, comparador de APIs por categoria, modo oscuro, busqueda global, metricas basicas de uso por demo, tests end-to-end, mas APIs organizadas por categorias o un panel administrativo para gestionar el catalogo sin editar codigo.