#5 - React: https://dtmoney-aszurar.netlify.app//
- 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.mov
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
-
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.
- Remoção de transações;
- Cadastro da data de Entrada e Saída com React DayPicker;
- Indicação da última data de Entrada e Saída;
- Indicação do período de tempo em que as transações ocorreram;
- Formatação de valores com CurrencyFormat, Intl e Date FNS;
- Melhoria de Performance: Uso do memo para memorizar as linhas da tabela e não renderizar novamente a cada remoção de transação;
- Troca de temas com tailwindcss respeitando o tema escolho no sistema operacional do usuário;
- 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
- Animação na listagem de tarefas com AutoAnimate;
- Componentes acessíveis com Radix UI e integração com tailwindcss como ToolTip e Modal;
- 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;
- Entender e praticar construção de interfaces com tailwindcss aplicando responsividade, breakpoints e variações de componentes com tailwindcss-variants e tailwindcss;
- Acessibilidade com axe-core e ChromeVox;
- Publicação com CI/CD por meio da plataforma Netlify.
- Integração com Api com axios;
- Uso do json-server para simular uma API;
- Isso ta implementando na branch de desenvolvimento(dev)
- Na branch de produção, master, os dados são salvos e consumidos a partir do localStorage do navegador;
- Input de valor monetário personalizado com CurrencyFormat;
- Input de data personalizado com React DayPicker;
- Formatação de datas e valores monetários com Date FNS e Intl;
- Uso do método reducer para calcular o total de entradas, saídas e o saldo;
- Maior aprofundamento na responsividade com tailwindcss;
- Contexto de responsividade para modificações mais profundas no visual responsivo;
- 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
- NodeJS
- ReactJS
- Vite
- Yarn(ou NPM)
- Responsividade
_
_
-
O projeto foi desenvolvido utilizando as seguintes tecnologias:
-
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 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
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.