{"id":23178910,"url":"https://github.com/aszurar/github-explorer-app","last_synced_at":"2026-05-05T04:39:20.790Z","repository":{"id":118558189,"uuid":"497542223","full_name":"Aszurar/github-explorer-app","owner":"Aszurar","description":"Aplicativo que consome a API do GitHub e exibe informações de qualquer repositório público a partir da busca pelo usuario/nome-do-repositorio, exemplo: facebook/react e usa animações suaves e didáticas com React Native Reanimated!.","archived":false,"fork":false,"pushed_at":"2022-05-30T15:47:43.000Z","size":528,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-10T10:26:56.087Z","etag":null,"topics":["hooks","react","react-native","react-native-gesture-handler","react-native-reanimated","react-native-reanimatedv2","react-navigation","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","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":"2022-05-29T09:18:39.000Z","updated_at":"2023-02-28T17:27:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"29118ff4-4ec0-4b74-bb95-6c457405500e","html_url":"https://github.com/Aszurar/github-explorer-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"rocketseat-education/ignite-template-react-native-github-explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fgithub-explorer-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fgithub-explorer-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fgithub-explorer-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Fgithub-explorer-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aszurar","download_url":"https://codeload.github.com/Aszurar/github-explorer-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276185,"owners_count":20912288,"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":["hooks","react","react-native","react-native-gesture-handler","react-native-reanimated","react-native-reanimatedv2","react-navigation","styled-components","typescript"],"created_at":"2024-12-18T07:13:10.938Z","updated_at":"2026-05-05T04:39:15.757Z","avatar_url":"https://github.com/Aszurar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Github Explorer(app) | Ignite\n\n O projeto **Github Explorer(app)** é um aplicativo que consome a API do GitHub e exibe informações de qualquer repositório público a partir da busca pelo usuario/nome-do-repositorio, exemplo: facebook/react e usa animações suaves e didáticas com React Native Reanimated para melhorar a experiência do usuário. Além disso, podemos navegar entre as issues de cada repositórios e acessá-las apertando no card da issue que será aberto o navedor com a url da issue.\n\n\n\u003ch3 align=\"center\"\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-principais-tecnologias-utilizadas\"\u003eTecnologias\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n  \u003ca href=\"#package-como-baixar-e-executar-o-projeto\"\u003eBaixar e Executar\u003c/a\u003e\u0026nbsp;\n\u003c/h3\u003e\n\n___\n\n\u003cdiv align=\"center\" \u003e\n    \u003cimg src=\"https://i.imgur.com/K2adVaS.gif\" width=\"250\"\u003e\n\u003c/div\u003e\n\n****\n- [**Link do vídeo completo sobre o projeto**](https://www.youtube.com/watch?v=KLNWnMZcdNQ)\n___\n\n## :information_source: Sobre\n\n- O github é uma plataforma de repositórios remotos, podemos subir nossos projetos, nossas branchs, detalhar nossos projetos, criar uma descrição e facilitar o trabalho em equipe de determinados projetos e/ou divulgar nossos projetos para outros desenvolvedores.\n- Assim, o GitHub Explorer simplesmente é um app que conseguimos pesquisar sobre repositórios públicos e ver alguns detalhes deles como favoritos, forks, issues, descrições e acessar as issues desses repositórios.\n- É o penultimo desafio da trilha de React Native do bootcamp Ignite.\n- Para a alimentação dos dados foi usado o GithubAPI, API do Github que disponibiliza informações sobre repositórios públicos e também é usada para o ensinamento de API REST, livre para usar e popular, segue o link:\n  - GithubAPI: https://docs.github.com/pt/rest\n  - Vale ressaltar que essa API possui limitações para a quantidade de requisições que pode receber por hora de um mesmo usuário, no caso seriam 60/hora.\n- Para criação das interfaces foi usado React Native em conjunto com TypeScript e diversas bibliotecas disponíveis para React Native como:\n  - React Navigation: https://reactnavigation.org/\n  - Styled Components: https://www.styled-components.com/\n  - Além disso foi usado o EXPO para melhor produtividade: https://docs.expo.dev/\n- dentre outras, abaixo, na sessão de   \u003ca href=\"#rocket-principais-tecnologias-utilizadas\"\u003eTecnologias\u003c/a\u003e estará mais detalhado.\n\n\n___\n\n## :interrobang: Motivo\n\nCom esse projeto **foi posto em prática os conceitos aprendidos sobre animações no React-Native, uso do React-Native-Reanimated, passando dados via navegação e houve o primeiro contato com o componente de Linking do React-Native que realiza navegações seja para url de sites comuns abrindo navegador, navegando para outros apps ou até mesmo para deep links**.\n\n1. **Home**\n\n\u003cdiv align=\"center\" \u003e\n  \u003cimg src=\"https://i.imgur.com/ACaog7Z.png\" width=\"250\"\u003e____\u003cimg src=\"https://i.imgur.com/gLNxhDY.gif\" width=200\u003e____\u003cimg src=\"https://i.imgur.com/tMrckt4.png\" width=\"250\"\u003e\n\u003c/div\u003e\n\n- Funcionalidades:\n  \n  - Listagem dos repositórios pesquisados.\n    - Perfomática, por meio da Flatlist.\n\n  - Pesquisa de qualquer repositório público.\n    - É feita pelo nome do usuário em conjunto com o respositóio(_Exemplo: facebook/react facebook/react-native_).\n\n  - Animação de deslizamento(Swipeable) em horizontal para esquerda de cada card de repositórios da tela Home provocando assim a ação de remoção daquele repositório.\n    - É perguntando ao usuário com um Alert se ele realmente deseja exluir aquele reposiório que ele provocou o deslizamento/swipeable\n      - Usuário pode cancelar a ação de remoção ou confirmar.\n\n2. **Página de detalhes sobre o Repositório**\n \n\u003cdiv align=\"center\" \u003e\n  \u003cimg src=\"https://i.imgur.com/Dg2ggCz.png\" width=\"250\"\u003e____\u003cimg src=\"https://i.imgur.com/a1wYVIW.gif\" width=250\u003e\n\u003c/div\u003e\n\n - Funcionalidades:\n\n  - Exibição do nome completo do repositório animado e parte da descrição do mesmo\n   \n  - Número total de Stars/Favorites daquele repositório.\n   \n  - Número total de Forks daquele repositório.\n   \n  - Número total de Issues abertas daquele repositório.\n\n\n  - Listagem de todas issues daquele repositório de forma otimizada.\n    \n  - Navegação para cada repositório no Github por meio do navegador padrão do celular\n    - É usado o Linking do React-Native para isso\n\n* **Navegando para o Github web e app**\n\u003cdiv align=\"center\" \u003e\n    \u003cimg src=\"https://i.imgur.com/7ToH3vE.gif\" width=\"175\"\u003e____\u003cimg src=\"https://i.imgur.com/FGl88GH.png\" width=\"175\"\u003e____\u003cimg src=\"https://i.imgur.com/9Y1XkCB.png\" width=\"175\"\u003e____\u003cimg src=\"https://i.imgur.com/IygQqtF.gif\" width=\"175\"\u003e\n\u003c/div\u003e\n\n___\n## :art: Design\n\n[\u003ch2 align=\"center\"\u003eGitHub Explorer App\u003c/h2\u003e]()\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/maJPpLK.png\" width=\"800\"\u003e\n\u003c/div\u003e\n\n1. Código:\n     - É tentando **manter o padrão que é ensinado na Rocketseat** para o código mais limpo, organizado de facil entendimento com sua estrutura de pastas também.\n     - Em geral foi todo código foi **feito com TypeScript** de forma a manter **sempre uma tipagem/interface** para cada elemento que foi usado tanto para **facilitar o desenvolvimento e entendimento do código tanto para o dev quanto para o VsCode/IDE**, quanto para **manter a consistência do código e a IDE possa sugerir correções e recomendações de forma mais efetiva**.\n2. Estilização:\n     - Toda estilização foi realizada com **styled-components**, que é uma biblioteca de css que tem como objetivo facilitar a criação de estilos e componentes de forma mais eficiente e similar a web com ReactJS, assim podemos **manter o mesmo padrão para web e mobile facilitando o desenvolvimento.**\n     - Foi criado um **tema global** com as **fontes e cores** do projeto que são passadas no Figma.\n     - A fonte usada foi a **Roboto**, que é uma fonte popular e livre para uso, está na biblioteca do Google Fonts. Foi instalada no projeto como fonte externa tanto para o **android quanto para o IOS**.\n     - Para lidar com SVG, JSON, PNG foi necessário realizar uma configuração para que o TypeScript reconheça tais arquivos.\n3. React Native\n     - A estrutura dos componentes foi feita por meio de funções, que são **funções que retornam um componente React.**\n     - A pasta de um componente é composta por um arquivo chamado **index.tsx** e um arquivo de estilização **styles.ts**.\n     - Foi usado o yarn como gerenciador de pacotes.\n     - É utilizado a **react-native-gesture-handler** para criar os botões da aplicação mantendo assim a consistência do dos efeitos de reação do componente entre as platformas IOS e Android, além disso, também é usado presseables e outros tipos de botões  para realização das animações evitando conflitos com os botões do gesture handler\n4. Expo\n     - É usado o EXPO para garantir uma melhor produtividade e configuração das libs para seus usos e inicialização do app. \n___\n## :seedling: Requisitos Mínimos\n\n- Android Studio\n- Celular(Opcional)\n- Expo\n- Node.js\n- React\n- React-Native\n- TypeScript\n- Yarn(ou NPM)\n\n___\n\n## :rocket: Principais Tecnologias Utilizadas\n\nO projeto foi desenvolvido utilizando as seguintes tecnologias\n- [Android Studio](https://developer.android.com/studio)\n- [Axios](https://www.npmjs.com/package/axios)\n- [Javascript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)\n- [NodeJS](https://nodejs.org/en/)\n- [React](https://pt-br.reactjs.org/)\n- [React Native](https://reactnative.dev/)\n- [React Navigation](https://reactnavigation.org/)\n   - [Stack Navigator](https://reactnavigation.org/docs/stack-navigator/)\n- [Expo Vector Icons](https://www.npmjs.com/package/react-native-feather)\n  - [Feather Icons](https://feathericons.com/)\n- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)\n  - [RectButton](https://docs.swmansion.com/react-native-gesture-handler/docs/next/api/components/buttons/#rectbutton)\n- [React Native Iphone X Helper](https://github.com/ptelad/react-native-iphone-x-helper#readme)\n- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/)\n- [React Native Responsive Fontsize](https://www.npmjs.com/package/react-native-responsive-fontsize)\n- [React Native SVG](https://github.com/react-native-svg/react-native-svg)\n- [Styled Components](https://www.styled-components.com/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)\n___\n## :package: Como baixar e executar o projeto\n\n  - Clonar o projeto:\n    ```bash\n     git clone https://github.com/Aszurar/github-explorer-app.git\n    ```\n  - É necessário a instalação do **yarn** de acordo com seu sistema operacional, para isso veja como no site do [Yarn](https://github.com/Aszurar/SavePass.git)\n  - Instalação das dependências:\n    - Execute o comando abaixo dentro da pasta do projeto\n    ```bash\n      yarn\n    ```\n - É necessário a instalação do emulador [Android Studios](https://developer.android.com/studio) e das tecnologias requesitadas acima no:seedling:   \u003ca href=\"#seedling-requisitos-mínimos\"\u003e**Requisitos**\u003c/a\u003e\n - Também é necessário a instalação/configuração de outras tecnologias, para isso siga os passos indicados nessa página de acordo com seu sistema operacional: [Executando uma Aplicação React-Native emulando Windows/Linux/MacOS ou direto no dispositivo mobile Android/IOS](https://react-native.rocketseat.dev/android/linux)\n Execução - Abra a pasta do projeto com alguma IDE(Vscode) ou simplesmente abra o terminal na pasta do projeto e execute o comando abaixo:\n```bash\n   expo start\n```\nAbra o emulador ou conecte o celular(É necessário a instalação do Expo Go) e execute:\n```bash\n    a\n```\nLembrando que, caso seja executado pelo emulador, o ideal é sempre deixa-lo aberto antes de aplicar os comandos acima.\n\n\n___\nDesenvolvido por :star2: Lucas de Lima Martins de Souza.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Fgithub-explorer-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faszurar%2Fgithub-explorer-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Fgithub-explorer-app/lists"}