Métricas

  • Tecnologías - HTML5, CSS3, Bootstrap 5, Vanilla JS (ES6+), Fetch API
Visitar el proyecto

Consumo de API REST y renderizado dinámico en JavaScript Vanilla

Resumen del Proyecto

Desarrollo frontend de una Single Page Application (SPA) responsiva que consume la API pública de Rick & Morty en tiempo real. El proyecto fue construido con JavaScript Vanilla y Bootstrap 5, priorizando el rendimiento en la manipulación del DOM, el diseño adaptativo y la retroalimentación visual del estado de los datos.

El Desafío

El objetivo principal consistía en implementar el consumo de un endpoint RESTful asíncrono minimizando los re-flujos (reflows) del navegador al renderizar múltiples tarjetas dinámicas. Además, se requería maquetar una interfaz limpia y responsiva que adaptara la densidad del contenido y el tamaño de las imágenes según el dispositivo, manejando de forma clara los estados de carga e incertidumbre de la API.

Solución Técnica e Implementación

  • Renderizado Optimizado del DOM: Uso de etiquetas <template> y DocumentFragment en JavaScript para clonar nodos e inyectar el lote completo de tarjetas en una sola operación, reduciendo drásticamente el impacto en el paint del navegador.

  • Flujo Asíncrono y Feedback Visual: Manejo de peticiones HTTP mediante async/await estructurado con bloques try...catch...finally para controlar un spinner de carga dinámico mientras se obtienen los datos.

  • Badges Condicionales con Posicionamiento Absoluto: Integración de componentes badge de Bootstrap con position-absolute para desplegar el estado del personaje (Alive, Dead o Unknown), evaluado dinámicamente mediante estructuras de control para asignar estilos de color contextuales (text-bg-success, text-bg-danger, text-bg-secondary).

  • Arquitectura de Selectores Escalable: Sustitución de IDs repetidos por clases CSS dentro del flujo de iteración (.forEach), evitando colisiones en el DOM y garantizando estándares HTML correctos.

Características Destacadas

  • Grid Responsiva Adaptativa: Sistema de columnas de Bootstrap 5 ajustado a diferentes breakpoints (col-md-6 col-lg-3) con reglas CSS personalizadas en la imagen (object-fit: cover) para mantener el encuadre óptimo en móviles y escritorio.

  • Componentes Modulares: Tarjetas estructuradas con separación de card-body y card-footer para organizar la jerarquía de información (especie, género y origen).

  • Cero Dependencias de Frameworks JS: Lógica construida 100% en JS Vanilla puro, demostrando dominio de las APIs nativas del navegador.

Resultados

  • Rendimiento Frontend: Interfaz fluida con inyección masiva de nodos sin degradación de velocidad gracias al uso de DocumentFragment.

  • Código Limpio y Mantenible: Separación clara entre la estructura HTML, las reglas responsivas CSS y la lógica de consumo de datos en JS.

  • Despliegue Continuo: Publicación y hosting automatizado a través de GitHub Pages.

Estrategia y Soberanía Tecnológica

Soy Fernando Groba, experto en diseño y desarrollo web enfocado en transformar la complejidad técnica en soluciones fluidas y escalables. Mi misión es asegurar que cada infraestructura sea un activo de autoridad con rendimiento de élite.

Ingeniería del Futuro:

Implemento metodologías como The 5-Day Sprint para garantizar precisión técnica y solidez estructural en cada entrega.

Rendimiento Garantizado:

Mi estándar es la perfección: aseguro tiempos de carga LCP < 2s y cumplimiento estricto de accesibilidad WCAG.

Soberanía Digital:

Utilizo WordPress Core, SCF y CPT para construir herramientas que dan el control total de la tecnología a tu empresa.

EXPERIENCIA DE ÉLITE

Soberanía Técnica y Resultados Medibles

Mi enfoque en el Diseño y Desarrollo Web no se detiene en la estética. Implemento una infraestructura basada en WordPress Core para garantizar soberanía digital total. Cada línea de código está optimizada para cumplir con el estándar LCP < 2s y la accesibilidad WCAG, asegurando que tu activo digital no solo sea rápido, sino inclusivo y escalable a largo plazo.

Agendar Consultoria

¿Listo para elevar tu infraestructura digital?

Inicia hoy un proceso de diseño y desarrollo web de élite con mi metodología The 5-Day Sprint. Transformo tu visión en una plataforma de alta fidelidad, con rendimiento LCP < 2s y soberanía tecnológica total.

Agendar Consultoria