Sistema para cadastro e visualização transações.
O ✨ dt money ✨ é um sistema de controle financeiro, onde é possível realizar o cadastro e visualização de entradas e saídas, além de separá-las em categorias.
É um projeto inteiramente frontend, que foi desenvolvido através das aulas de ReactJS do curso Ignite, da Rocketseat.
As instruções abaixo irão servir para que o projeto seja corretamente instalado e utilizado em seu dispositivo.
É necessário ter as tecnologias abaixo instaladas em sua máquina para poder seguir os próximos passos.
- Um navegador para que o sistema rode (Google Chrome, Firefox, Edge, etc.)
- Node.js
- Git
- (Opcional) - Editor de código para edição e visualização do script. Recomendado: Visual Studio Code
Siga o passo a passo abaixo para instalar corretamente o aplicativo e rodá-lo no seu próprio dispositivo.
Para seguir as instruções abaixo corretamente, abra o terminal do seu sistema operacional e execute os seguintes comandos:
# Clone o repositório deste projeto
$ git clone https://github.com/Matheus-Chaves/dtmoney.git
# Acesse a pasta do projeto pelo terminal
$ cd dtmoney
# Instale as dependências
$ yarn
# Execute a aplicação no modo de desenvolvimento
$ yarn start
# O servidor rodará na porta:3000 - acesse <http://localhost:3000>Após as instruções acima, o sistema já poderá ser utilizado.
Caso deseje encerrar/parar a aplicação, basta fechar o terminal ou encerrar o comando utilizando Ctrl + C.
A utilização do sistema é simples e a interface é bem intuitiva.
- Clique no botão "Nova transação"
- Insira as informações solicitadas
- Clique no botão "Cadastrar"
- A nova transação aparecerá na última linha da tabela
- A quantia de entradas, saídas e o total (soma dos valores anteriores), estão na parte superior da página
- TypeScript - Linguagem de programação
- React - Biblioteca para desenvolvimento Web
- Styled-components - Biblioteca de estilização
- Mirage JS - Biblioteca para testes de API sem backend
- Axios - Cliente HTTP que trata requisições
- react-modal - Componente modal com acessibilidade
- Polished - Biblioteca que oferece estilizações prontas
- Feito com ❤️ by @matheus-chaves
- Projeto idealizado by Rocketseat 💜