Desenho interfaces e construo produtos para a web.

Sou André Duarte, desenvolvedor front-end desde 2009. Desenho fluxos, escrevo código e acompanho o produto em uso.

Front-end developer na Trade Arena

Explorando IA no desenvolvimento

Desde o verão de 2025

LEAGUE / CASE PRINCIPALDA IDEIA À EXPERIÊNCIA

Trocar de aba.
Manter os dados.

Vamos manter os dados ao trocar de aba e separar o estado de cada liga.

Prompts reconstituídos, código anonimizado e dados de exemplo.

ANTES DO CÓDIGO

Um plano para construir.

  1. Definir quais imports o domínio oferece e separar HTTP, contexto e estado.
  2. Manter os recursos no shell, compartilhados entre abas e separados por liga.
  3. Coordenar consultas com RxJS e derivar a apresentação com Signals.
  4. Carregar as abas sob demanda e testar exports, estado e regras de acesso.
Da intenção aos próximos passos.

01 / Contexto

FigmaFeed, Ranking e Equipes
Git / GitHubcódigo, branches e PRs
specs/padrões, referências e decisões

02 / André + Codex

MCPconecta as ferramentas
Codexcontexto → plano → código

03 / Construção

  • Angularcomponentes · OnPush
  • TypeScriptcontratos tipados
  • Routerrotas lazy e guards
  • RxJSrecursos assíncronos
  • SCSSlayout responsivo
  • Signalssignal · toSignal

04 / Interface

A League em uso.Feed, Ranking e Equipes

Acesso, estados e responsividade
Testes e comparação visual

Eu defino o escopo, reviso o código e confiro o resultado.

Da consulta HTTP
ao estado da tela.

Separei as responsabilidades para mudar uma parte sem espalhar a mudança pelas abas.

DENTRO DA LEAGUESelecione uma camada

Transporte e contexto alimentam os recursos. Os recursos alimentam a apresentação com Signals, consumida pelas sete abas.

Trocar de aba preserva os dados.

Mantive o estado no shell, o componente que contém as abas. Trocar de aba preserva esse estado; destruir o shell encerra o fluxo ativo.

Imports de outras áreas

API: um serviço exportado.
Rotas: árvores de navegação do domínio.

O teste verifica os exports
e acusa mudanças nesse contrato.
DOIS PONTOS DE ENTRADA · API E ROTAS
expect(Object.keys(publicApi)).toEqual(['LearningClient']);
expect(Object.keys(routeApi).sort())
  .toEqual(['CATALOG_ROUTES', 'MANAGEMENT_ROUTES', 'USER_ROUTES']);
example / stateTypeScript

resource.example.tsRECURSO COMPARTILHADO

const state$ = scopeId$.pipe(
// Trocar de liga encerra a assinatura anterior.
switchMap(id => reload$.pipe(
startWith(null),
switchMap(() => fetchView(id).pipe(
startWith(loadingState())
)),
preserveData()
)),
// Destruir o shell encerra o fluxo ativo.
takeUntilDestroyed(owner),
// Compartilha a última emissão entre as abas.
shareReplay({ bufferSize: 1, refCount: false })
);

presentation.example.tsNO TEMPLATE

// O template lê Signals; RxJS cuida dos dados.
const state = toSignal(resource.state$, { initialValue });
const items = computed(() => state().data ?? []);
RxJS → dadosSignals → apresentação

O estado acompanha o ciclo de vida do shell.Trocar de aba mantém o estado. Destruir o shell encerra o fluxo.

Capa da liga com uma arena e gráficos de mercado
  • WIN
  • WDO
  • BITFUT

Liga Trade Arena

Uma comunidade para aprender, competir e evoluir.

Membros ativos
248
Torneios abertos
12
Seguidores
320

Feed de Atividade

Participar da ligaTrocar ligaCopiar link de convite da liga

Sobre

Aprendizado e competição em uma comunidade de traders. Participe dos torneios e acompanhe sua evolução.

✨ Destaques

🔥 Destaque do dia

Trader Aurora

Maior resultado do dia
R$ 1.840,00

Melhor desempenho em um único torneio.

Trader Horizonte

Vitórias na liga
9

Trader Serra

Vitórias na liga
7

🏆 Top Traders

Desde sempre ⌄
  1. 1Trader AuroraLiga Trade Arena12vitórias
  2. 2Trader HorizonteLiga Trade Arena9vitórias
  3. 3Trader SerraLiga Trade Arena7vitórias
🏆 Ver ranking completo

