RF é uma aplicação web para a realização de buscas de restaurantes/lanchonetes na próximidade da localização do usuário.
Pré-requisitos • Instalação • Funcionando • Tecnologias • Autor
- Mapa na geolocalização do usuário
- Busca automatica de restaurantes próximos
- Lista lateral com os resultados das buscas
- Estrelas com as classificações das localidades
- Seach bar para a realização de buscas especificas
- Marcadores no mapa na posição dos restaurantes
- Modal com informações dos restaurantes
- Status para informar se o local se encontra fechado ou não
Antes de iniciar este aplicativo você irá precisar de uma API KEY da Google.
- Resgatando a key:
- Acesse o link.
- Caso não a tenha, crie uma conta de desenvolvedor, e logue na sua conta.
- Abra a página de console de desenvolvedo acessando este link, ou na página principal do link anterior, clicando no botão azul logo de inicio.
- Crie um novo projeto.
- Na págida do console, vá em 'menu' na esquerda da página, depois em 'APIs e serviços', e por fim em 'Biblioteca'.
- Nela, busque por 'Maps JavaScript API', e adicione ao projeto.
- Faça o mesmo para 'Places API'.
- Vá na mesma 'APIs e serviços' e depois em 'Credenciais'.
- Click em 'Criar Credenciais' e em 'Chave de API'.
- Vai ser gerada uma key nova que você já pode usar no projeto.
Você também vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js.
Além disto é bom ter um editor de texto para trabalhar com o código, recomendo o VSCode.
No cmd, gitbash ou terminal de preferência:
# Clone esse repositório:
$ git clone https://github.com/mj-lopes/Restaurant-finder
# Navegue para o diretório raiz
$ cd Restaurant-finder
# Instale as dependências
$ npm install
Ainda na pasta raiz do projeto, no terminal, execute o comando: $ npm start.
O navegador irá abrir em uma nova janela o app já rodando, do contrário, abra em http://localhost:3000.
Na pasta raíz do projeto, crie um arquivo: .env.local.
Abra este arquivo com um editor de texto e escreva REACT_APP_GOOGLE_API_KEY=SUA_CHAVE_DO_GOOGLE.
As seguintes ferramentas foram usadas na construção deste projeto:
- Troca da lib do Maps
- Layout responsivo
Feito com 🧡 por Marcos Júnior.
Entre em contato 👇
