Banner Dev Showcase

Portfolio Premium de Desarrollador

Ingeniería
para explorar.

Un espacio donde guardo, pruebo y muestro lo que he estado estudiando y aplicando como desarrollador fullstack. Cada demo es una implementación funcional de verdad — autenticación, PWA, APIs del navegador, datos offline, 3D y más — que puedes abrir, probar y revisar su código.

11 en vivo

16 total de demos

5 próximamente

Banner Dev Showcase

Desplázate para explorar

SHOWCASES DESTACADOS

Por dónde empezar

Una selección de las demos que mejor muestran cómo pienso la arquitectura, las APIs del navegador y las buenas prácticas.

PWA y Caché Inteligente

PWA y Caché Inteligente

Instalación nativa, caché multi-estrategia por tipo de recurso y detección real de conectividad: los pilares que sostienen un buen PWA.

PWAService WorkerEstrategias de CachéSerwistInstalableDisponible Offline

Autenticación

Autenticación

Demostración interactiva de los principales mecanismos de autenticación modernos: JWT con Refresh Token, OAuth 2.0, autenticación de dos factores (TOTP), inicio de sesión sin contraseña mediante un Magic Link y biometría con WebAuthn/Passkeys.

JWTRefresh TokenOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthHttpOnly CookieCSRFSeguridad

Ver demostración

3D y Animaciones Avanzadas

3D y Animaciones Avanzadas

Demostración interactiva de renderizado 3D en tiempo real: una escena orbitable con materiales PBR, un sistema solar completo con una cámara que persigue al planeta enfocado, una galaxia de 8.000 partículas con un shader GLSL escrito desde cero, y un recorrido guiado por scroll a través del propio stack técnico del autor.

Three.jsReact-Three-FiberWEBGL3DShaderGLSLScrollAnimación

Ver demostración

EXPLORAR TODAS LAS DEMOS

Explorar Todas las Demos

Filtra por categoría y abre lo que te interese.

PWA y Caché Inteligente

Instalación nativa, caché multi-estrategia por tipo de recurso y detección real de conectividad: los pilares que sostienen un buen PWA.

PWAService WorkerEstrategias de CachéSerwistInstalableDisponible Offline

Pruébala ahora

Autenticación

Demostración interactiva de los principales mecanismos de autenticación modernos: JWT con Refresh Token, OAuth 2.0, autenticación de dos factores (TOTP), inicio de sesión sin contraseña mediante un Magic Link y biometría con WebAuthn/Passkeys.

JWTRefresh TokenOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthHttpOnly CookieCSRFSeguridad

Pruébala ahora

3D y Animaciones Avanzadas

Demostración interactiva de renderizado 3D en tiempo real: una escena orbitable con materiales PBR, un sistema solar completo con una cámara que persigue al planeta enfocado, una galaxia de 8.000 partículas con un shader GLSL escrito desde cero, y un recorrido guiado por scroll a través del propio stack técnico del autor.

Three.jsReact-Three-FiberWEBGL3DShaderGLSLScrollAnimación

Pruébala ahora

APIs de Cámara, Pantalla y Audio

Cámara, grabación de pantalla y grabación de audio directo desde el navegador — captura, codificación y un reproductor propio, sin plugins y sin subir nada a un servidor.

CámaraPantallaAudioGrabaciónBlobNegociación de Códec

Pruébala ahora

API de Notificaciones

La API de Notificaciones de tipo PUSH es nativa del sistema operativo, entregada incluso con la app cerrada — Service Worker + VAPID de principio a fin.

Push APINotifications APIService WorkerVAPIDWeb Push Protocol

Pruébala ahora

Interfaz de Voz

Dictado por voz en tiempo real y lectura de texto en voz alta, directo desde el navegador — sin ninguna API externa. Usamos las APIs nativas de tu dispositivo.

Speech RecognitionText-to-SpeechSpeech SynthesisAccesibilidadVoz

Accesibilidad / IA

Pruébala ahora

Datos Offline + Sincronización

Persistencia de datos 100% offline con sincronización automática al reconectar — incluyendo SQL real ejecutándose sobre WebAssembly dentro de un Web Worker.

OPFSIndexedDBwa-sqliteWebAssemblyWeb WorkersSincronizaciónAPI de Almacenamiento

Pruébala ahora

Integraciones Nativas del Navegador

API de Compartir en la Web, API de Copiar/Pegar Texto, API de Bloqueo de Pantalla y API de Pantalla Completa: cuatro APIs nativas del navegador que acercan una aplicación web a la experiencia de una app instalada, sin ninguna dependencia externa.

API de Compartir en la WebAPI de Copiar/Pegar TextoAPI de Bloqueo de PantallaAPI de Pantalla Completa

Pruébala ahora

Sensores y Hardware del Dispositivo

Información de Conectividad, Nivel de Batería y API de Vibración: tres Web APIs que leen el estado real del dispositivo — conexión, batería y feedback háptico — para adaptar la experiencia en tiempo real.

API de Información de ConectividadAPI de Nivel de BateríaAPI de Vibración

Pruébala ahora

Dashboards

Dashboard de observabilidad inspirado en herramientas como Grafana, que simula en tiempo real la salud de una aplicación distribuida a través de métricas, eventos, gráficos interactivos y escenarios de incidentes.

ObservabilidadMonitoringDashboardGrafana/SignozDevOpsSREPerformanceShadcnRechartsReact Query

Pruébala ahora

Real-time & Comunicación

Chat grupal en salas temporales, con login propio y mensajes que llegan en tiempo real.

RealtimeChatWebSocketServer-Sent EventsJavaSpring BootRedisJWT

Pruébala ahora

Arquitectura de Micro-frontends

Un diagrama vivo del Feature-Sliced Design de este proyecto, más una demo de Module Federation con dos micro-apps independientes conviviendo.

ArquitecturaMicro-frontendsModule FederationFeature-Sliced Design

React Query Mastery

Paginación server-side, scroll infinito, caché asíncrono, refrescos optimizados, polling y SSR — los patrones avanzados de TanStack Query.

React QueryTanStack QueryCacheSSRScroll InfinitoOptimización de la Interfaz

Performance Showcase

Optimizaciones medibles: virtualización de listas, code splitting, memoización y Web Workers, con métricas visuales.

PerformanceVirtualizaciónCode SplittingWeb WorkersCore Web Vitals

Formularios y Campos

Formularios multi-paso, arrastrar y soltar, subida avanzada de archivos, editor de textos, máscaras de campos, campos personalizados, componentización.

FormularioReact Hook FormZodArrastrar y SoltarEditor de TextoMáscaras

GraphQL

Integración con una API GraphQL pública que demuestra queries, mutations, fragments y caché normalizado.

GraphQLApollo ClientCaché NormalizadoREST vs GraphQL