Fintech

Sobre • Arquitetura de Dados • Tecnologias • Funcionalidades • Estrutura do Projeto • Configuração • Fluxo de trabalho (Git Flow) • Rotas • Contribuidores • Contato • Licença

Sobre

Fintech é uma aplicação web para gerenciamento financeiro, desenvolvida por Emmanuel Oliveira e baseada nos estudos da Origamid. O projeto permite aos usuários acompanhar as vendas, vindas de uma API, podendo analisar seus dados financeiros através de gráficos interativos.

Tecnologias

As seguintes tecnologias foram utilizadas no desenvolvimento deste projeto:

• React: Uma biblioteca JavaScript para construir interfaces de usuário.
• TypeScript: Um superconjunto tipado de JavaScript que compila para JavaScript puro.
• Vite: Uma ferramenta de compilação que visa proporcionar uma experiência de desenvolvimento mais rápida e enxuta para projetos web modernos.
• Styled-components: Uma biblioteca para estilizar componentes React.
• Recharts: Uma biblioteca de gráficos para React.
• React Router Dom: Uma biblioteca de roteamento para React.
• ESLint: Uma ferramenta de análise de código estática para identificar padrões problemáticos.

Funcionalidades

• Dashboard Financeiro: Visualização resumida das vendas em formato de gráficos interativos.
• Lista de Vendas: Exibição detalhada de todas as vendas com filtros por período.
• Detalhes de Venda: Página individual com informações completas de cada transação.
• Filtro por Data: Seleção de período personalizado ou botões de atalho (7, 15, 30 dias).
• Estados de Pagamento: Visualização do status de cada venda (pago, processando, falha).
• Tipos de Pagamento: Suporte para boleto, pix e cartão.
• Sistema de Parcelas: Exibição de parcelas quando aplicável.

Arquitetura de Dados

Esta seção documenta como os dados são gerenciados na aplicação.

Fonte de Dados

Os dados são recebidos de uma API externa: https://data.origamid.dev/vendas/

A API aceita parâmetros de consulta para filtrar por período:

• inicio: Data inicial do filtro
• final: Data final do filtro

Exemplo de requisição:

https://data.origamid.dev/vendas/?inicio=2026-01-01&final=2026-01-15

Hooks Customizados

useFetch<T>

Um hook genérico para realizar requisições HTTP localizado em src/hooks/use-fetch.tsx.

Funcionalidades:

• Requisições fetch nativa do JavaScript
• Suporte a cancelamento de requisições (AbortController)
• Estados separados: data, loading, error
• Tipagem genérica para qualquer tipo de resposta

const { data, loading, error } = useFetch<ISales[]>(url)

Context API

O DataContext (src/context/data-context.tsx) gerencia o estado global de dados da aplicação.

Estado fornecido:

• data: Array de vendas (ISales[])
• loading: Status de carregamento
• error: Mensagem de erro (se houver)
• start / end: Datas do período selecionado
• setStart / setEnd: Funções para alterar o período

Hook de acesso: useData()

const { data, loading, error, start, setStart, end, setEnd } = useData()

Components que Utilizam

Componente/Page	Hook Utilizado	Propósito
src/main.tsx	DataContextProvider	Provedor global
src/pages/summary/index.tsx	useData	Exibir resumo financeiro
src/pages/Sales/index.tsx	useData	Listar todas as vendas
src/pages/Sale/index.tsx	useFetch	Detalhes de uma venda
src/components/btn-months/index.tsx	useData	Alterar período rápido
src/containers/date-range/index.tsx	useData	Selecionar período personalizado

Estrutura do Projeto

src/
├── components/       # Componentes reutilizáveis
│   ├── btn-months/  # Botões de seleção rápida de período
│   ├── date-input/  # Input de data
│   ├── item-for-sales/    # Item de venda na lista
│   ├── loading/     # Componente de carregamento
│   └── sales-chart/ # Gráfico de vendas
├── containers/      # Componentes de layout
│   ├── date-range/  # Seletor de período
│   ├── header/      # Cabeçalho da aplicação
│   └── sidenav/     # Navegação lateral
├── context/         # Context API do React
│   └── data-context.tsx
├── hooks/           # Hooks customizados
│   └── use-fetch.tsx
├── pages/           # Páginas da aplicação
│   ├── Sale/        # Detalhes de uma venda
│   ├── Sales/       # Lista de vendas
│   └── summary/     # Dashboard/Resumo
├── router/          # Configuração de rotas
├── styles/          # Estilos globais e temas
└── utils/           # Funções utilitárias

Configuração

Para executar este projeto localmente, siga estes passos:

1. Clone o repositório:

   git clone https://github.com/seu-usuario/fintech.git

2. Navegue até o diretório do projeto:

   cd fintech

3. Instale as dependências:

   pnpm install

4. Execute o servidor de desenvolvimento:

   pnpm dev

5. Abra seu navegador e visite http://localhost:5173.

Scripts Disponíveis

Script	Descrição
pnpm dev	Inicia o servidor de desenvolvimento
pnpm build	Compila o projeto para produção
pnpm lint	Executa a análise de código ESLint
pnpm preview	Visualiza a versão de produção localmente

Rotas

A aplicação possui as seguintes rotas:

• /: Página inicial, exibe o resumo financeiro.
• /sales: Página que lista todas as vendas.
• /sales/:id: Página que exibe os detalhes de uma venda específica.

Fluxo de trabalho (Git Flow)

Este projeto foi desenvolvido utilizando Git Flow como estratégia de branching.

Benefícios (resumo):

• Organização do desenvolvimento: separa trabalho do dia a dia (develop) do código pronto para produção (main).
• Isolamento de mudanças: branches de feature, release e hotfix reduzem conflitos e facilitam revisões.
• Releases mais previsíveis: preparação de entrega em branch dedicada (release), com estabilização antes do merge.
• Correções urgentes mais rápidas: hotfixes podem ser aplicados em produção sem travar o fluxo de novas features.

Contribuidores ou proprietários

Emmanuel Oliveira

desenvolvido por 💖 Emmanuel Oliveira
© Todos os Direitos Reservados

Contribua para os projetos

• Clique na seta abaixo e veja como você pode contribuir para o projeto

Como fazer uma contribuição ao Projeto ?

- Familiarize-se com a documentação do projeto, que geralmente inclui guias de instalação.
- Explore o código do projeto para entender sua estrutura e funcionamento.

Faça um Fork

Crie uma cópia (fork) do repositório original em sua conta do GitHub.

Clone o Repositório

Isso criará uma cópia local do projeto, onde você poderá fazer suas modificações.

Crie uma Nova Branch:

Crie uma nova branch para isolar suas alterações.
Isso facilita a organização do seu trabalho e a criação de pull requests.

Faça as Alterações:

Crie funcionalidades, mude estilos ou resolva bugs que iram contribuir para a melhoria do Projeto.

Crie um Pull Request:

Inclua uma descrição clara das suas alterações e explique como elas resolvem o problema ou melhoram o projeto.
Solicitação: Envie um pull request para o repositório original, solicitando que suas alterações sejam incorporadas ao projeto.

Revise e Responda a Feedback:

Colabore: Os mantenedores do projeto podem solicitar alterações ou fornecer feedback sobre o seu código.

Contato

_{😁Obrigado por chegar até aqui!}

Licença

Lançado em 2026, este projeto está sob a licença MIT

⭐ Se este projeto foi útil para você, considere dar uma estrela!