Liga Trade Arena

Diário WIN

09:00Em andamento18:00
PrêmiosDetalhes
ParticiparGratuito→

Liga Trade Arena

O torneio Diário WDO foi finalizado.

Aurora
Horizonte
Serra
Ver torneio

Liga Trade Arena

Inscrições abertas para Diário WIN.

Participar

Torneios

♨

Torneios em destaque

  • Diário WIN

    Liga Trade Arena

    09:00Inscrições abertas18:00
    Saldo FictícioF$ 10.000,00
    Limites de contratos
    • WIN10
    • WDO5
    • BIT5
    Prêmios
    Detalhes
    ParticiparGratuito→

  • Desafio WDO

    Liga Trade Arena

    09:00Inscrições abertas18:00
    Saldo FictícioF$ 10.000,00
    Limites de contratos
    • WIN10
    • WDO5
    • BIT5
    Prêmios
    Detalhes
    ParticiparGratuito→

  • Arena BIT

    Liga Trade Arena

    09:00Inscrições abertas18:00
    Saldo FictícioF$ 10.000,00
    Limites de contratos
    • WIN10
    • WDO5
    • BIT5
    Prêmios
    Detalhes
    ParticiparGratuito→

Torneios ativos

  • Diário WIN

    Liga Trade Arena

    09:00Em andamento18:00
    Saldo FictícioF$ 10.000,00
    PremiaçãoR$ 600,00
    Lim. Contratos
    • WIN10
    • WDO5
    • BIT5
    Prêmios
    DetalhesGratuito

  • Desafio WDO

    Liga Trade Arena

    09:00Em andamento18:00
    Saldo FictícioF$ 10.000,00
    PremiaçãoR$ 400,00
    Lim. Contratos
    • WIN10
    • WDO5
    • BIT5
    Prêmios
    DetalhesGratuito

  • Arena BIT

    Liga Trade Arena

    09:00Em andamento18:00
    Saldo FictícioF$ 10.000,00
    PremiaçãoR$ 300,00
    Lim. Contratos
    • WIN10
    • WDO5
    • BIT5
    Prêmios
    DetalhesGratuito

Ranking

  • Líder atual
    Trader Auroraaurora.demo
    12 vitórias↑ 2 vitórias
  • Maior evolução
    Trader Horizontehorizonte.demo
    8 posições↑ no período
  • Maior prêmio
    Trader Auroraaurora.demo
    R$ 1.840,00↑ 12%
  • Melhor precisão
    Trader Serraserra.demo
    78%↑ 5%
Como funciona: Ranking geral

Compare membros da liga ou todos os traders por prêmio recebido nos torneios da liga, no período selecionado.

Ranking GeralClassificação por prêmioPor TorneioDisputa específicaPor AtivoWIN - WDO - BITFUTPor MétricaOrdenar por indicador
Membros da liga• Liga principalTodos os traders• Participantes dos torneios
Buscar trader
Período
Toda a temporadaÚltimos 30 diasÚltimos 7 diasHoje

  1. Trader Aurora

    aurora.demo

    R$ 1.840,00Prêmio

  2. Trader Horizonte

    horizonte.demo

    R$ 1.600,00Prêmio

  3. Trader Serra

    serra.demo

    R$ 1.200,00Prêmio
3ºDE 248
Trader Serraserra.demo
Prêmio
R$ 1.200,00
Ver meu perfil
PosiçãoUsuárioPrêmio
1ºTrader AuroraR$ 1.840,00
2ºTrader HorizonteR$ 1.600,00
3ºTrader SerraR$ 1.200,00

Marketplace

🛍️ Todos os itens

  • Analista de mercadoLiga Trade ArenaAvatarAnalista de mercadoUm novo visual para o seu perfil na Arena.T$ 1.200Detalhes
  • EstrategistaLiga Trade ArenaAvatarEstrategistaUm novo visual para o seu perfil na Arena.T$ 1.500Detalhes
  • Leitor de tendênciasLiga Trade ArenaAvatarLeitor de tendênciasUm novo visual para o seu perfil na Arena.T$ 1.200Detalhes
  • PrecisãoLiga Trade ArenaAvatarPrecisãoUm novo visual para o seu perfil na Arena.T$ 1.500Detalhes

Aprenda

  • Primeiros passos nos minicontratos

    Conheça os ativos, as regras e a dinâmica dos torneios.

    Saiba mais

  • Leitura de mercado

    Entenda os movimentos do preço e os principais cenários.

    Saiba mais

  • Gestão de risco na prática

    Organize seu plano e defina os limites de cada operação.

    Saiba mais

