

O DT Money é um projeto desenvolvido no programa Ignite da Rocketseat.
Ele funciona como um gerenciador financeiro, permitindo registrar entradas, saídas e acompanhar o saldo atualizado em tempo real. O foco do projeto é ensinar React, Context API, hooks, reducer, async requests, modal, estilização e boas práticas de arquitetura.
- ReactJS — componentização e renderização
- TypeScript — segurança e tipagem
- Vite — ambiente de desenvolvimento moderno
- Styled Components — estilos modularizados
- Phosphor Icons — ícones
- Context API — compartilhamento de estado global
- useReducer — manipulação de estados complexos
- Axios — requisições HTTP
- MirageJS — API fake para desenvolvimento
- React Hook Form — formulários mais eficientes
- Zod — validação de dados
- Inserir entradas (receitas)
- Inserir saídas (despesas)
- Todas registradas com:
- título
- categoria
- valor
- tipo da transação
- data
- Tabela completa com todos os registros
- Formatação automática de valores e datas
- Atualização em tempo real
- Cálculo automático de:
- total de receitas
- total de despesas
- saldo final
- Renderização dinâmica com base nos dados
- Modal estilizado para adicionar novas transações
- Formulário intuitivo e com validação
- Fechamento automático após criação
- Campo de busca para filtrar transações
- Implementado com debounce (dependendo da versão do Ignite)
- Context API + Reducer
- MirageJS simulando backend
- Organização clara entre lógica, estado e UI
# Clone o repositório
git clone https://github.com/JsnEvt/JS_Finances.git
# Instale as dependências
npm install
# Inicie o servidor de desenvolvimento
npm run dev🎯 Objetivo educacional
O DT Money reforça diversos conceitos essenciais do ecossistema React:
Context API para estado global
Reducers para lógica mais previsível
Integração com APIs (reais ou mockadas)
MirageJS para simular backend
Styled Components com tema global
Formulários profissionais com React Hook Form
Validação com Zod
Consumo de dados com Axios
Padrões avançados de organização
Este projeto foi desenvolvido por Jason Santos, como parte das práticas do curso Ignite da Rocketseat.


Leave a Reply