🧾 Descrição

Projeto de uma aplicação web que implementa uma page de listagem de HQs da Marvel. Possui uma navbar com opção de navegação para o inicio através da logo, no corpo uma listagem de quadrinhos com suas informações, opção de compra, na pa´gina de compra há um formulário para adicionar informações do comprador, inclusive um mapa para selecionar local de entrega.

Além disso, o projeto é feito em JavaScript com o framework ReactJS.Além da utilização da biblioteca do Google-Maps e API do Google, e API da marvel.

🔌 Tecnologias utilizadas

• JavaScript
• React JS
• CSS

DEPENDENCIAS PARA:

Gerenciar rotas: react-router-dom

npm install react-router-dom

Realizar chamada para API: axios

npm install --save axios

Criptografar hash md5 para chamar API: md5

npm install --save md5

Implementar o layout: Bootstrap utilizando o reactstrap

npm install --save bootstrap

npm install --save reactstrap

Trabalhar com Google Maps na aplicação:

npm install --save react-google-maps

npm install --save react-google-autocomplete

npm install --save react-geocodea

🏳️ Como executar?

Passo 1

Faça download do repositório.

git clone https://github.com/PedroEmanuelLima/react-app-marvel-comics.git

Passo 2

Abra o arquivo em um navegador e teste as funções.

cd react-app-marvel-comics

Passo 3

Instale as dependências.

npm install --force

Passo 4

Criar arquivo .env na raiz com:

REACT_APP_PUBLIC_KEY=<'chave pública da API'>

REACT_APP_PRIVATE_KEY=<'chave privada da API'>
REACT_APP_GOOGLE_KEY=<'chave da API do Google'>

Para o fucionamento correto do Mapa é necessário ativar as bibliotecas Places API, Maps JavaScript API e Geocoding API no Google Cloud Platform

Passo 5

Execute.

npm start

✅ Resultado (Preview)

Tela 1:

Listagem de quadrinhos em cards, com opção de mais, onde exibe um modal com mais informações e opção de comprar:

Web	Mobile

Tela 2:

Formulário de compra, preencher com confirmação de dados, inclusive endereço com auxilio de uma mapa:

💻 Autor: Pedro Emanuel

Portfólio:

• Github

Contato:

• Linkedin