Estatísticas

Hall da Fama

Os traders que marcaram a história desta liga — títulos, recordes e o que os números mostram.

Desde sempreÚltimos 30 diasÚltimos 7 dias
Torneios realizados
48
Traders premiados
36
Campeões diferentes
18
Prêmios concedidos
R$ 24.000,00
Operações encerradas
9.840

Os Imortais da liga

Cada um entrou aqui por um motivo — e os números que sustentam o feito.

Maior campeão

Trader Aurora

aurora.demo

12

títulos

Torneios
24
Pódios
18
Aproveitamento
75%

Mais pódios

Trader Horizonte

horizonte.demo

18

pódios

Torneios
24
Pódios
18
Aproveitamento
75%

Maior precisão

Trader Serra

serra.demo

78%

de acerto

Torneios
24
Pódios
18
Aproveitamento
75%

Maior prêmio

Trader Aurora

aurora.demo

R$ 1.840

em um torneio

Torneios
24
Pódios
18
Aproveitamento
75%

Recordes da liga

Marcas extremas que ninguém superou ou levou o primeiro tombo.

Maior resultado em um único dia

Recorde atual
R$ 1.840,00
Trader Aurora

Mais operações em um único dia

Recorde atual
86
Trader Horizonte

Maior prêmio em um só torneio

Recorde atual
R$ 1.200,00
Trader Serra

Quadro de honras

Pódios somados em todos os torneios já disputados nesta liga.

TraderOuroTítulosPrataBronzePódiosTorneiosAproveit.
1ºTrader Auroraaurora.demo1218 pódios · 75%
1242182475%
2ºTrader Horizontehorizonte.demo915 pódios · 75%
942152475%
3ºTrader Serraserra.demo713 pódios · 75%
742132475%

Últimos campeões

Quem levantou o troféu nos torneios mais recentes.

CampeãoPrêmio
  • Trader AuroraDiário WIN · 16/10/2026R$ 600,00
  • Trader HorizonteDiário WIN · 16/10/2026R$ 600,00
  • Trader SerraDiário WIN · 16/10/2026R$ 600,00

Insights da liga

O que os dados desta liga dizem sobre quem chega ao topo.

O perfil dos campeões

Ativo principal de quem venceu torneios aqui

WIN58%
WDO29%
BITFUT13%
WIN concentra a maior parte dos títulos.

A hora dos recordes

Horário em que os recordes da liga foram batidos

09h10h11h12h13h14h15h16h
A manhã reúne a maior parte dos recordes.

Consistência vence

Win rate médio por volume diário de operações

+18 p.p.de acerto com até cinco operações por dia.
Até 5 operações72%
6 a 15 operações63%
Mais de 15 operações54%
Quem opera menos acerta mais — e chega mais longe.

Equipes

AU

Equipe Aurora

Disciplina e aprendizado em cada sessão.

Membros
24
Ranking
1º
Participar

Principais benefícios

  • Evolução em conjunto

    Troca de experiências entre os membros.

  • Desafios em equipe

    Objetivos compartilhados nos torneios.

  • Conteúdo selecionado

    Materiais para a rotina de estudos.

HZ

Equipe Horizonte

Novas perspectivas para evoluir em conjunto.

Membros
18
Ranking
2º
Participar

Principais benefícios

  • Evolução em conjunto

    Troca de experiências entre os membros.

  • Desafios em equipe

    Objetivos compartilhados nos torneios.

  • Conteúdo selecionado

    Materiais para a rotina de estudos.

League · todas as abas

Explore as sete abas da League — do desktop ao celular.

Uma base.
Vários caminhos.

abas carregadas sob demanda
7
contextos de acesso
3
entradas públicas
2
arquivos de teste (.spec)
51

Usuário, administrador e parceiro reutilizam as abas.
O guard redireciona para a liga quando não confirma o acesso a Equipes em até 2,5 s.

Contagem do domínio no recorte de 17/10/2026.

MODERNIZAÇÃO DO ANGULAR / 16 → 21

Modernizar com a plataforma em uso.

A plataforma continua em uso. Vamos atualizar o Angular por etapas e conferir os fluxos a cada mudança.

Prompts reconstituídos e código anonimizado.

ANTES DO CÓDIGO

