• OBS: Essa é a branch master, aqui o projeto usa localStorage para salvar os dados para facilitar o deploy. Para a implementação com json-server simulando a api, acesse a branch de desenvolvimento(dev).

• O projeto dtmoney é uma plataforma que cadastra transações, calcular o saldo, total de entradas e saídas, lista as transações e indica o período de tempo em que elas ocorreram.

• O propósito aqui é aprender o consumo de APIs via axios. simulando com dados mockados via JSON-SERVER, praticando métodos como GET, POST e DELETE, em conjunto com tudo que foi aprendido até agora com React(Context API, useReducer, Otimização com memo, ...), TailwindCSS(Responsividade, troca entre temas), Radix UI(Acessibilidade em geral e componentes totalmente personalizáveis).

• Nesse projeto, na branch chamada desenvolvimento(dev), os dados serão salvos e consumidos a partir de um json-server com o intuito de simular uma API. Mas na branch de produção(master), os dados serão salvos e consumidos a partir do localStorage do navegador.

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

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

  dtmoney

  dtmoney.mov

• O projeto dtmoney pode ser um projeto simples, mas que foi abordado conceitos importantes para o desenvolvimento de web apps com React.

• Esse projeto foi reformulado e refeito com tecnologias atuais a partir de um projeto do módulo da trilha de 2021 de React da Rocketseat. Assim, temos algumas adições e incrementos como o uso do json-server para simular uma API, a criação do tema escuro, Remoção de transações, gerenciamento de Estados pelo useReducer, dentre outros.

• Usamos React com TypeScript como principais tecnologias.

• A animação da listagem é feita com a lib AutoAnimate.

• 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.

• O projeto dtmoney é o 2º projeto realizado em aula do bootcamp Ignite da trilha ReactJS de 2021 da Rocketseat

  • Esse projeto na época construído, foi feito com create react app e Styled Componentes.
  • Agora foi refeito com Vite e TailwindCSS.

• Tela inicial

• Esse projeto tem o objetivo de praticar o uso do React com Tailwindcss, TypeScript e axios para a construção de uma aplicação web.

1. Remoção de transações;
2. Cadastro da data de Entrada e Saída com React DayPicker;
3. Indicação da última data de Entrada e Saída;
4. Indicação do período de tempo em que as transações ocorreram;
5. Formatação de valores com CurrencyFormat, Intl e Date FNS;
6. Melhoria de Performance: Uso do memo para memorizar as linhas da tabela e não renderizar novamente a cada remoção de transação;
7. Troca de temas com tailwindcss respeitando o tema escolho no sistema operacional do usuário;
8. Apesar do projeto original ser disponibilizado no Figma, ele não está no padrão de design ensinado pela própria Rocketseat por ser um pouco antigo, então:
   1. Reconstrução do protótipo no Figma aplicando o padrão de design ensinado pela Rocketseat;
   2. Construção do protótipo com tema escuro
9. Animação na listagem de tarefas com AutoAnimate;
10. Componentes acessíveis com Radix UI e integração com tailwindcss como ToolTip e Modal;
11. Uso do useReducer e Context API do React para o gerenciamento de estado da aplicação em conjunto com a divisão da lógica de actions e reducers para o gerenciamento de estado;
12. Entender e praticar construção de interfaces com tailwindcss aplicando responsividade, breakpoints e variações de componentes com tailwindcss-variants e tailwindcss;
13. Acessibilidade com axe-core e ChromeVox;
14. Publicação com CI/CD por meio da plataforma Netlify.

1. Integração com Api com axios;
2. Uso do json-server para simular uma API;
   1. Isso ta implementando na branch de desenvolvimento(dev)
   2. Na branch de produção, master, os dados são salvos e consumidos a partir do localStorage do navegador;
3. Input de valor monetário personalizado com CurrencyFormat;
4. Input de data personalizado com React DayPicker;
5. Formatação de datas e valores monetários com Date FNS e Intl;
6. Uso do método reducer para calcular o total de entradas, saídas e o saldo;
7. Maior aprofundamento na responsividade com tailwindcss;
8. Contexto de responsividade para modificações mais profundas no visual responsivo;
9. Maior aprofundamento no uso do useReducer para o gerenciamento de estado da aplicação;

• Modal de Registro de Transações

  

• Apesar do projeto original ser disponibilizado no Figma, ele não está no padrão de design ensinado pela própria Rocketseat por ser um pouco antigo, então:
  • Reconstrução do protótipo no Figma aplicando o padrão de design ensinado pela Rocketseat;
  • Construção do protótipo com tema escuro

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

• Responsividade

_ _

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

  1. axe-core/react
  2. axios
  3. AutoAnimate
  4. autoprefixer
  5. CurrencyFormat
  6. Date FNS
  7. DayPicker
  8. Feather Icons
  9. Framer Motion
  10. JavaScript
  11. JSON Server
  12. Netlify
  13. NodeJS
  14. Radix UI
  15. React
  16. React Hook Form
  17. TailwindCSS
  18. TailwindCSS Variants
  19. TypeScript
  20. Vite
  21. Yarn
  22. zod

• Day Picker

https://dtmoney-aszurar.netlify.app//

• OBS: A publicação do projeto foi feito a partir dessa branch(master), em que usamos o localStorage como armazenamento de dados justamente para facilitar a publicação. Pois a ideia é o uso do json-server para simular uma api, e isso é feito na branch dev.

• 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.

• Clonar o projeto:

   git clone https://github.com/Aszurar/dtmoney

• É 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

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

    yarn dev

• Para executar o json-server, basta executar na raiz do projeto:

  • É necessário mudar para a branch de desenvolvimento(dev)

    yarn dev:server