Este é o resultado de um estudo aprofundado de React.js.
A ideia deste projeto é criar um controle financeiro para o usuário. Nele o usuário pode adicionar as entradas e saídas financeiras do seu dia-a-dia. É possível ainda utilizar o campo de busca da página para filtrar por itens ou categorias específicas.
Por "trás dos panos" o projeto apresenta diversas funcionalidades, fazendo uso do React Hook Form e Zod nos formulários e utilizando Context para facilitar o uso de variáveis. O projeto possuí ainda otimizações para evitar renderizações desnecessárias nos componentes.
A página em formato desktop é vista na imagem abaixo:
As seguintes tecnologias foram empregadas na criação deste projeto:
Clone o projeto para o local desejado em seu computador.
$ git clone git@github.com:andreviapiana/DTMoney.git# Navegue até o diretório
$ cd DTMoney
# Instale as dependências necessárias
$ npm install
# Agora inicie o servidor do FrontEnd
$ npm run dev
# O terminal irá exibir o endereço local onde a aplicação está sendo executada. Basta digitar o mesmo endereço em seu navegador preferido. O endereço usado na criação do projeto foi este:
http://localhost:5173/O BackEnd roda nativamente através do meu servidor JSON. Caso deseje rodar ele localmente em sua máquina, siga os passos:
# Navegue até o diretório
$ cd DTMoney/src/lib
# Abra o arquivo AXIOS.TS que está no diretório acima
# Faça a inversão dos itens que ficam comentados, de modo que os endereços ficarão assim:
baseURL: 'http://localhost:3000',
// baseURL: 'https://my-json-server.typicode.com/andreviapiana/dtmoney',
# Então inicie o servidor do BackEnd
$ npm run dev:serverO resultado FINAL pode ser visto aqui
Made with ❤️ by Leuzin dev 👋🏽 Get in Touch!