Um plano para construir.

  1. Conferir a compatibilidade das dependências antes de cada atualização.
  2. Atualizar versões, build e rotas com carregamento sob demanda.
  3. Converter partes da base para standalone e conferir suas integrações.
  4. Adaptar mocks, spies e timers ao Vitest, mantendo os cenários existentes.
Da intenção aos próximos passos.
MODERNIZAÇÃO CONTÍNUAANGULAR 16 → 21
Angular16
O ponto de partida
Produto em uso

A aplicação já estava em uso.

Torneios, carteira e administração já faziam parte da aplicação. Parti dessa base, com NgModules e fluxos que precisavam continuar funcionando.

bootstrap.example.ts
platformBrowserDynamic()
  .bootstrapModule(PortalModule);
CUIDADO COM O QUE JÁ EXISTE

Manter os fluxos existentes funcionando enquanto a base recebia novas versões e recursos.

Angular17
Janeiro e fevereiro · 2026
Build e carregamento

Atualizar o build e dividir o carregamento.

Atualizei o Angular e a configuração do build com esbuild. Também reorganizei as rotas para carregar áreas da aplicação sob demanda, com loadChildren.

routes.example.ts
{
  path: 'workspace',
  loadChildren: () => import('./workspace.module')
    .then(module => module.WorkspaceModule)
}
CUIDADO COM O QUE JÁ EXISTE

A mudança no carregamento veio acompanhada de ajustes nas rotas e nos providers usados pelas páginas.

Angular19
Março · 2026
Dependências e integrações

A versão muda. As integrações também.

A atualização exigiu ajustes na carteira, nos componentes e nos estilos. No QR Code, adaptei os imports à API da biblioteca: de QRCodeModule para QRCodeComponent.

payment.example.ts
imports: [QRCodeModule]
imports: [QRCodeComponent]
CUIDADO COM O QUE JÁ EXISTE

Incorporar a nova API da biblioteca ao módulo financeiro existente, preservando sua integração com a carteira.

Angular20
Maio · 2026
Templates e ferramentas

Revisar templates faz parte da atualização.

Nessa etapa feita em equipe, entraram @angular/build e os blocos @if e @for. O cuidado incluía conferir condições, repetições e a identidade dos itens.

catalog.example.html
<li *ngFor="let item of items">{{ item.name }}</li>
@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}
CUIDADO COM O QUE JÁ EXISTE

Revisar condições, repetições e identificação dos itens para manter o comportamento das telas.

Angular21
Maio a outubro · 2026
Adoção gradual e testes

Standalone entrou por partes.

Com a base no Angular 21, organizei abas da carteira e Torneios em componentes standalone. Essas telas, com OnPush em Torneios, convivem com o restante da aplicação em NgModules.

page.example.ts
@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
CUIDADO COM O QUE JÁ EXISTE

Evoluir cada área mantendo sua integração com as rotas, os serviços e as funcionalidades já disponíveis.

Minha atuação em uma evolução feita em equipe. Exemplos adaptados e anonimizados.

O TRABALHO CONTINUA

Atividade no GitHub.

1.086 contribuições em 2026

Use as setas para consultar os dias. Esquerda e direita mudam de semana; acima e abaixo mudam de dia. Ao selecionar um ano ou dia, a consulta permanece até continuar a rolagem da página.

Cada quadradinho, um dia.

MenosMais

Meu trabalho na Trade Arena

commits
1.509
PRs mergeados na main
138
linhas adicionadas
583.927
linhas removidas
345.814

Commits e linhas: consulta em 04/11/2026. PRs: 04/11/2026.
As linhas somam alterações dos commits, incluindo trechos modificados mais de uma vez.

FORA DO EXPEDIENTE

Projetos pessoais

Acordim waka’wã

AcordimVIDA COMPARTILHADA

PROJETO PESSOAL · VIDA COMPARTILHADA

Acordim

Cada parte, bem combinada.

Contas, combinados e acertos para quem divide a casa ou uma viagem.

01 / A ideia

Uma conta foi paga por um, outra ficou pro outro. Vamos mostrar quanto cabe a cada pessoa e o que ainda falta acertar.

Prévia interativa, com prompts reconstituídos e contas de exemplo.

02 / O plano

ANTES DO CÓDIGO

Um plano para construir.

  1. Separar as contas compartilhadas dos gastos pessoais.
  2. Centralizar a regra de divisão e calcular os valores em centavos.
  3. Separar o pagamento da conta dos acertos entre as pessoas.
  4. Adaptar o fluxo à web e ao Android, com Capacitor.
Da intenção aos próximos passos.

03 / As ferramentas

