Projeto de controle financeiro desenvolvido no Ignite, o programa de aceleração da Rocketseat.

• 📖 Sobre o Projeto
• 📷 Demonstração
• ✨ Funcionalidades
• 💻 Tecnologias Utilizadas
• 🚀 Como Executar
• 🎨 Layout
• 📜 Licença

O DT Money é uma aplicação de controle financeiro desenvolvida como desafio do Ignite 2022 (trilha de ReactJS da Rocketseat).

O objetivo é construir uma interface moderna para gerenciar transações financeiras (entradas e saídas). A aplicação consome uma API (simulada com json-server localmente) e permite ao usuário cadastrar e listar transações, além de exibir um resumo financeiro no topo da página.

• Dashboard: Exibe um resumo das finanças com o total de entradas, saídas e o saldo total.
• Listagem de Transações: Exibe todas as transações cadastradas.
• Busca por Transações: Permite ao usuário filtrar transações por descrição ou categoria.
• Cadastro de Transações: Permite o cadastro de novas transações através de um modal (com validação de formulário).
• Ambiente Mocado: Em produção (Vercel), a aplicação usa uma API mocada (simulada) para funcionar sem um backend real, enquanto em desenvolvimento usa o json-server.

Este projeto foi construído com as seguintes tecnologias:

• React.js (com Vite)
• TypeScript
• Styled-Components (para estilização)
• Radix UI (para componentes acessíveis, como o Modal)
• React Hook Form (para gerenciamento de formulários)
• Zod (para validação de schemas)
• Axios (para requisições HTTP)
• use-context-selector (para otimização de performance do Context API)
• JSON-Server (para simulação de API em desenvolvimento)
• ESLint e Prettier (para padronização de código)

Siga os passos abaixo para rodar o projeto localmente:

1. Clone o repositório

   git clone https://github.com/Robson16/dt-money.git

2. Acesse a pasta do projeto

   cd dt-money

3. Instale as dependências

   npm install

4. Configure as variáveis de ambiente Crie um arquivo .env na raiz do projeto e adicione a seguinte variável (ela será usada pelo Axios em modo de desenvolvimento):

   VITE_API_URL=http://localhost:3333

5. Inicie o servidor da API Em um terminal, rode o json-server (ele usará o arquivo server.json):

   npm run server

6. Inicie a aplicação Em outro terminal, rode o projeto React (Vite):

   npm run dev

A aplicação estará disponível em http://localhost:5173 (ou a porta que o Vite indicar).

O layout da aplicação foi desenvolvido pela Rocketseat e está disponível no Figma.

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Feito com ☕❤ por Robson H. Rodrigues