luizjr / ifood-clone

Um clone do famoso aplicativo do Ifood, feito inteiramente com Javascript, através da utilização do React Native! Testado no Android & IOS. API com Json Server

Ferramentas

Este projeto foi desenvolvido utilizando das seguintes tecnologias:

• React Native
• React Navigation
• Expo
• ESlint
• Prettier
• Styled Components
• Axios
• Json Server
• NumeralJs
• VSCode
• Material Icons

Imagens do projeto

Como executar o projeto

Executando o projeto:

A aplicação foi desenvolvida através da utilização do Expo, e isso nos permite executar o projeto em nossos próprios aparelhos móveis.

Para execução do projeto, você precisará inicialmente ter em sua máquina um dos gerenciadores de pacote abaixo:

• NPM
• Yarn (recomendado)

Inicialmente, você precisa instalar todas as dependências de funcionamento do projeto, para isso, com o terminal aberto na pasta do projeto, execute:

  yarn
  npm install

Agora você precisa instalar globalmente o Json Server que vai servir como backend da aplicação, você pode instalar através de um dos seguintes comandos:

  npm install -g json-server
  yarn add -g json-server

Agora você precisa baixar o projeto para sua máquina, você pode baixar o ZIP e extrair, ou caso tenha o GIT instalado na sua máquina pode clonar o projeto através do seguinte comando:

  git clone https://github.com/leoobarbosa2/ifood-clone.git

Para iniciar o backend da aplicação, com o seu terminal aberto na pasta do projeto, execute:

  json-server --host 192.168.11.16 -p 3333 -w

Observe que 192.168.11.16 é o IP da minha máquina, para que o backend funcione corretamente você precisará utilizar o IP da sua máquina para utilização.

Realize a alteração desse IP, para o IP da sua máquina em src/services/api.js mantendo a porta :3333

Agora você precisa do aplicativo do EXPO instalado no seu dispositivo móvel, você pode encontrar por ele na Google Play ou App Store:

• Expo Android
• Expo Ios

Continuando, execute o comando para iniciar a aplicação mobile com o expo:

  yarn start
  npm run start

Após iniciar o projeto, o seu navegador irá abrir uma tela semelhante a essa, basta utilizar o seu leitor de QRCode que o Expo irá identificar e sugerir que abra no aplicativo, ou você pode escanear no próprio aplicativo do Expo

Depois disso é só aguardar o expo carregar o aplicativo!

Testado no Android & IOS

Thank you :)