{"id":23178874,"url":"https://github.com/aszurar/dtmoney","last_synced_at":"2026-04-07T08:01:34.731Z","repository":{"id":118558188,"uuid":"355916248","full_name":"Aszurar/dtmoney","owner":"Aszurar","description":"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.","archived":false,"fork":false,"pushed_at":"2024-04-24T14:04:22.000Z","size":746,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-24T21:29:14.765Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://dtmoney-aszurar.netlify.app//","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aszurar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-04-08T13:22:11.000Z","updated_at":"2024-04-24T14:04:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"86f310fd-7697-49b0-90d1-2eb459925ce5","html_url":"https://github.com/Aszurar/dtmoney","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Aszurar/dtmoney","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fdtmoney","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fdtmoney/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fdtmoney/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fdtmoney/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aszurar","download_url":"https://codeload.github.com/Aszurar/dtmoney/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fdtmoney/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31504897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-12-18T07:13:02.414Z","updated_at":"2026-04-07T08:01:34.700Z","avatar_url":"https://github.com/Aszurar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# #5 - React: **\u003chttps://dtmoney-aszurar.netlify.app//\u003e**\n\n- 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)**.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/HOETMuv.png\" width=\"1000\" alt=\"Banner\"\u003e\n\u003c/div\u003e\n\n## dtmoney\n\n- 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.\n- 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).\n  \n- 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.\n- O site foi publicado com CI/CD por meio da plataforma **[Netlify](https://www.netlify.com/)**.\n- Acesse e teste o projeto em: **\u003chttps://dtmoney-aszurar.netlify.app//\u003e**\n\n  \u003cdiv align=\"center\"\u003e\n    \u003ch3\u003e\u003ca href=\"https://dtmoney-aszurar.netlify.app//\"\u003edtmoney\u003c/a\u003e\u003c/h3\u003e\n\n\n\n\n    https://github.com/Aszurar/dtmoney/assets/64987824/5eb6510c-9c78-4a54-bdab-7bdff901449f\n\n\n\n\n\n  \u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/7d45adec-d8f8-499a-b2da-24950dd971b0/deploy-status)](https://app.netlify.com/sites/dtmoney-aszurar/deploys) [![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=flat\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/) [![React](https://img.shields.io/badge/-React-%2320232a.svg?style=flat\u0026logo=react\u0026link=https://react.dev)](https://react.dev/)  [![Context-API](https://img.shields.io/badge/Context--Api-000000?style=flat\u0026logo=react)](https://react.dev/learn/scaling-up-with-reducer-and-context)  [![TailwindCSS](https://img.shields.io/badge/Tailwindcss-%2338B2AC.svg?style=flat\u0026logo=tailwind-css\u0026logoColor=white\u0026link=https://tailwindcss.com/)](https://tailwindcss.com/)  [![Radix UI](https://img.shields.io/badge/Radix%20UI-161618.svg?style=flat\u0026logo=radix-ui\u0026logoColor=white)](https://www.radix-ui.com/)  [![React Hook Form](https://img.shields.io/badge/React%20Hook%20Form-%23EC5990.svg?style=flat\u0026logo=reacthookform\u0026logoColor=white)](https://react-hook-form.com/)  [![TypeScript](https://img.shields.io/badge/-TypeScript-%23007ACC?style=?style=flat-square\u0026logo=typescript\u0026logoColor=white\u0026link=https://www.typescriptlang.org/)](https://www.typescriptlang.org/) [![JavaScript](https://img.shields.io/badge/-JavaScript-%23323330.svg?style=flat\u0026logo=javascript\u0026link=https://www.javascript.com/)](https://www.javascript.com/) [![HTML5](https://img.shields.io/badge/-HTML5-E34F26?style=flat\u0026logo=html5\u0026logoColor=white\u0026link=https://developer.mozilla.org/pt-BR/docs/Web/HTML)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [![CSS3](https://img.shields.io/badge/-CSS3-1572B6?style=flat\u0026logo=css3\u0026link=https://www.w3schools.com/css/)](https://www.w3schools.com/css/) [![Yarn](https://img.shields.io/badge/-yarn-%232C8EBB?style=flat\u0026logo=yarn\u0026logoColor=white\u0026link=https://yarnpkg.com/)](https://yarnpkg.com/)  [![Figma](https://img.shields.io/badge/Figma-%23F24E1E.svg?style=flat\u0026logo=figma\u0026logoColor=white)](https://www.figma.com/)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n        \u003ch2\u003e\n          \u003ca href=\"#information_source-sobre\"\u003eSobre\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#interrobang-motivo\"\u003eMotivo\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#art-design\"\u003eDesign\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#seedling-requisitos-mínimos\"\u003eRequisitos\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#rocket-tecnologias-utilizadas\"\u003eTecnologias\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca\n          href=\"#truck-entrega-e-distribuição-continua\"\u003eCI/CD\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#package-como-baixar-e-executar-o-projeto\"\u003eBaixar e Executar\u003c/a\u003e\u0026nbsp;\n        \u003c/h2\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/6nO8HMN.gif\" width=\"400\" alt=\"Gif mostrando o projeto\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\" \u003e\n\n**[Vídeo no Youtube](https://www.youtube.com/watch?v=Cgs2s0G4NWA)**\n\n\u003c/div\u003e\n\n---\n\n## :information_source: Sobre\n\n- O projeto **dtmoney** pode ser um projeto simples, mas que foi abordado conceitos importantes para o desenvolvimento de web apps com React.\n- 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.\n- Usamos **[React](https://react.dev)** com **[TypeScript](https://www.typescriptlang.org/)** como principais tecnologias.\n- A animação da listagem é feita com a lib **[AutoAnimate](https://auto-animate.formkit.com/)**.\n- 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.\n\n- O projeto dtmoney é o 2º projeto realizado em aula do bootcamp Ignite da trilha ReactJS de 2021 da [Rocketseat](https://www.rocketseat.com.br/)\n  - Esse projeto na época construído, foi feito com create react app e Styled Componentes.\n  - Agora foi refeito com Vite e TailwindCSS.\n  \n- **Tela inicial**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/pdtcMxY.png\" width=\"1000\" alt=\"Tela inicial - modo claro\"\u003e\n      \u003cimg src=\"https://i.imgur.com/fDI8ZP6.png\" width=\"1000\" alt=\"Tela inicial - modo escuro\"\u003e\n\u003c/div\u003e\n\n---\n\n## :interrobang: Motivo\n\n- 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. \n\n### Funcionalidades novas em relação ao projeto original\n\n  1. Remoção de transações;\n  2. Cadastro da data de Entrada e Saída com **React DayPicker**;\n  3. Indicação da última data de Entrada e Saída;\n  4. Indicação do período de tempo em que as transações ocorreram;\n  5. Formatação de valores com **CurrencyFormat**, **Intl** e **Date FNS**;\n  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;\n  7. **Troca de temas** com **tailwindcss** respeitando o tema escolho no sistema operacional do usuário;\n  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:\n     1. Reconstrução do protótipo no Figma aplicando o padrão de design ensinado pela Rocketseat;\n     2. Construção do protótipo com tema escuro\n  9. **Animação** na listagem de tarefas com **AutoAnimate**;\n  10. **Componentes acessíveis** com **Radix UI** e integração com **tailwindcss** como ToolTip e Modal;\n  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;\n  12. Entender e praticar construção de interfaces com **tailwindcss** aplicando responsividade, breakpoints e variações de componentes com **tailwindcss-variants** e **tailwindcss**;\n  13. **Acessibilidade** com **axe-core** e **ChromeVox**;\n  14. **Publicação** com **CI/CD** por meio da plataforma **Netlify**.\n\n### O que foi aprendido de novo?\n\n  1. **Integração com Api** com **axios**;\n  2. Uso do json-server para simular uma API;\n     1. Isso ta implementando na branch de desenvolvimento(dev)\n     2. Na branch de produção, master, os dados são salvos e consumidos a partir do localStorage do navegador;\n  3. Input de valor monetário personalizado com **CurrencyFormat**;\n  4. Input de data personalizado com **React DayPicker**;\n  5. Formatação de datas e valores monetários com **Date FNS** e **Intl**;\n  6. Uso do método **reducer** para calcular o total de entradas, saídas e o saldo;\n  7. Maior **aprofundamento na responsividade** com tailwindcss;\n  8. **Contexto de responsividade** para modificações mais profundas no visual responsivo;\n  9.  Maior **aprofundamento no uso do useReducer** para o gerenciamento de estado da aplicação;\n  \n- **Modal de Registro de Transações**\n\n  \u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/JtZkHWq.png\" width=\"1000\" alt=\"Formulário no tema light\"\u003e\u003cimg src=\"https://i.imgur.com/VDOy2tI.png\" width=\"1000\" alt=\"Formulário preenchido no tema light\"\u003e\n      \u003cimg src=\"https://i.imgur.com/tE52ZKr.png\" width=\"1000\"  alt=\"Formulário no tema dark\"\u003e\u003cimg src=\"https://i.imgur.com/GfWZvlW.png\" width=\"1000\" alt=\"Formulário preenchido no tema dark\"\u003e\n  \u003c/div\u003e\n\n---\n\n## :art: Design\n\n- 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:\n  - Reconstrução do protótipo no Figma aplicando o padrão de design ensinado pela Rocketseat;\n  - Construção do protótipo com tema escuro\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\u003ca href=\"https://www.figma.com/file/7LmOydy7HWvNRbmTr1Tkkf/dtmoney-Ignite?type=design\u0026node-id=0-1\u0026mode=design\u0026t=1SGukE0ct1Da1lzu-0\"\u003edtmoney\u003c/a\u003e\u003c/h3\u003e\n\n  [![Design](https://i.imgur.com/KtwG6Zs.png)](https://www.figma.com/file/7LmOydy7HWvNRbmTr1Tkkf/dtmoney-Ignite?type=design\u0026node-id=0-1\u0026mode=design\u0026t=1SGukE0ct1Da1lzu-0)\n\u003c/div\u003e\n\n---\n\n## :seedling: Requisitos Mínimos\n\n  1. NodeJS\n  2. ReactJS\n  3. Vite\n  4. Yarn(ou NPM)\n  \n- **Responsividade**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/a9jCeRM.png\" alt=\"Tela inicial no modo responsivo e tema light\" width=\"280\"\u003e_\u003cimg src=\"https://i.imgur.com/1PYAfbo.png\" width=\"280\" alt=\"Formulário no tema light em modo responsivo\"\u003e\n      \u003cimg src=\"https://i.imgur.com/I4oLSJg.png\" alt=\"Tela inicial no modo responsivo e tema dark\" width=\"280\"\u003e_\u003cimg src=\"https://i.imgur.com/1gV9SgG.png\" width=\"280\" alt=\"Formulário no tema dark em modo responsivo\"\u003e\n\u003c/div\u003e\n\n---\n\n## :rocket: Tecnologias Utilizadas\n\n- O projeto foi desenvolvido utilizando as seguintes tecnologias:\n\n  1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**\n  2. **[axios](https://axios-http.com/)**\n  3. **[AutoAnimate](https://auto-animate.formkit.com/)**\n  4. **[autoprefixer](https://www.npmjs.com/package/autoprefixer)**\n  5. **[CurrencyFormat](https://github.com/mohitgupta8888/react-currency-format)**\n  6. **[Date FNS](https://date-fns.org/)**\n  7. **[DayPicker](https://react-day-picker.js.org/)**\n  8. **[Feather Icons](https://feathericons.com/)**\n  9. **[Framer Motion](https://www.framer.com/motion/)**\n  10. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**\n  11. **[JSON Server](https://github.com/typicode/json-server)**\n  12. **[Netlify](https://www.netlify.com/)**\n  13. **[NodeJS](https://nodejs.org/en/)**\n  14. **[Radix UI](https://www.radix-ui.com/)**\n  15. **[React](https://pt1.br.react.dev/)**\n  16. **[React Hook Form](https://react-hook-form.com/)**\n  17. **[TailwindCSS](https://tailwindcss.com/)**\n  18. **[TailwindCSS Variants](https://www.tailwind-variants.org/)**\n  19. **[TypeScript](https://www.typescriptlang.org/)**\n  20. **[Vite](https://vitejs.dev/)**\n  21. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**\n  22. **[zod](https://zod.dev/?id=installation)**\n\n- **Day Picker**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/DiNlElf.png\" alt=\"Seletor de datas - modo claro\" width=\"1000\"\u003e\n      \u003cimg src=\"https://i.imgur.com/gAXJlpN.png\" alt=\"Seletor de datas - modo escuro\" width=\"1000\"\u003e\n\u003c/div\u003e\n---\n\n## :truck: Entrega e distribuição continua\n\n**\u003chttps://dtmoney-aszurar.netlify.app//\u003e**\n\n- 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.\n  \n- 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.\n- 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.\n- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.\n\n\u003cdiv align=\"center\"\u003e\n   \u003cimg src=\"https://i.imgur.com/O5F1MjB.png\" width=\"1000\" alt=\"design do projeto\"\u003e\n\u003c/div\u003e\n\n---\n\n## :package: Como baixar e executar o projeto\n\n### Baixar\n\n- Clonar o projeto:\n\n  ```bash\n   git clone https://github.com/Aszurar/dtmoney\n  ```\n\n- É 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:\n  - [Instalação do NodeJS](https://nodejs.org/en/)\n  - [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)\n\n- Instalação das dependências:\n  - Execute o comando abaixo dentro da pasta do projeto\n\n    ```bash\n      yarn\n    ```\n\n### Execução\n\n- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:\n\n  ```bash\n    yarn dev\n  ```\n\n- Para executar o json-server, basta executar na raiz do projeto:\n  - É necessário mudar para a branch de desenvolvimento(dev)\n\n  ```bash\n    yarn dev:server\n  ```\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nDesenvolvido por :star2: Lucas de Lima Martins de Souza.\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Fdtmoney","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faszurar%2Fdtmoney","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Fdtmoney/lists"}