/advice

Gerador de Conselhos através da API Advice Slip

Primary LanguageTypeScript

Frontend Mentor - Gerador de Conselhos(Advice)

Solução para o desafio proposto em: Advice generator app challenge on Frontend Mentor.

Sumário

Resumo

O Desafio

Requisitos do projeto:

  • Responsividade de tela
  • Elementos hovers para interatividade
  • Gerar novos conselhos através do botão

Screenshot

Links

Desenvolvimento

Tecnologias Utilizadas

  • React
  • CSS Modules
  • React-Bootstrap
  • Fetch

O que aprendi

Nesse projeto, obtive um conhecimento sobre o cache de navegadores. Pois, a API utilizada (adviceslip), tem por configuração padrão, mandar a mesma requisição caso solicitado em 2s. Como o projeto tem um botão de Refresh, para que o usuário possa solicitar um novo Advice, isso se tornou um problema. Pois, sempre que solicitado um novo Advice, era mandado o mesmo, devido ao tempo de solicitação.

Como solução, pensei em utilizar o setTimeInterval, mas sem sempre funcionava, pois por padrão a requisição era mandada com o cache do navegador para ajudar na velocidade.

Então, aprendi como fazer solicitações sem utilização de cache utilizando o seguinte trecho de código:

const http = await fetch('https://api.adviceslip.com/advice', {cache: 'no-store'})

O que pretendo melhorar

Pretendo refazer o mesmo projeto, em diferentes branchs, utilizando tailwind css / bootstrap para estudo das tecnologias.

Autor