Dados utilizados
- Base sintética e determinística de 2.700 registros: 180 dias, 5 produtos e 3 canais.
Case de projeto
Cada Venda Conta
Painel de vendas que mostra receita, lucro bruto e margem por período, canal e produto, em HTML, CSS e JavaScript.
Problema
Receita sozinha não mostra quanto sobra de cada venda.
Comparar períodos, canais e produtos em planilha é lento.
Solução
Arquitetura resumida
- Base sintética e determinística de 2.700 registros: 180 dias, 5 produtos e 3 canais.
Decisões técnicas
- Um único index.html com JavaScript sem dependências e valores guardados em centavos inteiros.
- Gráfico de receita e lucro bruto desenhado em SVG à mão, sem biblioteca.
- Três visões por hash: geral, produtos e canais.
Resultado
- Registros sintéticos
- 2.700
- Repositório privado / gerador em index.html / commit a78e889
- Checagens de overflow
- 18
- Repositório privado / tests/dashboard.cjs, 6 larguras × 3 períodos / commit a78e889
Um painel enxuto que deixa a margem de cada venda à vista, feito como projeto acadêmico.
- Visualização em SVG
- Modelagem de margem bruta
- JavaScript sem framework
- Testes de responsividade
Aprendizados e limitações
- Os dados são fictícios, gerados por fórmula, com datas fixas a partir de 5 out. 2026.
- Só considera lucro bruto: frete, impostos e despesas ficam fora.
- A interface está só em português.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
Cada Venda Conta é um painel de vendas feito como projeto acadêmico de conclusão de semestre.
A base é sintética e determinística: 2.700 registros de 180 dias, 5 produtos e 3 canais, com valores em centavos inteiros.
O painel filtra por período e canal, compara cada indicador ao período anterior e desenha receita e lucro bruto em SVG, sem biblioteca.
Há visões por produto e por canal, busca na tabela e exportação em CSV marcada como demonstração.
HTML, CSS e JavaScript sem dependências, gráfico em SVG e testes em Playwright; publicação estática na Vercel.
Funcionalidades e destaques
- Filtro de período de 7, 30 ou 90 dias.
- Filtro por canal.
- Indicadores comparados ao período anterior.
- Tabela de produtos com busca.
- Exportação em CSV.
- Desenha o gráfico de receita e lucro bruto em SVG, sem biblioteca.
- Guarda valores em centavos inteiros para evitar erro de arredondamento.
- Compara cada indicador com o período anterior.
- Testa overflow em 6 larguras e 3 períodos com Playwright.
Arquitetura técnica e dados
Arquitetura técnica
Como o case foi pensado como produto
Painel de vendas que mostra receita, lucro bruto e margem por período, canal e produto, em HTML, CSS e JavaScript.
SVGVisualizaçãoJavaScriptLinguagemHTMLPlataforma webCSSPlataforma webPlaywrightFramework
Principais componentes
- Filtro de período de 7, 30 ou 90 dias.
- Filtro por canal.
- Indicadores comparados ao período anterior.
- Tabela de produtos com busca.
- Exportação em CSV.
Decisões técnicas
- Visualização em SVG
- Modelagem de margem bruta
- JavaScript sem framework
- Testes de responsividade
Trade-offs
- Os dados são fictícios, gerados por fórmula, com datas fixas a partir de 5 out. 2026.
- Só considera lucro bruto: frete, impostos e despesas ficam fora.
- A interface está só em português.
Como executar
- O repositório é privado; os passos abaixo valem para quem tem acesso.
- Abra o index.html no navegador ou rode npm run build.
- npm ci, npx playwright install chromium e npm test
Mídia adicional
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projetoLibrary Studio
API em FastAPI que cataloga livros, busca por título, autor e ano e completa metadados pelo ISBN via OpenLibrary.
Ver case completo