Acordimda ideia à interface
Nuxt 4Páginas e aplicação
Vue 3Interface reativa
TypeScriptRegras e contratos
PiniaEstado compartilhado
SupabaseDados e autenticação
PWAWeb instalável
App AndroidAcordim no celular
CapacitorWeb e recursos nativos
MCPContas pelo assistente

04 / Na prática

Acordim

Nossa casa

novembro de 2026
Nossa casa novembro de 2026
Falta a sua parte deste ciclonenhum ciclo anterior deixou pendências
Nosso

Neste ciclo, faltam R$ 360,00 da sua parte.

R$ 760,00esperando alguém
Você assumiuR$ 1.000,00Beto assumiuR$ 960,00
2 contas dependem de vocêInternet · R$ 60,00

O que está combinado

Ver os ciclos anteriores

Pague pelo celular e registre aqui. Cada conta mostra de quem é a vez.

Depende de você2
InternetR$ 60,00
de R$ 120,00Casa

Beto já fez · falta você

MercadoR$ 300,00
de R$ 600,00Alimentação

Ninguém começou ainda

Esperando os outros1
EnergiaR$ 100,00
de R$ 200,00Casa

Você já fez · falta Beto

Fechado1
AluguelR$ 900,00
de R$ 1.800,00Moradia

Vocês estão quites

Experimente registrar sua parte em uma conta.
waka’wãNAVEGADOR DE TRABALHO
Acauã em xilogravura, identidade do navegador waka’wã

PROJETO PESSOAL · EM DESENVOLVIMENTO

waka’wã

Navegar. Investigar. Construir.

Um navegador para Windows que reúne a página, o projeto e o Codex no mesmo lugar.

01 / A ideia

Quero um navegador focado no meu trabalho, com a página, o projeto e o Codex juntos. Vamos começar pelo que uso e medir o custo de cada recurso.

Prévia do aplicativo Windows em desenvolvimento, com prompts e conversa reconstituídos.

02 / O plano

ANTES DO CÓDIGO

Um plano para construir.

  1. Construir a janela em Win32 e embarcar o Chromium com CEF.
  2. Conectar a aba e a pasta do projeto ao Codex por ferramentas locais.
  3. Conferir a interface e medir memória e CPU antes de falar em leveza.
Da intenção aos próximos passos.

03 / As ferramentas

waka’wãnavegador de trabalho
C++20Aplicação nativa
CodexAgente no projeto
CEFChromium embarcado
Win32Janelas e controles
MCPFerramentas locais
DevToolsInspeção da página
CMakeCompilação

04 / Na prática

Início
Início
DevTools
waka'wãHistórico   Senhas

WAKA'WÃ ✦ INÍCIO

O que vamos fazer?

Um lugar para navegar, criar e investigar suas ideias.

Pergunte, descreva uma ideia ou diga qual página quer explorar...

Codex · conectado quando você pedir
C:\projetos\wakawaAbrir projeto ↗Configurar projetoNova conversa
Recarregar F5DevTools F12Endereço Ctrl+L
ACAUÃ · XILOGRAVURALeve para pensar longe.
waka'wã COM CODEX
WAKAWAProjeto ↗
Inícioapp/home.html
DevToolsErros recentesAbrir projetoNova conversa
VOCÊ

Encontre no projeto os estilos do campo de pedido desta página.

CODEX

O campo está em app/home.html. A aparência vem de .composer e .composer textarea, em app/home.css.

O que vamos resolver nesta página?

Conversa desta aba

Experiência profissional

2025

Trade Arena

Front-end developer

Desde o verão de 2025 — atual

2023

Evavip.com

Front-end developer

Dezembro de 2023 — maio de 2024

2022

Plural Systems

Front-end developer

Maio de 2022 — março de 2023

2015

Freelancer

Front-end developer

Fevereiro de 2015 — março de 2023

2012

3bits Estúdio Criativo

Front-end developer

Agosto de 2012 — fevereiro de 2015

2012

Lápis Raro

Front-end developer

Fevereiro de 2012 — agosto de 2012

2011

hollo interact

Front-end developer

Abril de 2011 — fevereiro de 2012

2010

Commquest Comunicação

Programação de interfaces.

Setembro de 2010 — abril de 2011

2009

Webroom Soluções Interativas

Do PSD ao navegador.

Junho de 2009 — setembro de 2010

Xilogravura de um desenvolvedor segurando uma placa: Will code HTML for food.
Desde quando a web era mato. Veja meu perfil no LinkedIn