{"id":23178859,"url":"https://github.com/aszurar/dt-money","last_synced_at":"2026-04-08T18:31:02.048Z","repository":{"id":219321965,"uuid":"732766505","full_name":"Aszurar/DT-money","owner":"Aszurar","description":"O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e por fim calcularmos seu saldo.","archived":false,"fork":false,"pushed_at":"2024-07-23T00:09:37.000Z","size":473,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-12T12:51:55.775Z","etag":null,"topics":["axe","axe-core","axios","css","html","http-requests","javascript","json-server","netlify","radix-ui","react","reactjs","tailwind","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://newdtmoney-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,"publiccode":null,"codemeta":null}},"created_at":"2023-12-17T18:58:52.000Z","updated_at":"2024-07-23T00:09:14.000Z","dependencies_parsed_at":"2024-12-18T07:23:16.091Z","dependency_job_id":null,"html_url":"https://github.com/Aszurar/DT-money","commit_stats":null,"previous_names":["aszurar/dt-money"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Aszurar/DT-money","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FDT-money","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FDT-money/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FDT-money/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FDT-money/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aszurar","download_url":"https://codeload.github.com/Aszurar/DT-money/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2FDT-money/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31568566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"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","axios","css","html","http-requests","javascript","json-server","netlify","radix-ui","react","reactjs","tailwind","tailwindcss","typescript"],"created_at":"2024-12-18T07:12:59.757Z","updated_at":"2026-04-08T18:31:02.024Z","avatar_url":"https://github.com/Aszurar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# #9 - React: **\u003chttps://newdtmoney-aszurar.netlify.app\u003e**\n\n**OBS**: Essa é a branch main, aqui **simulamos uma API REST com json-server para consumir os dados**. Mas a versão publicada esta feita com o localStorage e dados locais para facilitar a publicação, para acessá-la, vá na branch **[feature/localstorage](https://github.com/Aszurar/DT-money/tree/feature/localstorage)**.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/WH58UbA.png\" width=\"1000\" alt=\"Banner\"\u003e\n\u003c/div\u003e\n\n## DT Money\n\n- O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e  por fim calcularmos seu saldo.\n\n- O objetivo desse projeto é entender a forma como podemos consumir APIs, melhorar a performance prevenindo renderizações desnecessárias e praticar um pouco mais a construção de formulários.\n\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://newdtmoney-aszurar.netlify.app\u003e**\n\n  \u003cdiv align=\"center\"\u003e\n    \u003ch3\u003e\u003ca href=\"https://newdtmoney-aszurar.netlify.app\"\u003eDT Money\u003c/a\u003e\u003c/h3\u003e\n\n    \n\n  https://github.com/user-attachments/assets/d2a55c11-5caf-4120-b8e4-8b42ee9eebc0\n\n\n\n  \u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/771472dd-d9ae-4c31-a90c-274c73c071c8/deploy-status)](https://app.netlify.com/sites/newdtmoney-aszurar/deploys) [![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/) [![React](https://img.shields.io/badge/-React-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026link=https://react.dev)](https://react.dev/) [![TailwindCSS](https://img.shields.io/badge/Tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\u0026link=https://tailwindcss.com/)](https://tailwindcss.com/) [![Radix UI](https://img.shields.io/badge/Radix%20UI-161618.svg?style=for-the-badge\u0026logo=radix-ui\u0026logoColor=white)](https://www.radix-ui.com/) [![TypeScript](https://img.shields.io/badge/-TypeScript-%23007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\u0026link=https://www.typescriptlang.org/)](https://www.typescriptlang.org/) [![JavaScript](https://img.shields.io/badge/-JavaScript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026link=https://www.javascript.com/)](https://www.javascript.com/) [![HTML5](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge\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=for-the-badge\u0026logo=css3\u0026link=https://www.w3schools.com/css/)](https://www.w3schools.com/css/) [![Yarn](https://img.shields.io/badge/-yarn-%232C8EBB?style=for-the-badge\u0026logo=yarn\u0026logoColor=white\u0026link=https://yarnpkg.com/)](https://yarnpkg.com/)\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/iq0ZbX9.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=EqQ_cgrPPvI)**\n\n\u003c/div\u003e\n\n---\n\n## :information_source: Sobre\n\n- O projeto tem o intuito de gerenciar seus gastos e ganhos. Podemos registrar entradas, saídas com categorias, valores e  por fim calcularmos seu saldo.\n\n- O objetivo desse projeto é entender a forma como podemos **consumir APIs**, melhorar a performance **prevenindo renderizações desnecessária**s e praticar um pouco mais a construção de formulários.\n\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- Esse projeto é derivado da formação React da **[Rocketseat](https://www.rocketseat.com.br/)**.\n  \n- **Tela inicial**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/uvL1bRU.png\" width=\"1000\" alt=\"Tela Inicial\"\u003e\n\u003c/div\u003e\n\n---\n\n## :interrobang: Motivo\n\n- O objetivo do projeto é entender e praticar os conceitos de como podemos **consumir APIs**, usar os métodos HTTP: **GET, POST, PUT, PATCH e DELETE** em conjunto com **axios**, assim como a própria **configuração do axios**. Além disso, praticamos mais sobre formulários com React Hook Form focando em **componentes Controlados** e focamos também em performance verificando as renderizações dos componentes no navegador por meio da extensão **React Dev Tools** e usamos hooks como **useCallback**, **useMemo** e métodos como **memo** para **prevenir renderizações desnecessárias**.\n\n### Funcionalidades:\n\n  1. Listagem com todos os gastos e ganhos;\n  2. Cadastro de movimentações financeiras com categorias, valores e data atual;\n  3. Total de entradas, saídas e saldo;\n  4. Responsividade para dispositivos móveis.\n  5. Acessibilidade ampliada com o cumprimento de todas regras e avisos do axe-core permitindo a navegação completa de teclado e leitores de voz.\n\n- **Pesquisa de movimentações**\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/mnlSptp.png\" width=\"1000\" alt=\"Pesquisa de movimentações\"\u003e\n\u003c/div\u003e\n\n---\n\n## :art: Design\n\n- O Design foi disponibilizado pela Rocketseat, e pode ser acessado no link abaixo:\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\u003ca href=\"https://www.figma.com/design/XaDRpS7QidcQyb1TFtM5jc/DT-Money-%E2%9C%85?node-id=0-1\u0026t=eoK7W6icuo7wrhig-0\"\u003eDT Money\u003c/a\u003e\u003c/h3\u003e\n\n  [![Design](https://i.imgur.com/frv6KX6.png)](https://www.figma.com/design/XaDRpS7QidcQyb1TFtM5jc/DT-Money-%E2%9C%85?node-id=0-1\u0026t=eoK7W6icuo7wrhig-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- **Cadastro**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/GGz2NxE.png\" width=\"400\" alt=\"Modal de cadastro\"\u003e_\u003cimg src=\"https://i.imgur.com/gU7cmYh.png\" width=\"400\" alt=\"Modal de cadastro preenchido\"\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. **[axios](https://axios-http.com/ptbr/docs/intro)**\n  2. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**\n  3. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**\n  4. **[Json Server](https://github.com/typicode/json-server)**\n  5. **[Netlify](https://www.netlify.com/)**\n  6. **[NodeJS](https://nodejs.org/en/)**\n  7. **[Phosphor Icons](https://phosphoricons.com/)**\n  8. **[Radix UI](https://www.radix-ui.com/)**\n  9. **[React](https://pt1.br.react.dev/)**\n  10. **[React Hook Form](https://react-hook-form.com/)**\n  11. **[Sonner](https://sonner.emilkowal.ski/)**\n  12. **[TailwindCSS](https://tailwindcss.com/)**\n  13. **[Tailwind Variants](https://www.tailwind-variants.org/)**\n  14. **[TypeScript](https://www.typescriptlang.org/)**\n  15. **[Vite](https://vitejs.dev/)**\n  16. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**\n  17. **[zod](https://zod.dev/)**\n\n- **Responsividade**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/9ORJyNv.png\" alt=\"Tela inicial no modo responsivo\" width=\"280\"\u003e_\u003cimg src=\"https://i.imgur.com/YMB4xba.png\" width=\"280\" alt=\"Pesquisa de itens na listagem\"\u003e\n      \u003cimg src=\"https://i.imgur.com/1N59DEX.png\" alt=\"Cadastro de movimentações\" width=\"280\"\u003e_\u003cimg src=\"https://i.imgur.com/SgTQj1o.png\" width=\"280\" alt=\"Cadastro de movimentações\"\u003e\n\u003c/div\u003e\n\n---\n\n## :truck: Entrega e distribuição continua\n\n**\u003chttps://newdtmoney-aszurar.netlify.app\u003e**\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/EZKJNG5.png\" width=\"1000\" alt=\"Projeto publicado no Netlify\"\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/DT-money.git\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- Caso esteja na branch **```main```**:\n  - Terminal 1: Executando front-end\n    \n    ```bash\n      yarn dev\n    ```\n\n  - Terminal 2: Executando servidor json\n\n    ```bash\n      yarn dev:server\n    ```\n\n- Caso esteja na branch **```feature/localstorage```**:\n\n    ```bash\n      yarn dev\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%2Fdt-money","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faszurar%2Fdt-money","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Fdt-money/lists"}