Banner Dev Showcase

Premium Developer Portfolio

Engenharia
para explorar.

Um espaço onde eu guardo, testo e mostro o que venho estudando e aplicando como desenvolvedor fullstack. Cada demo é uma implementação funcional de verdade — autenticação, PWA, APIs do navegador, dados offline, 3D e mais — que você pode abrir, testar e conferir o código.

11 ao vivo

16 total de demos

5 em breve

Banner Dev Showcase

Role para explorar

SHOWCASES EM DESTAQUE

Por onde começar

Uma seleção das demos que melhor mostram como eu penso arquitetura, APIs do navegador e boas práticas.

PWA & Cache Inteligente

PWA & Cache Inteligente

Instalação nativa, cache multi-estratégia por tipo de recurso e detecção real de conectividade: os pilares que sustentam um bom PWA.

PWAService WorkerEstratégias de CacheSerwistInstalávelDisponível Offline

Autenticação

Autenticação

Demonstração interativa dos principais mecanismos de autenticação modernos: JWT com Refresh Token, OAuth2.0, autenticação de dois fatores (TOTP), login sem senha através de um Magic Link e biometria com WebAuthn/Passkeys.

JWTRefresh TokenOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthHttpOnly CookieCSRFSegurança

Visualizar demonstração

3D & Animações Avançadas

3D & Animações Avançadas

Demonstração interativa de renderização 3D em tempo real: uma cena orbitável com materiais PBR, um sistema solar completo com câmera que persegue o planeta focado, uma galáxia de 8.000 partículas com shader GLSL escrito do zero, e uma jornada guiada por scroll pela própria stack técnica do autor.

Three.jsReact-Three-FiberWEBGL3DShaderGLSLScrollAnimação

Visualizar demonstração

EXPLORAR TODAS AS DEMOS

Explorar Todas as Demos

Filtre por categoria e abra o que te interessar.

PWA & Cache Inteligente

Instalação nativa, cache multi-estratégia por tipo de recurso e detecção real de conectividade: os pilares que sustentam um bom PWA.

PWAService WorkerEstratégias de CacheSerwistInstalávelDisponível Offline

Experimente agora

Autenticação

Demonstração interativa dos principais mecanismos de autenticação modernos: JWT com Refresh Token, OAuth2.0, autenticação de dois fatores (TOTP), login sem senha através de um Magic Link e biometria com WebAuthn/Passkeys.

JWTRefresh TokenOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthHttpOnly CookieCSRFSegurança

Experimente agora

3D & Animações Avançadas

Demonstração interativa de renderização 3D em tempo real: uma cena orbitável com materiais PBR, um sistema solar completo com câmera que persegue o planeta focado, uma galáxia de 8.000 partículas com shader GLSL escrito do zero, e uma jornada guiada por scroll pela própria stack técnica do autor.

Three.jsReact-Three-FiberWEBGL3DShaderGLSLScrollAnimação

Experimente agora

API's de Câmera, Tela & Audio

Câmera, gravação de tela e gravação de áudio direto do navegador — captura, encoding e player customizado, sem plugins e sem upload.

CâmeraTelaAudioGravaçãoBlobNegociação de Codec

Experimente agora

API de Notificações

API de Notificações do tipo PUSH são nativas do sistema operacional, entregues mesmo com o app fechado — Service Worker + VAPID de ponta a ponta.

Push APINotifications APIService WorkerVAPIDWeb Push Protocol

Experimente agora

Interface de Voz

Ditado por voz em tempo real e leitura de texto em voz alta, direto no navegador — sem nenhuma API externa. Usamos as API's nativas do seu dispositivo.

Speech RecognitionText-to-SpeechSpeech SynthesisAcessibilidadeVoz

Acessibilidade / IA

Experimente agora

Dados Offline + Sincronização

Persistência de dados 100% offline com sincronização automática ao reconectar — incluindo SQL real rodando sobre WebAssembly dentro de um Web Worker.

OPFSIndexedDBwa-sqliteWebAssemblyWeb WorkersSincronizaçãoAPI de Armazenamento

Experimente agora

Integrações Nativas do Navegador

API de Compartilhamento WEB, API de Copiar/Colar Texto, API de Bloqueio de Tela e API de Tela Cheia: quatro APIs nativas do navegador que aproximam uma aplicação web da experiência de um app instalado, sem nenhuma dependência externa.

API de Compartilhamento WEBAPI de Copiar/Colar TextoAPI de Bloqueio de TelaAPI de Tela Cheia

Experimente agora

Sensores e Hardware do Dispositivo

Informações de Conectividade, Nível de Bateria e API de Vibração: três Web APIs que leem o estado real do dispositivo — conexão, bateria e feedback háptico — para adaptar a experiência em tempo real.

Informações de Conectividade APINível de Bateria APIAPI de Vibração

Experimente agora

Dashboards

Dashboard de observabilidade inspirado em ferramentas como Grafana, simulando em tempo real a saúde de uma aplicação distribuída através de métricas, eventos, gráficos interativos e cenários de incidentes.

ObservabilidadeDashboardGrafana/SignozDevOpsSREPerformanceShadcnReact Query

Experimente agora

Real-time & Comunicação

Chat em grupo por salas temporárias, com login próprio e mensagens chegando em tempo real.

RealtimeChatWebSocketServer-Sent EventsJavaSpring BootRedisJWT

Experimente agora

Arquitetura de Micro-frontends

Um diagrama vivo do Feature-Sliced Design deste projeto, mais uma demo de Module Federation mostrando dois micro-apps independentes lado a lado.

ArquiteturaMicro-frontendsModule FederationFeature-Sliced Design

React Query Mastery

Paginação server-side, scroll infinito, cache assincrono, refreshs otimizados, polling e SSR — os padrões avançados do TanStack Query.

React QueryTanStack QueryCacheSSRScroll InfinitoOtimização da Interface

Performance Showcase

Otimizações mensuráveis: virtualização de listas, code splitting, memoização e Web Workers, com métricas visuais.

PerformanceVirtualizaçãoCode SplittingWeb WorkersCore Web Vitals

Formulários & Campos

Formulários multi-etapas, arrasta e solta, upload avançado, editor de textos, máscaras de campos, campos personalizados, componentização.

FormulárioReact Hook FormZodArrastar e SoltarEditor de TextoMáscaras

GraphQL

Integração com API GraphQL pública demonstrando queries, mutations, fragments e cache normalizado.

GraphQLApollo ClientCache NormalizadoREST vs GraphQL