JS_Finances

DT Money

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.


📸 Screenshots

🖼 Dashboard

Screenshot - Dashboard

🖼 Modal de Nova Transação

Screenshot - New Transaction


🚀 Tecnologias utilizadas

  • 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

🧩 Principais funcionalidades

💰 Registro de transações

  • Inserir entradas (receitas)
  • Inserir saídas (despesas)
  • Todas registradas com:
    • título
    • categoria
    • valor
    • tipo da transação
    • data

🧾 Listagem de transações

  • Tabela completa com todos os registros
  • Formatação automática de valores e datas
  • Atualização em tempo real

📊 Resumo financeiro

  • Cálculo automático de:
    • total de receitas
    • total de despesas
    • saldo final
  • Renderização dinâmica com base nos dados

📥 Modal de criação

  • Modal estilizado para adicionar novas transações
  • Formulário intuitivo e com validação
  • Fechamento automático após criação

🔍 Busca filtrada

  • Campo de busca para filtrar transações
  • Implementado com debounce (dependendo da versão do Ignite)

🧠 Estado global estruturado

  • Context API + Reducer
  • MirageJS simulando backend
  • Organização clara entre lógica, estado e UI

🏁 Como executar o projeto

# 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

👨‍💻 Autor

Este projeto foi desenvolvido por Jason Santos, como parte das práticas do curso Ignite da Rocketseat.

Visit original content creator repository

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *