{"id":25855573,"url":"https://github.com/mathrb22/semanaomnistack11","last_synced_at":"2026-03-03T11:37:29.106Z","repository":{"id":41686141,"uuid":"250053585","full_name":"mathrb22/SemanaOmnistack11","owner":"mathrb22","description":"Be the Hero - Aplicação desenvolvida durante a 11ª Semana OmniStack da @Rocketseat, com foco na linguagem JavaScript e as tecnologias Nodejs, React e React-Native.","archived":false,"fork":false,"pushed_at":"2023-01-24T02:01:31.000Z","size":43379,"stargazers_count":3,"open_issues_count":30,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-05-23T02:36:28.581Z","etag":null,"topics":["aplicativo","backend","bethehero","frontend","full-stack-application","javascript","mobile-app","ngos","node","nodejs","omnistack","ongs","react-native","reactjs","semana-omnistack","semana-omnistack-11","single-page-app","tdd","ui","web-application"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mathrb22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-25T18:04:52.000Z","updated_at":"2023-02-27T05:24:11.000Z","dependencies_parsed_at":"2023-02-13T10:46:08.635Z","dependency_job_id":null,"html_url":"https://github.com/mathrb22/SemanaOmnistack11","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2FSemanaOmnistack11","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2FSemanaOmnistack11/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2FSemanaOmnistack11/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2FSemanaOmnistack11/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathrb22","download_url":"https://codeload.github.com/mathrb22/SemanaOmnistack11/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241396922,"owners_count":19956445,"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":["aplicativo","backend","bethehero","frontend","full-stack-application","javascript","mobile-app","ngos","node","nodejs","omnistack","ongs","react-native","reactjs","semana-omnistack","semana-omnistack-11","single-page-app","tdd","ui","web-application"],"created_at":"2025-03-01T17:19:11.401Z","updated_at":"2026-03-03T11:37:29.073Z","avatar_url":"https://github.com/mathrb22.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\"\u003e\n\n\u003ch1 align=\"center\"\u003e\n    \u003cimg alt=\"Be The Hero\" title=\"#logo\" src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/logo.svg\" width=\"250px\" /\u003e\n\u003c/h1\u003e\n\n\u003ch2 align=\"center\"\u003e\n  Be the Hero - Semana OmniStack 11\n\u003c/h2\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/intro_preview(md).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n\u003c/div\u003e\n\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"https://github.com/mathrb22\"\u003e\n    \u003cimg alt=\"Made by mathrb22\" src=\"https://img.shields.io/badge/made%20by-mathrb22-yellow\"\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"GitHub Language Count\" src=\"https://img.shields.io/github/languages/count/mathrb22/SemanaOmnistack11\"\u003e\n  \u003ca href=\"https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V12.md#12.16.1\"\u003e\n    \u003cimg alt=\"Nodejs Latest Version\" src=\"https://img.shields.io/badge/node.js@lts-12.16.1-informational?logo=Node.JS\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"React Version\" href=\"https://github.com/facebook/react/blob/master/CHANGELOG.md#16131-march-19-2020\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/react-16.13.1-informational?logo=react\"\u003e\u003c/img\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"GitHub Repo Size\" src=\"https://img.shields.io/github/repo-size/mathrb22/SemanaOmnistack11\"\u003e\n  \u003ca href=\"https://github.com/mathrb22/SemanaOmnistack11/commits/master\"\u003e\n    \u003cimg alt=\"GitHub Last Commit\" src=\"https://img.shields.io/github/last-commit/mathrb22/SemanaOmnistack11\"\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"GitHub Issues\" src=\"https://img.shields.io/github/issues/mathrb22/SemanaOmnistack11\"\u003e\n  \u003ca href=\"https://github.com/mathrb22/SemanaOmnistack11/pulls\"\u003e\n      \u003cimg alt=\"Pull Requests Welcome\" src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\"\u003e\n   \u003c/a\u003e\n  \u003ca href=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/mathrb22/SemanaOmnistack11\"\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\n [**Sobre**](#-sobre) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n [**Tecnologias utilizadas**](#-tecnologias-utilizadas) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n [**Layout**](#-layout) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n [**Instalação e execução**](#-instalação-e-execução) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n [**Como contribuir**](#-como-contribuir) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n [**Contato**](#-contato) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n [**Licença**](#-licença)\n\n---\n\n## 📃 Sobre\n\n**Be The Hero** é um projeto desenvolvido durante a **11ª Semana OmniStack**, um evento online com duração de uma semana, onde cada dia foi desenvolvida uma etapa da aplicação, desde o back-end, front-end (interface do usuário), até a API mobile (aplicativo para celular).\n\nO **objetivo** do projeto é de conectar pessoas que desejam fazer contribuições monetárias a **ONGs** (Organizações não governamentais) que precisam de ajuda.\n\nEste sistema possui a **interface web**, com a parte administrativa exclusiva para as ONGs. Estas tem a possibilidade de se cadastrar, fazer login, cadastrar e deletar casos.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/pag_profile_mac(md2).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\nExiste também o **aplicativo para dispositivos móveis** (Android e iOS), desenvolvido em **React Native**, contendo somente a seção dos heróis. Na página inicial é possível visualizar uma lista completa com todos os casos cadastrados pelas ONGs no banco de dados.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/mobile_app(md).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\nAlém disso, os usuários que acessarem o aplicativo, podem ver mais **detalhes** de um caso específico, como o nome da ONG, cidade, estado e descrição. Caso desejem contribuir com alguma quantia, podem entrar em contato por **e-mail** ou **Whatsapp**, diretamente pelo app.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/be_the_hero_api(md).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003e Este projeto foi desenvolvido para fins de estudo e aprendizado próprio, com foco na linguagem JavaScript e as demais ferramentas e tecnologias da OmniStack. Portanto, será atualizado constantemente. \n\n## 🚀 Tecnologias utilizadas\n\nEste projeto foi desenvolvido com as seguintes tecnologias:\n- [**Visual Studio Code**](https://code.visualstudio.com/): um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS, recomendado para o desenvolvimento de aplicações web;\n- [**Node.js**](https://nodejs.org/en/): um interpretador de JavaScript assíncrono com código aberto orientado a eventos;\n- [**React**](https://reactjs.org): uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário (frontend) em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros;\n- [**React Native**](https://facebook.github.io/react-native/): uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos para os sistemas Android e IOS de forma nativa;\n- [**Expo**](https://expo.io/): uma ferramenta utilizada no desenvolvimento mobile com React Native que permite o fácil acesso às API's nativas do dispositivo sem precisar instalar qualquer dependência ou alterar código nativo;\n\nOutros recursos utilizados:\n- [**Insomnia**](https://insomnia.rest/): um poderoso cliente de API REST com gerenciamento de cookies, variáveis de ambiente, geração de código e autenticação para Mac, Window e Linux;\n- [**Express**](https://expressjs.com/pt-br/): um popular framework web estruturado, escrito em JavaScript que roda sobre o ambiente node.js em tempo de execução;\n- [**Knex**](http://knexjs.org/): um query builder em JavaScript para bancos de dados relacionais, como PostgreSQL, MySQL, SQLite3, e Oracle;\n- [**SQLite3**](https://www.sqlite.org/version3.html): uma biblioteca open-source desenvolvida em linguagem C, que funciona como um gerenciador de bancos de dados relacionais dentro da própria aplicação, sem a necessidade de utilizar um sistema separado.\n\n## 📟 Layout\nO layout da aplicação **Be The Hero** foi desenvolvido pela equipe da [**Rocketseat**](https://github.com/Rocketseat/) através da ferramenta online [**Figma**](https://www.figma.com), um software de prototipação voltado para **UI Design (design de interface)**.\nVocê pode acessar o layout através deste link: [**Be The Hero - OmniStack 11**](https://www.figma.com/file/2C2yvw7jsCOGmaNUDftX9n/Be-The-Hero---OmniStack-11?node-id=0%3A1).\n\n\u003e **OBS:** O layout deste repositório contém diversas modificações feitas por mim mesmo durante o desenvolvimento da interface gráfica.\n\n\u003cfigure\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/pag_login(md).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n  \u003cfigcaption\u003ePágina de Login\u003c/figcaption\u003e\n\u003c/div\u003e\n\u003c/figure\u003e\n\u003cbr/\u003e\n\n\u003cfigure\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/pag_cadastro(md).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n  \u003cfigcaption\u003ePágina de cadastro de ONGs\u003c/figcaption\u003e\n\u003c/div\u003e\n\u003c/figure\u003e\n\u003cbr/\u003e\n\n\u003cfigure\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/pag_profile(md).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n  \u003cfigcaption\u003ePágina de perfil da ONG\u003c/figcaption\u003e\n\u003c/div\u003e\n\u003c/figure\u003e\n\u003cbr/\u003e\n\n\u003cfigure\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/pag_cadastro_casos(md).jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n  \u003cfigcaption\u003ePágina de cadastro de novos casos\u003c/figcaption\u003e\n\u003c/div\u003e\n\u003c/figure\u003e\n\u003cbr/\u003e\n\n## 🔧 Instalação e execução\n\nPara você poder instalar e executar esta aplicação, terá que ter instalado em sua máquina o [**Git**](https://git-scm.com/) e o [**Node.js**](https://nodejs.org/en/).\nEm seguida, no terminal execute os seguintes comandos segundo as instruções:  \n### Backend\n\n1. Clone este repositório:\n    ```bash\n    $ git clone https://github.com/mathrb22/SemanaOmnistack11.git\n    ```\n2. Vá até a pasta backend do repositório:\n    ```bash\n    $ cd backend\n    ```\n3. Instale as dependências do projeto:\n    ```bash\n    $ npm install\n    ```\n4. Execute as migrations (banco de dados):\n    ```bash\n    $ npx knex migrate:latest\n    ```\n5. Execute o servidor:\n    ```bash\n    $ npm start\n    ```\n6. Para importar a Workplace do **Insomnia** com todas as rotas e requests da aplicação, abra o aplicativo Insomnia. No menu principal, acesse as preferências, selecione **DATA**, e \"Import Data\", como mostram as imagens a seguir:\n\n    \u003cdiv align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/insomnia_import.jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n      \u003cfigcaption\u003eImportando a Workplace do Insomnia\u003c/figcaption\u003e\n    \u003c/div\u003e\n    \u003cbr/\u003e\n    \u003cdiv align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/.github/insomnia_import_file.jpg\" width=\"100%\" alt=\"imagem mockup\"\u003e\n      \u003cfigcaption\u003eSelecione o arquivo \u003cb\u003eBTH_Insomnia_Workplace.json\u003c/b\u003e\u003c/figcaption\u003e\n    \u003c/div\u003e\n\n---\n### Frontend (Web)\n\n1. Vá até a pasta frontend do repositório:\n    ```bash\n    $ cd frontend\n    ```\n2. Instale as dependências:\n    ```bash\n    $ npm install\n    ```\n3. Execute a aplicação web:\n    ```bash\n    $ npm start\n    ```\n\n- Acesse a aplicação pela rota _**localhost:3000**_.\n---\n### Mobile\n\n1. Vá até a pasta mobile do repositório:\n    ```bash\n    $ cd mobile\n    ```\n2. Instale as dependências:\n    ```bash\n    $ npm install\n    ```\n    \u003eVerifique se o Expo foi instalado normalmente, executando ``expo -h``. Caso retorne algum erro:\n    * Instale o Expo na pasta raiz de forma GLOBAL\n       ```bash\n       $ npm install -g expo-cli\n       ```\n3. Execute a aplicação mobile:\n    ```bash\n    $ npm start\n    ```\n- Para executar a aplicação mobile, você pode instalar o aplicativo **Expo** disponível na [**Google Play**](https://play.google.com/store/apps/details?id=host.exp.exponent) e [**App Store**](https://apps.apple.com/br/app/expo-client/id982107779). Este aplicativo permite que você visualize a API em seu próprio celular. \n- Antes de executar: vá até o arquivo **``api.js``** acessando as pastas ``mobile / src / services / api.js``, adicione seu endereço IP e salve o arquivo;\n- Agora, verifique se o seu computador está conectado à mesma rede que o dispositivo móvel.\n- Ao executar a API com **``npm start``**, aguarde o carregamento dos scripts. Será aberto uma interface do **Expo** em seu navegador com o título: _**\"Be The Hero on Expo Developer Tools\"**_. Aqui é possível visualizar o status de Metro Builder, configurações de conexão e outras opções como:\n  \n  \u003e* Run on Android device/emulator\n  \u003e* Run on iOS simulator\n  \u003e* Run in web browser\n  \u003e* Send link with email…\n  \u003e* Publish or republish project…\n\n- Após o **Expo** estar instalado em seu celular, abra-o, escaneie o QR Code e a API será executada.\n- Caso queira executar a API pelo computador, instale algum **emulador Android/iOS**.\n\n---\n### Executando testes\n\nPara a realização dos testes da aplicação, foi utilizado o pacote [**Celebrate**](https://github.com/arb/celebrate), que realiza uma integração do Express com a [**Joi**](https://github.com/hapijs/joi), a mais poderosa biblioteca de validação de dados do JavaScript.\n\nA principal ferramenta utilizada foi o [**Jest**](https://jestjs.io/) - um **framework de testes** do JavaScript. Também foram utilizados o [**Cross-Env**](https://www.npmjs.com/package/cross-env) e [**SuperTest**](https://www.npmjs.com/package/supertest).\n\nVocê pode executar o teste da aplicação digitando no terminal: **``npm test``**\n\n\n## 💡 Como contribuir\n\n- Faça um **_fork_** desse repositório;\n- Crie um **branch** para a sua feature: `git checkout -b minha-feature`;\n- Faça um **commit** com suas alterações: `git commit -m 'feat: Minha nova feature'`;\n- Faça um **push** para o seu branch: `git push origin minha-feature`;\n- Faça um **pull request** com sua feature;\n\nPull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma _**issue**_ ou entre em contato comigo.\n\n## 📲 Contato\n\nEntre em contato comigo por e-mail ou pelo meu LinkedIn:\n\n\u003ca href=\"mailto:mathribe2020@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" alt=\"Gmail\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/matheus-ribeiro-dev/\"\u003e\u003cimg src=\"https://img.shields.io/badge/linkedin%20-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\"/\u003e\u003c/a\u003e\n\n## 📝 Licença\n\n\u003ca href=\"https://github.com/mathrb22/SemanaOmnistack11/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/mathrb22/SemanaOmnistack11\"\u003e\n\u003c/a\u003e\n\nEsse projeto está sob a licença **MIT**. Veja o arquivo _**LICENSE**_ para mais detalhes.\n***\n\n\u003ch5 align=\"center\"\u003e\n  \u0026copy;2020 - \u003ca href=\"https://github.com/mathrb22/\"\u003eMatheus Ribeiro\u003c/a\u003e\n\u003c/h5\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathrb22%2Fsemanaomnistack11","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathrb22%2Fsemanaomnistack11","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathrb22%2Fsemanaomnistack11/lists"}