Voltar para projetos

Case de projeto

Simulador de Decisão Empresarial

Simulador web que projeta lucro, caixa, risco e ponto de equilíbrio a partir de 10 alavancas de negócio, com o cálculo rodando no navegador.

Meu papelAnalista/Desenvolvedor
Tecnologias utilizadas
  • Next.js
  • TypeScript
  • Tailwind CSS
  • Recharts
  • Python
  • FastAPI
Abrir demoVer repositório (abre em nova aba)
Simulador com as premissas de preço e custos à esquerda e os resultados de lucro, caixa e risco à direita.
simulacao-estrategica-decisao.vercel.app / Página inicial

Problema

Mudar uma premissa exige refazer contas em várias células.

O efeito do preço sobre a demanda costuma ficar de fora da conta.

Solução

Arquitetura resumida
  • 10 alavancas informadas na página, cada uma com faixa válida.
  • Premissas fixas do modelo: salário por pessoa, dívida, capital de giro, depreciação e sazonalidade.
  • Horizonte de 12 meses a partir do mês atual.
Decisões técnicas
  1. Motor de simulação em TypeScript no navegador, sem servidor e sem banco.
  2. Um único modelo de demanda para os indicadores e a projeção.
  3. Cenário guardado na URL, atualizado 300 ms depois da última mudança.

Resultado

Alavancas de entrada
10
Demo publicada / campos editáveis na interface / 13 out. 2026
Cenários de paridade
13
Repositório público / fixtures/simulation-golden.json, TS e Python / v0.3.0
Testes ponta a ponta
20
Repositório público / e2e/simulator.spec.ts com Playwright e axe / v0.3.0

Entreguei um simulador publicado que recalcula a cada mudança de premissa.

  • Modelagem financeira auditável: receita, custos, impostos, caixa e ponto de equilíbrio.
  • Portar um modelo de Python para TypeScript com testes de paridade.
  • Next.js com TypeScript estrito, Vitest e Playwright.
  • Interface acessível e responsiva de 320 a 1440 px.

Aprendizados e limitações

  • Premissas fixas e crescimento linear: a projeção compara decisões dentro do modelo e não é previsão.
  • Um cenário por vez; para comparar, abra dois links.
  • Interface somente em português, com valores em reais.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

Ferramenta web para testar decisões de preço, custos, equipe e marketing e ver o efeito em lucro, caixa e risco nos 12 meses seguintes.

O cálculo roda no navegador, em TypeScript, e reproduz o motor Python de referência em 13 cenários de teste compartilhados.

O cenário fica no endereço da página, com atraso de 300 ms na escrita, e pode ser revisado por outra pessoa a partir do link.

O gráfico desliga a animação quando o sistema pede movimento reduzido e tem uma tabela alternativa com os mesmos números.

Next.js e TypeScript com o motor de simulação no navegador, gráfico em Recharts e um motor Python/FastAPI de referência que garante a paridade dos cálculos.

Unifiquei o modelo: indicadores e projeção usam a mesma demanda efetiva.

Cada fórmula é testada nos dois motores, o que torna o cálculo verificável.

Problema

  • Sem um link estável, é difícil revisar um cenário com outra pessoa.
  • Fórmulas espalhadas em planilhas não têm teste.

O que a página mostra

  • Lucro mensal, fluxo de caixa, margem de segurança e lucro anual em reais.
  • Índice de risco, ponto de equilíbrio e demanda efetiva depois do efeito do preço.
  • Receita e lucro mês a mês por 12 meses, com tabela alternativa ao gráfico.

Como o modelo funciona

  • A demanda efetiva é a demanda informada ajustada pelo preço, com fator entre 0,6 e 1,3.
  • O lucro mensal é o primeiro mês projetado; o lucro anual soma 12 meses.
  • Premissas fixas (salário, dívida, capital de giro, depreciação e sazonalidade) ficam visíveis na página.
Funcionalidades e destaques
  • Campos com controle deslizante e entrada numérica que aceita vírgula decimal.
  • Campo vazio ou inválido mostra o erro e mantém o último resultado.
  • Link compartilhável que restaura o cenário e descarta valores inválidos.
  • Gráfico com tabela de dados e sem animação quando o sistema pede movimento reduzido.
  • Paridade entre os motores TypeScript e Python verificada no CI.
  • Acessibilidade verificada com axe em três larguras de tela.
  • Página estática na Vercel com CSP e headers de segurança.
  • Sem contas, sem banco e sem coleta de dados pessoais.
Arquitetura técnica e dados
  • API FastAPI de referência com o mesmo motor em Python, usada nos testes de paridade.

Arquitetura técnica

Como o case foi pensado como produto

Simulador web que projeta lucro, caixa, risco e ponto de equilíbrio a partir de 10 alavancas de negócio, com o cálculo rodando no navegador.

Next.jsFrameworkTypeScriptLinguagemTailwind CSSFrameworkRechartsVisualizaçãoPythonLinguagemFastAPIFramework

Dados utilizados

  • 10 alavancas informadas na página, cada uma com faixa válida.
  • Premissas fixas do modelo: salário por pessoa, dívida, capital de giro, depreciação e sazonalidade.
  • Horizonte de 12 meses a partir do mês atual.
  • 13 cenários de referência calculados pelo motor Python.

Principais componentes

  • Campos com controle deslizante e entrada numérica que aceita vírgula decimal.
  • Campo vazio ou inválido mostra o erro e mantém o último resultado.
  • Link compartilhável que restaura o cenário e descarta valores inválidos.
  • Gráfico com tabela de dados e sem animação quando o sistema pede movimento reduzido.

Decisões técnicas

  • Modelagem financeira auditável: receita, custos, impostos, caixa e ponto de equilíbrio.
  • Portar um modelo de Python para TypeScript com testes de paridade.
  • Next.js com TypeScript estrito, Vitest e Playwright.
  • Interface acessível e responsiva de 320 a 1440 px.

Trade-offs

  • Premissas fixas e crescimento linear: a projeção compara decisões dentro do modelo e não é previsão.
  • Um cenário por vez; para comparar, abra dois links.
  • Interface somente em português, com valores em reais.
Como executar
  1. Acesse a versão publicada pelo botão do projeto.
  2. Para rodar localmente, com Node 24: cd frontend, npm ci e npm run dev.
  3. API de referência, com Python 3.12: cd backend, pip install -r requirements-dev.txt e uvicorn app.main:app --port 8000.
  4. Testes: npm test e npm run test:e2e no frontend; python -m pytest no backend.
Créditos

Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech

Próximo projetoSistema de Monitoramento do Motorista

Monitor de atenção do motorista com MediaPipe no navegador e engine Python local; a demo abre com métricas simuladas.

Ver case completo