{"id":22761570,"url":"https://github.com/digoarthur/dashgo","last_synced_at":"2025-07-12T22:37:57.955Z","repository":{"id":49100790,"uuid":"517152367","full_name":"DIGOARTHUR/Dashgo","owner":"DIGOARTHUR","description":"IGNITE - Trilha ReactJS/ - Neste projeto é aplicado conceitos de do NextJS, ChakraUI (estilização), ReactQuery (otimização carregamento dos dados), Yup (tratamento caixas de entrada), MirageJS (API), Context, Axios, além dos conceitos básicos de ReacjJS como State, Components, Props. Recursos do JS como: Map.","archived":false,"fork":false,"pushed_at":"2024-11-23T20:59:28.000Z","size":641,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T19:41:46.799Z","etag":null,"topics":["chakra-ui","editorconfig","html5","miragejs","nextjs","reactquery","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DIGOARTHUR.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null}},"created_at":"2022-07-23T19:57:51.000Z","updated_at":"2024-12-31T13:51:09.000Z","dependencies_parsed_at":"2024-02-09T22:31:46.826Z","dependency_job_id":"f7a74f57-e2de-4aa5-9b65-017d41d005cf","html_url":"https://github.com/DIGOARTHUR/Dashgo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DIGOARTHUR/Dashgo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DIGOARTHUR%2FDashgo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DIGOARTHUR%2FDashgo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DIGOARTHUR%2FDashgo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DIGOARTHUR%2FDashgo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DIGOARTHUR","download_url":"https://codeload.github.com/DIGOARTHUR/Dashgo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DIGOARTHUR%2FDashgo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265066218,"owners_count":23706068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["chakra-ui","editorconfig","html5","miragejs","nextjs","reactquery","typescript"],"created_at":"2024-12-11T09:13:56.137Z","updated_at":"2025-07-12T22:37:57.895Z","avatar_url":"https://github.com/DIGOARTHUR.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- REMODELAR O PROJETO POR MEIO DE:\n\nhttps://github.com/matheuslanduci/dashgo\n\n\n--\u003e\n\n\n\n\n\n\u003c!-- VISUALIZAR NO VSCODE  CTRL + K  V --\u003e\n\n\u003c!-- BADGES https://www.youtube.com/watch?v=cRoBt6AZgjc\nhttps://dev.to/envoy_/150-badges-for-github-pnk\n\nBUILD BADGES\nhttps://shields.io\nICONS\nhttps://simpleicons.org/?q=react\n\nEXEMPLO\n\n \u003ca href=\"https://devdigoarthur.notion.site/Map-a87c73417a064372b122bf448f4c6ed4\"\u003e ![Alt ou título da imagem](https://img.shields.io/badge/-JavaScript-/?logo=JavaScript\u0026logoColor=white\u0026color=yellow)\u003ca/\u003e\n\n# JavaScript - Nome que aparece na Bag\n# logo=JavaScript - Muda a logo vide \u003chttps://simpleicons.org/?q=react\u003e\n# color=yellow - Define a cor da bag vide \u003chttps://shields.io\u003e\n# logoColor=white - Define a cor do icone\n--\u003e\n\n \u003c!------------------------------------BANNER PROJECT--\u003e\n\n![image](https://user-images.githubusercontent.com/59892368/193427906-5f71205f-5e64-4016-bc10-b583bd2c0615.png)\n\n\n\n\n \u003c!------------------------------------SHIELDS PROJECT--\u003e\n  ![GitHub last commit](https://img.shields.io/github/last-commit/digoarthur/Dashgo)\n  ![GitHub](https://img.shields.io/github/license/digoarthur/Dashgo)\n  \n  \n\n \u003c!------------------------------------STACKS--\u003e\n#### Stacks:\n\u003cp align=\"left\"\u003e\n\n \u003ca href=\"https://developer.mozilla.org/pt-BR/docs/Web/HTML\"\u003e\u003cimg  alt=\"HTML5\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/222955162-5b69600b-8953-45bd-9144-56fb3491d54e.svg\"\u003e\u003ca/\u003e\n   \u003ca href=\"https://www.typescriptlang.org/\"\u003e\u003cimg  alt=\"TypeScript\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/210762527-ae3afe1f-fe36-46a9-98ad-35dbae4d1adf.svg\"\u003e\u003ca/\u003e\n    \u003ca href=\"https://nextjs.org/\"\u003e\u003cimg  alt=\"NextJS\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/210762514-59814e6d-5cc8-4981-aa11-904b83a51d40.svg\"\u003e\u003ca/\u003e\n    \u003ca href=\"https://chakra-ui.com\"\u003e\u003cimg  alt=\"ChakraUI\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/193428143-7416fe87-3c54-41af-a472-3d00190c6bbb.png\"\u003e\u003ca/\u003e\n     \u003ca href=\"https://miragejs.com\"\u003e\u003cimg  alt=\"MirageJS\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/193429652-8a048e7b-06cd-45b2-9bae-603f626a5deb.png\"\u003e\u003ca/\u003e\n      \u003ca href=\"https://react-query-v3.tanstack.com\"\u003e\u003cimg  alt=\"ReactQuery\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/193429712-4cf6c99e-e4d1-4bb7-bd3f-620c213f33f1.svg\"\u003e\u003ca/\u003e\n\u003c/p\u003e\n  \n   \n\n \u003c!------------------------------------TOOLS--\u003e\n #### Tools:\n \u003ca href=\"https://code.visualstudio.com/\"\u003e\u003cimg  alt=\"Vscode\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/223381414-d3066c8b-c3ee-4fae-943d-481857e88000.svg\"\u003e\u003ca/\u003e\n \u003ca href=\"https://git-scm.com/\"\u003e\u003cimg  alt=\"Git\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/223381109-88617798-75ae-4f3a-bc4a-1210637f818c.svg\"\u003e\u003ca/\u003e\n  \u003ca href=\"https://yarnpkg.com\"\u003e\u003cimg  alt=\"Git\"  width=\"50\" height=\"50\" src=\"https://user-images.githubusercontent.com/59892368/197615074-2e78b82c-b853-455c-8920-272cf1ce6399.svg\"\u003e\u003ca/\u003e    \n  \n  \n\u003chr\u003e\n  \n  \u003c!------------------------------------PROJECT ICON--\u003e\n  \n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"200\" height=\"150\" alt=\"Dashgo\" title=\"Dashgo\" src=\"https://user-images.githubusercontent.com/59892368/193431566-ca6940c0-e883-4dd9-960b-30b2e89a25ea.svg\" /\u003e\n\u003c/h1\u003e\n   \u003c!------------------------------------SUMMARY--\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/DIGOARTHUR/Dashgo#--sobre-a-aplicação-\"\u003eSobre a aplicação\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/DIGOARTHUR/Dashgo#--interfaces-\"\u003e Interfaces\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/DIGOARTHUR/Dashgo#-Stacks-\"\u003e Stacks\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/DIGOARTHUR/Dashgo#-rodando-a-aplicação\"\u003eRodando Aplicação\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/DIGOARTHUR/Dashgo#-por-que--\"\u003ePor que?\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003c/p\u003e  \n\n  \n  \n   \u003c!------------------------------------DESCRIPTION--\u003e\n\n# \u003cimg  alt=\"skills\"  width=\"40\" height=\"40\" src=\"https://user-images.githubusercontent.com/59892368/148622497-164365e8-f6b0-4f40-bc75-a0ed4da6059b.png\"\u003e  Sobre a aplicação \u003c!---write here : talk a little about project: what's does, example.  --\u003e\n\u003e Essa é uma aplicação voltado para o desenvolvimento de Dashboard que aborda apresentação e exemplo de autenticação de login, implementação de uso de gráficos, crud de usuários, listagem. Aqui o destaque vai para o uso do ChakraUI para estilização, MirageJS para implementar uma API no FrontEnd, Autenticação JTW e o uso do ReactQuery para a otimização de carregamento de dado na página. Aborda também conceitos do Yup (tratamento caixas de entrada), MirageJS (API), Context, Axios, além dos conceitos básicos de ReacjJS como State, Components, Props. Recursos do JS como: Map.\n  \n  \n\u003c!------------------------------------LAYOUT --\u003e\n\n\n## FIGMA \n  \u003ca href=\"https://www.figma.com/file/YM4JFm0d4b4TovqmCNrgRW/ig.news?node-id=1%3A2\" target=\"_blank\"\u003e\u003cimg alt=\"Figma\" src=\"https://img.shields.io/badge/figma%20-%23F24E1E.svg?\u0026style=for-the-badge\u0026logo=figma\u0026logoColor=white\"/\u003e\u003c/a\u003e\n  \n# \u003cimg  alt=\"skills\"  width=\"40\" height=\"40\" src=\"https://user-images.githubusercontent.com/59892368/149667468-f228e4e8-c2f0-474d-858d-6b9216f49b2f.png\"\u003e  Interfaces \u003c!---write here : demonstration of the application layout.  --\u003e\n  \n\n\n    \n\n## DESKTOP\n  \n|                             Tela de Login                             |\n| :-------------------------------------------------------------------: |\n|   ![image](https://user-images.githubusercontent.com/59892368/193430890-d28d0594-c8fd-4c95-9418-26a82d0e7495.png) |\n\n  \n  |                               Dashboard                               |\n| :-------------------------------------------------------------------: |\n|   ![image](https://user-images.githubusercontent.com/59892368/193430860-14d266a3-2f2d-4efb-bca2-e5ed665e0401.png)|\n\n  \n|                             Usuários                             |\n| :--------------------------------------------------------------: |\n|   ![image](https://user-images.githubusercontent.com/59892368/193430900-adee4696-c0b2-4232-bed4-3e2728024594.png)|\n  \n\n  |                             Criar Usuário                              |\n| :--------------------------------------------------------------------: |\n|  ![image](https://user-images.githubusercontent.com/59892368/193430907-9c67952d-daa3-4a9c-ae1a-cc901f63eaf4.png)|\n\n\n\n|                            Ferramenta React Query                       |\n| :--------------------------------------------------------------------: |\n|  ![image](https://user-images.githubusercontent.com/59892368/193430914-bb77702f-7159-430f-bfb2-031e003f41b3.png)|\n  \n\n\n  \n  \n  \n  \u003c!------------------------------------LIST: STACKS , LIBS \u0026 TOOLS--\u003e\n\n## \u003cimg  alt=\"skills\"  width=\"40\" height=\"40\" src=\"https://user-images.githubusercontent.com/59892368/197614534-e12fb94a-b5cf-44ff-8d57-debad7299b0b.png\"\u003e Stacks \u003c!---write here: learned concepts; --\u003e\n\n\n  \n### Linguagem\n \u003ca href=\"https://www.typescriptlang.org/\"\u003e ![Alt ou título da imagem](https://img.shields.io/badge/-TypeScript-/?logo=TypeScript\u0026logoColor=white\u0026color=informational)\u003ca/\u003e\n * [`TypeScript`](https://www.typescriptlang.org/) (TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.)\n     * [`Map`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map) (Método que executa uma iteração em uma array com retorno de outra array formatada, trabalhada de diversas formas.)\n     * [`Async/await`](https://www.w3schools.com/js/js_async.asp) (Método utilizado para transformar funções em assíncronas. Usado para chamadas de APIs.)\n     \n     \n### Estilização \n \u003ca href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS\"\u003e ![Alt ou título da imagem](https://img.shields.io/badge/-ChakraUI-/?logo=ChakraUI\u0026logoColor=white\u0026color=9cf)\u003ca/\u003e \n  * [`Styled System`](https://chakra-ui.com/docs/styled-system/style-props)(ChakraUI possibilita a experiência própria de estilização, sendo repassado por Props.)\n\n  \n### Framework / Lib\n \u003ca href=\"https://nextjs.org\"\u003e ![Alt ou título da imagem](https://img.shields.io/badge/-NextJS-/?logo=Next.js\u0026logoColor=white\u0026color=lightgrey)\u003ca/\u003e  \n  * `Estrutura` (Estruturação de pastas e arquivos)\n  * `Evitar conflito CSS`(.modules) \n  * `next/link` (Aplicação de rotas)    \n  * [`Componente`](https://reactjs.org/docs/components-and-props.html) (Uso de componentes)\n  * [`Estado`](https://reactjs.org/docs/state-and-lifecycle.html) (Uso de hooks para controle de estado e ciclo de vida da aplicação)\n  * [`Props`](https://reactjs.org/docs/state-and-lifecycle.html) (Recurso utilizado para passar atributos de um componente pai para outro componente filho)\n \n\n\n\n ### Gerenciador / Pacotes\n \u003ca href=\"https://yarnpkg.com\"\u003e ![Alt ou título da imagem](https://img.shields.io/badge/-Yarn-/?logo=Yarn\u0026logoColor=white\u0026color=blue)\u003ca/\u003e \n *  [`chakra-ui`](https://chakra-ui.com) (Biblioteca que fornece Estilo, Componentes, Hooks para a aplicação React que facilita a construção da IU)\n *  [`miragejs`](https://miragejs.com) (Biblioteca de simulação de API que permite criar, testar e compartilhar um aplicativo JavaScript completo e funcional sem precisar depender de nenhum serviço de back-end.)\n *  [`react-query`](https://tanstack.com/query/v4/?from=reactQueryV3\u0026original=https://react-query-v3.tanstack.com/) (Biblioteca utilizada para otimizar a busca, armazenamento em cache e atualização dos dados remotos) \n *  [`apexcharts`](https://apexcharts.com) (Biblioteca que oferece ferramentas para contrução de gráfico interativos e modernos)\n *  [`axios`](https://axios-http.com/docs/intro) (Biblioteca utilizada para fazer chamadas HTTP Client. Chamadas em uma API ou a partir de um Back-end construído.) \n ### Versionameto\n \u003ca href=\"https://git-scm.com\"\u003e ![Alt ou título da imagem](https://img.shields.io/badge/-Git-/?logo=Git\u0026logoColor=white\u0026color=red)\u003ca/\u003e \n ### IDE\n \u003ca href=\"https://code.visualstudio.com\"\u003e ![Alt ou título da imagem](https://img.shields.io/badge/-VisualStudioCode-/?logo=VisualStudioCode\u0026logoColor=white\u0026color=informational)\u003ca/\u003e \n\n \n  \u003c!------------------------------------RUN APP--\u003e\n \n # \u003cimg  alt=\"skills\"  width=\"40\" height=\"40\" src=\"https://user-images.githubusercontent.com/59892368/142216697-dd93272c-c614-4664-9d63-c4e4dfc3e0f3.gif\"\u003e Rodando a Aplicação\n \n\n1. Clonar repositório:\n\n```\ngit clone https://github.com/DIGOARTHUR/Dashgo.git\n```\n\n2. Instalar dependências\n\n```\nyarn install\n```\n\n3. Rodar aplicativo\n\n```\nyarn dev\n```\n\n4. Acesse `http://localhost:3000/` e navegue pelo site\n\n:warning: 5. Trocar URL do repositorio remoto (caso necessário)\n\n  5.1 Ver qual o repositorio atual\n```\ngit remote -v\n```\n  5.2 Mudar a URL do repositorio remoto\n```\ngit remote set-url origin \u003cLinkDoNovoRepositorio\u003e\n```\n  5.3 Verifique se a mudança foi realizada\n```\ngit remote -v\n```\n\n\n  \u003c!------------------------------------WHY/THANKS---\u003e\n\n\n\n # \u003cimg  alt=\"skills\"  width=\"40\" height=\"40\" src=\"https://user-images.githubusercontent.com/59892368/148622627-c1eaa513-ca90-49e2-b5b8-c11d369becef.png\"\u003e Por que?  \u003c!---write here : motivation that led to created ; why did you do this program?   --\u003e\n Seguindo o curso IGNITE já em reta final, esse foi um dos projetos mais legais dentro  trilha ReactJS. A [@Rocketseat](https://github.com/Rocketseat) sempre trazendo novidades a cada aplicação, ferramentas que abrem fronteiras para aplicação e criatividade em projetos pessoais e profissionais.\n\n ---\nSó tenho agradecer ♥\n  \n  \n  \n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigoarthur%2Fdashgo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigoarthur%2Fdashgo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigoarthur%2Fdashgo/lists"}