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 Install & Cache Engine

PWA Install & Cache Engine

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

PWAService WorkerCache StrategiesSerwistinstallableoffline-first

Autenticação

Autenticação

Demonstração interativa dos principais mecanismos de autenticação modernos: JWT, Refresh Token, OAuth, autenticação de dois fatores com TOTP, login sem senha por Magic Link e biometria com WebAuthn/Passkeys.

JWTOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthRefresh TokenHttpOnly 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-fiberwebgl3dparticulasshaderglslscroll-animationanimação

Visualizar demonstração

EXPLORAR TODAS AS DEMOS

Explorar Todas as Demos

Filtre por categoria para encontrar o que lhe interessa

PWA Install & Cache Engine

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

PWAService WorkerCache StrategiesSerwistinstallableoffline-first

Experimente agora

Autenticação

Demonstração interativa dos principais mecanismos de autenticação modernos: JWT, Refresh Token, OAuth, autenticação de dois fatores com TOTP, login sem senha por Magic Link e biometria com WebAuthn/Passkeys.

JWTOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthRefresh TokenHttpOnly 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-fiberwebgl3dparticulasshaderglslscroll-animationanimação

Experimente agora

Media Capture Studio

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

getUserMediagetDisplayMediaMediaRecorderCamera APIScreen RecordingGravação de ÁudioBlobNegociação de Codec

Experimente agora

Web Push Notifications

Notificações push 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

Voice Interface

Ditado por voz em tempo real e leitura de texto em voz alta, direto no navegador — sem nenhuma API externa de IA.

Speech RecognitionText-to-SpeechSpeech SynthesisAcessibilidadeVoz

Acessibilidade / IA

Experimente agora

Offline Data Layer

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 WorkersBackground SyncStorage API

Experimente agora

Integrações Nativas do Navegador

Web Share, Clipboard, Screen Wake Lock e Fullscreen: quatro APIs nativas do navegador que aproximam uma aplicação web da experiência de um app instalado, sem nenhuma dependência externa.

Web Share APIClipboard APIScreen Wake LockFullscreen API

Experimente agora

Sensores e Hardware do Dispositivo

Network Information, Battery Status e Vibration API: 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.

Network Information APIBattery Status APIVibration API

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