DEV Community

Francisco Zanfranceschi
Francisco Zanfranceschi

Posted on

[Desafio] - Um Novo Frontend Para o CuriousCat

Conteúdo original em https://twitter.com/zanfranceschi/status/1630207364405264385


Ei dev frontend,

Pega esse desafio aqui: fazer uma página bonita, elegante e sincera, e sem ads pra ler as perguntas e respostas de alguém no CuriousCat – com muito estilo, javascript e criatividade! Pode usar a força do ódiø também, se quiser. 🐱

Image


Mas deixa eu contar uma coisa antes de continuar. Só é possível completar esse desafio porque a API do CuriousCat aceita requisições CORS. Por isso requisições preflight não vão falhar.

Soou estranho esse papo de CORS/preflight? Dá uma olhada nesse link.

https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request


Se você já sabe o que é CORS/preflight, vou te mostrar uma coisa que talvez te ajude com troubleshooting no futuro.

Use o comando abaixo pra inspecionar os cabeçalhos/status code da resposta pra saber se CORS tá habilitado na API que estiver consumindo pelo browser.

Image

https://twitter.com/zanfranceschi/status/1511513564569387015


A resposta precisa estar na faixa HTTP 2XX e conter os cabeçalhos "Access-Control-Allow-Origin: " e "Access-Control-Allow-Methods: ". Se não contiver, vai dar ruim.


Ao desafio!

Você vai consumir uma API que retorna 30 posts dado um parâmetro "username". No exemplo abaixo uso meu username.

Faça essa requisição (pode ser no browser mesmo) e inspecione a resposta – a parte que interessa é o atributo "posts".

Image


A API vai te retornar, no máximo 30 posts. Pra você obter os próximos 30 posts, você adiciona um novo parâmetro à requisição que é "max_timestamp" com o menor valor de "timestamp" dos posts da resposta anterior. Tranquilo?

O 2º print abaixo pode ajudar a entender melhor isso.

Image

Image


Bom, o que vai acontecer nessa técnica de "paginação" é que haverá posts duplicados – o post mais antigo da primeira requisição irá aparecer na próxima. Aí é com você como tratar isso.


É esse o desafio! Faça do jeito que você quiser! Se quiser expandir pra backend, daria pra fazer uma espécie de BFF ou até mesmo coletar as respostas e fazer outra coisa sem interface. Até com mobile daria pra brincar com essa API.


O que me inspirou a lançar esse desafio foi ter brincado com essa API do CuriousCat usando Clojure.

https://twitter.com/zanfranceschi/status/1629709326066540544


É isso! E, como sempre, muito obrigado pela moral!

O apoio que você me dá é o que me faz continuar compartilhando um pouco do que sei aqui. ❤️

Top comments (0)