Este projeto foi desenvolvido com o intuito de colocar em prática meus conhecimentos de Desenvolvimento Web, em espicífico o uso do Typescript e Styled-Components. Aqui você pode conhecer um pouco sobre minhas hard skills.
As principais habilidades colocadas prática nesse projeto foram:
- ReactJS.
- Typescript
- Styled-Components;
- Deploy com Netlify;
O projeto consiste em um Sistema Financeiro simples. É totalmente centrado em apenas uma página em que é possível adicionar o valor das suas despesas por data e categoria e ainda incluir um título na mesma.
Ao preencher todos os campos o sistema faz um cálculo comparando os gastos das categorias com a categoria Salário. Se o saldo for negativo ele aparece em vermelho no campo Despesas e se for positivo ele aparece em verde.
Para testar o projeto na sua máquina pessoal siga os seguintes passos:
- Clone o repositório:
git@github.com:Tassio-Med/finance-system.git- Instale os pacotes npm:
npm installPara a construção visual do projeto foi utilizada a biblioteca Styled-Components e a biblioteca React-icons para adicionar ícones SVG. No projeto foi utilizada a seguinte paleta de cores:
| HEX | RGB | Cor |
|---|---|---|
#fff |
255, 255, 255 |
 |
##61dafb |
97, 218, 251 |
 |
#282c34 |
40, 44, 52 |
 |
#191919 |
25, 25, 25 |
 |
#F48C06 |
244, 140, 6 |
 |
#f40606 |
244, 6, 6 |
 |
##02c40f |
2, 196, 15 |
 |
Neste projeto foi utilizado o ESLint para fazer a análise estática do código. Ajudando a garantir a qualidade do código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento.