GoBeyond Final Challenge

Desafio final do curso GoBeyond da CoreBiz.

🔥 Live demo in link below 🔥

---

📑 Índice

Tecnologias • Como executar • Projeto • Layout e Requisitos • Lighthouse • Autor • Licença

---

🧪 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

• React

• Styled-Components

• Bootstrapped com create-react-app

---

🚀 Como executar

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto, é bom ter um editor para trabalhar com o código como VSCode.

Iniciando

Clone o projeto e acesse a pasta seu diretório.

$ git clone https://github.com/pedrobarbosa0/gobeyond-final-challenge

$ cd gobeyond-final-challenge

Para iniciar o projeto, siga os passos abaixo:

Instalar as dependências

$ yarn install

or

$ npm install

---

Iniciar o projeto

$ yarn start

or

$ npm start

A aplicação estará disponível no seu browser pelo endereço http://localhost:3000.

💻 Projeto

O projeto é uma simples simulação de uma landing page para a CoreBiz e foi desenvolvido com CRA e Styled-Components para a construção dos componentes e Atomic Design para o processo criativo de construção e lógica.

Ele possui três componentes maiores (organismos) que são:

- Header
- Main
- Footer

E cada um deles, seus organismos e átomos.

📘 Documentação dos Componentes

• Main

Este é o componente responsável por fazer a requisição à API JSON Placeholder e pela renderização das imagens.

Ele possui três useState()

• Para receber a resposta da API

const [apiData, setApiData] =  useState([]);

• Para "settar" a imagem dinamicamente

const [slider, setSlider] =  useState("");

• Para "settar" o título dinâmico

const [title, setTitle] =  useState("");

É usado o hook useEffect() para chamar a função que faz a requisição para a API, sem nenhuma dependência. A requisição é feita usando a função fetch() nativa e após isso ela passa a resposta da API usando o método .json() então ele "seta" os estados dos componentes através dos respectivos setters dos estados.

Veja o exemplo abaixo:

fetch("https://jsonplaceholder.typicode.com/photos")
.then((data) => return data.json())
.then((data) => {setResonse(data)});

A renderização dos dados vindos da API é feita usando .map(). Para cada item da resposta da API ele constrói um componente usando os dados de cada item.

Veja o exemplo abaixo:

{response.map((photo) => {
	return (
		<img src={photo.url} />
	);
})}

Nesse mesmo map é "settado" o estado do título dinâmico que é passado para ele através de uma prop.

Veja o exemplo abaixo:

<Button title={title} />

Os outros componentes possuem uma lógica simples, sem complexidades, e podem ser compreendidos facilmente em seus códigos fonte que estão na pasta

src/components.

🎨 Layout e Requisitos

Você pode visualizar o layout e os requisitos do projeto através dos links abaixo:

⚙️ Requisitos

• Crie uma página responsiva usando react
• Header
  • O header tem o logo da Corebiz alinhado à esquerda e um menu de navegação horizontal na direita.
• Main
  • Na coluna da direita, uma imagem grande, dinâmica.
  • Na coluna da esquerda, um título dinâmico, seguido por um botão de veja mais que redireciona para o site da Corebiz. Abaixo, uma lista de pequenas imagens dinâmicas que troca o título dinâmico e a imagem grande dinâmica quando clica em cada uma.
• Footer
  • O logo da Corebiz seguido pelo texto de direitos reservados e os ícones de redes sociais da Corebiz com seus links.
  • Um menu de navegação vertical.
  • A lista de endereços da Corebiz, separadas em colunas, por países.- [x] entrar em contato com a entidade através do E-mail ou do WhatsApp

---

🖥️ Web

📱 Mobile

---

⚡ Lighthouse Score

---

🧑‍💻 Autor

_{Pedro Barbosa} ⚛️

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com ❤️ por Pedro Barbosa 👋🏽 Entre em contato!

---