Skip to content

O projeto dtmoney é uma plataforma que cadastra e mostra as transações, além de calcular o total de depósitos e retiradas e o saldo final do usuário.

Notifications You must be signed in to change notification settings

Aszurar/dtmoney

Repository files navigation

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

dtmoney

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

Netlify Status Vite React Context-API TailwindCSS Radix UI React Hook Form TypeScript JavaScript HTML5 CSS3 Yarn Figma

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


Gif mostrando o projeto

ℹ️ Sobre

  • 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

Tela inicial - modo claro Tela inicial - modo escuro

⁉️ Motivo

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

Funcionalidades novas em relação ao projeto original

  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.

O que foi aprendido de novo?

  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

    Formulário no tema lightFormulário preenchido no tema light Formulário no tema darkFormulário preenchido no tema dark

🎨 Design

  • 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

🌱 Requisitos Mínimos

  1. NodeJS
  2. ReactJS
  3. Vite
  4. Yarn(ou NPM)
  • Responsividade
Tela inicial no modo responsivo e tema light_Formulário no tema light em modo responsivo Tela inicial no modo responsivo e tema dark_Formulário no tema dark em modo responsivo

🚀 Tecnologias Utilizadas

Seletor de datas - modo claro Seletor de datas - modo escuro
---

🚚 Entrega e distribuição continua

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.

design do projeto

📦 Como baixar e executar o projeto

Baixar

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

      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

Desenvolvido por 🌟 Lucas de Lima Martins de Souza.