FIntech Desenvolvimento Web

O projeto Fintech é um dashboard financeiro desenvolvido para fornecer uma visão clara e consolidada das vendas de uma aplicação. A proposta foi criar uma interface que reunisse em um só lugar o resumo financeiro geral, a listagem das vendas e a possibilidade de consultar o detalhe individual de cada uma, tudo com recursos de filtragem por período e visualização gráfica.

O foco foi organizar o código de forma modular, com separação clara entre componentes, contextos, hooks, páginas, tipos e utilitários.

O principal objetivo foi desenvolver um painel financeiro funcional e organizado para acompanhar vendas, oferecendo um resumo consolidado com totais, uma lista de vendas navegável até a página de detalhes, filtros por intervalo de datas e atalhos por mês, além de um gráfico de vendas por status. O projeto também buscou manter uma experiência consistente com estados de carregamento durante a busca de dados e uma interface adaptável a diferentes tamanhos de tela.

O desenvolvimento foi estruturado em torno de uma arquitetura modular, com a criação de componentes reutilizáveis, um contexto global responsável pelos dados e pelo intervalo de datas, hooks reutilizáveis como o fetch genérico e páginas roteadas para resumo, listagem e detalhe de vendas.

Foram implementadas as funcionalidades de resumo consolidado, listagem com links de detalhe, filtro por período, atalhos por mês e gráfico por status. Também foi dada atenção aos testes, cobrindo componentes com comportamento relevante, como o input de data, botões de mês, intervalo de datas e o gráfico de vendas.

Entre as principais decisões, estão o uso do React Router DOM com BrowserRouter e Routes para a navegação entre as páginas de resumo, lista e detalhe; o TypeScript para tipagem compartilhada e definição de contratos de dados; o Recharts para a visualização do gráfico de vendas; a Fetch API para o consumo dos dados; e o uso de CSS Custom Properties como tokens visuais para garantir consistência de estilo, combinados com Media Queries para responsividade. A arquitetura foi dividida em camadas claras, separando componentes, contextos, hooks, páginas, tipos e utilitários.

Entre os desafios enfrentados, destacam-se o gerenciamento do estado global do intervalo de datas e dos dados por meio de contextos, garantindo que o resumo, a lista e o gráfico refletissem corretamente os filtros aplicados; a implementação dos filtros por período e dos atalhos por mês de forma integrada ao fluxo de dados; e a manutenção da tipagem consistente entre os dados recebidos da API e a interface, além do tratamento adequado dos estados de carregamento durante as buscas.

O projeto resultou em um dashboard financeiro completo e funcional, consolidando conhecimentos importantes de React, TypeScript e consumo de APIs.

aplicação reforçou boas práticas de organização de código em camadas, uso de contexto para compartilhamento de dados, tipagem estática para segurança dos contratos de dados e a importância de testes automatizados para os componentes mais relevantes.