Executando verificação de segurança...
0
NewBerg
1 min de leitura ·

Gerador de conselhos

Boa madruga amigos, projetin de um gerador de conselhos em nextjs consumindo uma api, não é muito, mas é trabalho honesto, mais informações a baixo.

Link do projeto: https://advice-generator-app-xi-five.vercel.app/

Github: https://github.com/newberg85/advice-generator-app

Esse foi um projeto da plataforma https://www.frontendmentor.io
caso alguém queira tentar refazer esssa foi a API utilizada: https://api.adviceslip.com/

vou postar alguns outros projetos no meu github:
https://github.com/newberg85

Opiniões e criticas construtivas são bem vindas, adios.

Carregando publicação patrocinada...
1
SonharSofredor

💡"A simplicidade é a essência da beleza"

🖋️Top maninho, so uma coisinha que eu notei!

❗Adiciona um padding no eixo Y, em telas menores da quase uma "coladinha" o botão do texto, seria legal esse respiro!

❗Essa é mais coisa minha! Acho q eu em particular ia preferir o botão maior pra telas menores.

1
1
brunoalecio

Olá, parabéns pelo projeto! pretendo fazer o mesmo em breve para colocar alguns conhecimentos em prática :)

  1. Você achou que aprendeu bastante coisa fazendo esse projetinho ?
  2. Você aprendeu os conceitos primeiro e dps colocou em prática ou foi aprendendo conforme foi fazendo ?
  3. Oq achou de hospedar na vercel ?
    3.1 A hospedagem foi free ?

Um ponto de melhoria:

  • Percebi que alguns caracteres estão quebrando:

ADIVICE #146
"Today, do not use the words ‘Kind of,' ‘Sort of' or ‘Maybe.' It either is or it isn't."

1
NewBerg
Autor
Autor

opa, obrigado pela resposta, aprendi sim, eu já tinha uma base dos conceitos e fui colocando em prática, sempre hospedo meus projetos na vercel, acho que uma das melhores alternativas até agora e sim, ela é gratis, apareceu esse bug pra mim também, creio que seja erro de digitação na api.

1
kht

Provavelmente é um erro de encoding da API.

Se vc chamar diretamente https://api.adviceslip.com/advice/146, vai ver que o retorno é:

{"slip": { "id": 146, "advice": "Today, do not use the words \u00e2\u20ac\u02dcKind of,' \u00e2\u20ac\u02dcSort of' or \u00e2\u20ac\u02dcMaybe.' It either is or it isn't."}}

E \u00e2\u20ac\u02dc é a notação para escapes Unicode, que ao fazer o parsing da resposta (ao chamar response.json()), acaba sendo convertido para os respectivos caracteres ‘.

Provavelmente a API está convertendo erroneamente o caractere ‘ (LEFT SINGLE QUOTATION MARK) para outro encoding (possivelmente CP-1252) em vez de UTF-8 - similar ao que acontece aqui <- e como já explicado neste link, o problema está na origem (portanto, na API), que está retornando os dados incorretos.

Vc até poderia contornar fazendo o replace, trocando esses caracteres por aspas. Mas o ideal é que a API corrija (ou então vc pode fazer um cache das frases, ou ter um banco de dados próprio com uma cópia delas, mas com o valor corrigido - só tem que ver se a API permite).

1
Edson295

Legal que eu primeiro recebi um conselho de vida, e depois um conselho de como não desbotar um Jeans na hora de lavar kkk

Bom projeto, eu colocaria um tooltip no botão de gerar, para deixar um pouco mais intuitívo, já que o desenho dele é meio 'fora dos padrões'.

1
NewBerg
Autor
Autor

obrigado pela resposta, pra apareceu "não confie em todos os conselhos" kkkkk, vou seguir tua dica sobre o botão.

1
jvcdomingues

Excelente! Sugestões:

  1. Corrigir a ortografia da palavra Advice no componente (está escrito Adivice tanto no componente quanto no title da página).
  2. Um estado de loading após clicar no botão seria interessante para a experiência do usuário, enquanto aguarda o próximo conselho.
1
1
viniciusvas90

Interessante em cara
Sugestão:

  • Pensa num jeito de nichar os conselhos. Ex: motivação profissional, conselhos sobre a vida, motivação pra estudos, mensagens positivas pra melhorar o dia e tal
  • Divulga sugerindo usarem como Home do browser, pra abrir toda vez que uma nova aba for aberta
  • Põe uns Ads pra ver no que dá

Acho que teria público hein