#9 - React: https://newdtmoney-aszurar.netlify.app

OBS: Essa é a branch main, aqui simulamos uma API REST com json-server para consumir os dados. Mas a versão publicada esta feita com o localStorage e dados locais para facilitar a publicação, para acessá-la, vá na branch feature/localstorage.

DT Money

• O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e por fim calcularmos seu saldo.

• O objetivo desse projeto é entender a forma como podemos consumir APIs, melhorar a performance prevenindo renderizações desnecessárias e praticar um pouco mais a construção de formulários.

• O site foi publicado com CI/CD por meio da plataforma Netlify.

• Acesse e teste o projeto em: https://newdtmoney-aszurar.netlify.app

  DT Money

  newdtmoney.mp4

Sobre |  Motivo |  Design |  Requisitos |  Tecnologias |  CI/CD |  Baixar e Executar 

---

Vídeo no Youtube

---

ℹ️ Sobre

• O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e por fim calcularmos seu saldo.

• O objetivo desse projeto é entender a forma como podemos consumir APIs, melhorar a performance prevenindo renderizações desnecessárias e praticar um pouco mais a construção de formulários.

• A acessibilidade foi levada em consideração, com o uso da lib axe-core para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do Radix UI para componentes acessíveis como Modais e Tooltips.

• Esse projeto é derivado da formação React da Rocketseat.

• Tela inicial

---

⁉️ Motivo

• O objetivo do projeto é entender e praticar os conceitos de como podemos consumir APIs, usar os métodos HTTP: GET, POST, PUT, PATCH e DELETE em conjunto com axios, assim como a própria configuração do axios. Além disso, praticamos mais sobre formulários com React Hook Form focando em componentes Controlados e focamos também em performance verificando as renderizações dos componentes no navegador por meio da extensão React Dev Tools e usamos hooks como useCallback, useMemo e métodos como memo para prevenir renderizações desnecessárias.

Funcionalidades:

1. Listagem com todos os gastos e ganhos;
2. Cadastro de movimentações financeiras com categorias, valores e data atual;
3. Total de entradas, saídas e saldo;
4. Responsividade para dispositivos móveis.
5. Acessibilidade ampliada com o cumprimento de todas regras e avisos do axe-core permitindo a navegação completa de teclado e leitores de voz.

• Pesquisa de movimentações

---

🎨 Design

• O Design foi disponibilizado pela Rocketseat, e pode ser acessado no link abaixo:

DT Money

---

🌱 Requisitos Mínimos

1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)

• Cadastro

_

---

🚀 Tecnologias Utilizadas

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

  1. axios
  2. axe-core/react
  3. JavaScript
  4. Json Server
  5. Netlify
  6. NodeJS
  7. Phosphor Icons
  8. Radix UI
  9. React
  10. React Hook Form
  11. Sonner
  12. TailwindCSS
  13. Tailwind Variants
  14. TypeScript
  15. Vite
  16. Yarn
  17. zod

• Responsividade

_ _

---

🚚 Entrega e distribuição continua

https://newdtmoney-aszurar.netlify.app

• Para a publicação da aplicação foi por meio da plataforma Netlify onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.
• Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.
• Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.

---

📦 Como baixar e executar o projeto

Baixar

• Clonar o projeto:

   git clone https://github.com/Aszurar/DT-money.git

• É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:

  • Instalação do NodeJS
  • Instalação do Yarn

• Instalação das dependências:

  • Execute o comando abaixo dentro da pasta do projeto

      yarn

Execução

• Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:

• Caso esteja na branch main:

  • Terminal 1: Executando front-end

      yarn dev

  • Terminal 2: Executando servidor json

      yarn dev:server

• Caso esteja na branch feature/localstorage:

    yarn dev

Desenvolvido por 🌟 Lucas de Lima Martins de Souza.