Banner Dev Showcase

Premium Developer Portfolio

Engenharia
para explorar.

Um showcase técnico onde cada implementação demonstra uma competência real de engenharia de software. Arquitetura, performance, segurança, PWAs, Browser APIs, renderização 3D e muito mais, reunidos em experiências interativas.

9 ao vivo

16 total de demos

7 em breve

Conheça o Autor

Banner Dev Showcase

Role para explorar

SHOWCASES EM DESTAQUE

Nossos Showcases

Uma seleção de demos que exploram APIs, arquitetura 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 para encontrar o que lhe interessa

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

Dashboards são o coração de um bom CRM, SaaS ou aplicações de gestão. Nessa demo você encontra diversos tipos de visualizações para diferentes personas da sua empresa.

CRMSaaSDashboardPerformanceRechartsD3.jsReact QueryTanStack TableFramer Motion

Real-time & Comunicação

Chat em tempo real, feed de eventos ao vivo e notificações in-app via WebSocket e Server-Sent Events.

RealtimeChatNotificaçõesWebSocketServer-Sent EventsAblyPusher

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