A Next Level Week é um evento online gratuito promovido pela Rocketsat, em que durante 5 dias desenvolvemos uma aplicação completa. Na trilha Omni, a proposta foi criar uma aplicação web e mobile em que lares adotivos podem cadastrar seus endereços e informações para pessoas visitarem.
Eu decidi mudar a proposta da aplicação, e transformei o Happy em um buscador de abrigos de animais, ajudando a unir pessoas e seus futuros melhores amigos.
É necessário ter instalado na sua máquina para execução desse projeto:
- NodeJS
- Gerenciador de pacotes (Npm ou Yarn)
Repositório FRONTEND.
Repositório BACKEND.
Repositório MOBILE.
$ git clone https://github.com/mjulialobo/happy.git
$ git clone https://github.com/mjulialobo/happy-backend.git
$ git clone https://github.com/mjulialobo/happy-mobile.git
# entre na pasta do projeto
$ cd happy
Entre na pasta
$ cd web
Instale as dependências
$ yarn
# ou, caso use npm
$ npm install
Rode a aplicação
$ yarn start
# ou, caso use npm
$ npm start
Caso você tenha uma conta no mapbox, pode usar seu token para utilizar o mapa da aplicação. No entanto, se você não quiser ter este trabalho, sem problemas, por padrão já tem um mapa configurado para uso.
Caso queira, vá para a seção do Mapbox.
Entre na pasta
$ cd backend
Instale as dependências
$ yarn
# ou, caso use npm
$ npm install
Rode o servidor
$ yarn dev
# ou, caso use npm
$ npm dev
Entre na pasta
$ cd mobile
Instale as dependências
$ yarn
# ou, caso use npm
$ npm install
Rode o mobile
$ yarn start
# ou, caso use npm
$ npm start
Depois de fazer isso, irá abrir o metro bundler no seu navegador. A partir de agora você tem algumas opções para acessar o app.
Na página do metro bundler, clique em "Run on Android device/emulator" e espere carregar. Tenha em mente que é necessário ter passado pelo processo de instalação do android sdk, etc.
Na página do metro bundler, clique em "Run on iOS simulator" e espere carregar.
Baixe o aplicativo do Expo:
Depois de baixar, volte a página do metro bundler e escaneie o QR Code com o app do Expo.
Se tudo deu certo, o app deve estar disponível agora! 👩🏽🔧
Siga as instruções para usar o mapbox no lugar do openstreetmap.
- Em "https://account.mapbox.com/", copie seu token.
- Na raiz do projeto web crie um arquivo chamado ".env"
- Dentro desse arquivo, digite "REACT_APP_MAPBOX_TOKEN =" e cole seu token logo depois.
- Entre no arquivo "OrphanagesMap.tsx", descomente o trecho de código correspondente as linhas 34, 35 e 36.
- No mesmo arquivo, comente a linha 32.
Se você fez tudo corretamente, estás usando a API do mapbox com seu Token na página do mapa. 😄
Note: gif distorts images and colors