https://github.com/aszurar/dtmoney
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.
https://github.com/aszurar/dtmoney
axe axe-core context-api css date-fns hooks html ignite-reactjs javascript radix-ui react react-hook-form reactjs tailwind-variants tailwindcss typescript usereducer usereducer-hook vite zod
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/aszurar/dtmoney
- Owner: Aszurar
- Created: 2021-04-08T13:22:11.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-08T21:17:03.000Z (over 1 year ago)
- Last Synced: 2024-02-08T23:08:01.940Z (over 1 year ago)
- Topics: axe, axe-core, context-api, css, date-fns, hooks, html, ignite-reactjs, javascript, radix-ui, react, react-hook-form, reactjs, tailwind-variants, tailwindcss, typescript, usereducer, usereducer-hook, vite, zod
- Language: TypeScript
- Homepage: https://dtmoney-aszurar.netlify.app//
- Size: 700 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #5 - React: ****
- 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)**.
## 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](https://www.netlify.com/)**.
- Acesse e teste o projeto em: ****
[](https://app.netlify.com/sites/dtmoney-aszurar/deploys) [](https://vitejs.dev/) [](https://react.dev/) [](https://react.dev/learn/scaling-up-with-reducer-and-context) [](https://tailwindcss.com/) [](https://www.radix-ui.com/) [](https://react-hook-form.com/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://yarnpkg.com/) [](https://www.figma.com/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=Cgs2s0G4NWA)**
---
## :information_source: 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](https://react.dev)** com **[TypeScript](https://www.typescriptlang.org/)** como principais tecnologias.
- A animação da listagem é feita com a lib **[AutoAnimate](https://auto-animate.formkit.com/)**.
- A acessibilidade foi levada em consideração, com o uso da lib **[axe-core](https://www.npmjs.com/package/@axe-core/react)** para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do **[Radix UI](https://www.radix-ui.com/)** 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](https://www.rocketseat.com.br/)
- Esse projeto na época construído, foi feito com create react app e Styled Componentes.
- Agora foi refeito com Vite e TailwindCSS.
- **Tela inicial**
---
## :interrobang: 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**
---
## :art: 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
dtmoney
[](https://www.figma.com/file/7LmOydy7HWvNRbmTr1Tkkf/dtmoney-Ignite?type=design&node-id=0-1&mode=design&t=1SGukE0ct1Da1lzu-0)
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. ReactJS
3. Vite
4. Yarn(ou NPM)
- **Responsividade**
_
_
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
2. **[axios](https://axios-http.com/)**
3. **[AutoAnimate](https://auto-animate.formkit.com/)**
4. **[autoprefixer](https://www.npmjs.com/package/autoprefixer)**
5. **[CurrencyFormat](https://github.com/mohitgupta8888/react-currency-format)**
6. **[Date FNS](https://date-fns.org/)**
7. **[DayPicker](https://react-day-picker.js.org/)**
8. **[Feather Icons](https://feathericons.com/)**
9. **[Framer Motion](https://www.framer.com/motion/)**
10. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
11. **[JSON Server](https://github.com/typicode/json-server)**
12. **[Netlify](https://www.netlify.com/)**
13. **[NodeJS](https://nodejs.org/en/)**
14. **[Radix UI](https://www.radix-ui.com/)**
15. **[React](https://pt1.br.react.dev/)**
16. **[React Hook Form](https://react-hook-form.com/)**
17. **[TailwindCSS](https://tailwindcss.com/)**
18. **[TailwindCSS Variants](https://www.tailwind-variants.org/)**
19. **[TypeScript](https://www.typescriptlang.org/)**
20. **[Vite](https://vitejs.dev/)**
21. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**
22. **[zod](https://zod.dev/?id=installation)**
- **Day Picker**
---
## :truck: Entrega e distribuição continua
****
- 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](https://www.netlify.com/)** 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.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
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](https://nodejs.org/en/)
- [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
```bash
yarn dev
```
- Para executar o json-server, basta executar na raiz do projeto:
- É necessário mudar para a branch de desenvolvimento(dev)
```bash
yarn dev:server
```
---
Desenvolvido por :star2: Lucas de Lima Martins de Souza.