Coin-Frontend

Este projeto é para controle financeiro, aqui contém apenas o front-end. Acesse o código do backend em: https://github.com/dhomini-rabelo/Coin-Backend.

🛠️ Principais ferramentas

• Vite ts
• Tailwind
• Styled-components
• Phosphor-react
• date-fns
• react-router-dom
• react-hook-form
• react-query
• hookform/error-message
• zod
• date-fns
• axios
• headlessui
• zod

🎥 Projeto

• Cadastro de usuários

  A validação de formulário é feita com zod neste projeto

  
  



• Login

  A autenticação é feita usando tokens JWT, esses tokens são salvos no localStorage. A classe que faz o controle do armazenamento desses tokens esta em "project\src\code\controllers\Auth\index.ts".

  
  



• Alteração de dados do usuário

  Criei um hook personalizado para mostrar mensagens ao usuário, este hook esta em "project\src\code\hooks\useFeedback\index.tsx".

  
  



• Criando e visualizando contas

  
  



• Filtrando contas

  
  



• Visualização de dados financeiros

  Mostra as últimas 10 contas.

  
  



• Listagem de dados com react-query

  A listagem de compras é feita usando react-query, com cache de 1 minuto (usando recarregamento após evento de foco), como pode ser observado o cache permanece mesmo com as rerenderizações. Quando uma nova conta é adicionada o cache é removido.

  
  



• Autenticação - tokens no local Storage

  Os tokens são salvos no localStorage, isso permite que após o refresh da página o usuário continue autenticado. Se esse refresh acontecer depois do token ter sido expirado o usuário é redirecionado para a página de login.

  
  



• Telas no mobile