/Final-Challenge-Gobeyond

Primary LanguageTypeScript

Desafio Final GoBeyond 2021-Corebiz

Proposta

A proposta do desafio era fazer uma Landing Page do site oficial da Corebiz a partir deste Layout (https://xd.adobe.com/view/e100320d-9539-4cd9-9146-e27f75204e69-b453/) usando ReactJS e consumindo APIs

Layout do Desafio

Modal

Tecnologias Utilizadas

REACTJS

TYPESCRIPT

SASS

AXIOS

API Utilizada

https://my-json-server.typicode.com/allissonneo/APIextends-Placeholder/db

Cores Padrão

Color Hex
white #FFFFFF #FFFFFF
black #000000 #000000
greyLight #707070 #707070
greyMedium #F4F4F4 #F4F4F4

Organização

Os arquivos foram organizados nas pastas public(contém somente o index.html) e src

img

Dentro da src contém assets, components, styles, App.tsx, index.tsx e o arquivo onde é feito a requisição da API usando o axios e useContext

img

A pasta assets contém fonts(contém as fontes Montserrat) e images (contém as logos usadas na aplicação)

img

A página foi toda componentizada

img

Cada Componente tem um index e um style independente

img

O App é onde a "mágica" acontece, quando monto todos os componentes como um lego

img

Dentro de styles do src tem os estilos globais e o estilo do MainContainer

img

Dentro de ItensContext é onde é feita a requisição da API e passa para os componentes via useContext()

img

Rodar Localmente

Clone o projeto

  git clone https://github.com/allissonneo/Final-Challenge-Gobeyond

Ache o Projeto Localmente

  cd Final-Challenge-Gobeyond

Instale as dependencias

  yarn

Rode o Projeto

  yarn start

Resultado Final

Desktop

desktop

Mobile

mobile

Teste de Performance

Performance

Link do Site

https://final-challenge-gobeyond.vercel.app/

O que faltou?

  • Fazer um Cache para melhorar a performance

  • Configurar um robots.txt para melhorar o SEO

Author