Executando verificação de segurança...
30
guscsales
2 min de leitura ·

Montei um Blog com as APIs do TabNews, NextJS@13, Tailwind e Thon UI

Eu fiquei inspirado quando o Filipe falou que todo o TabNews era Open Source e API First, então decidi fazer um blog (para fins de aprendizado e apenas com meus proprios posts) com NextJS (com Typescript), Tailwind, Thon UI e as APIs do TabsNews. Esse aqui foi o resultado:

Screenshot to Blog com APIs do TabNews

Basicamente esse projeto é um blog, e eu registrei a criação desse projeto em duas partes, cada vídeo tem quase 2h.

O que fiz foi o seguinte

  • Estruturação do projeto com Next 13 (pasta app)
  • Instalando o Thon UI e o Tailwind
  • Montando as partes principais do layout (com layout.tsx)
  • Criando a home do projeto
  • Consumindo a API que lista os posts de um usuário e pegando o post mais recente
  • Montando a página de listagem e detalhes de posts
  • Consumindo as APIs de listagem e detalhes de post para popular o blog
  • Perfumaria: dando um tapa geral no layout para ficar bonitão

Vou deixar aqui os vídeos e o link do projeto final para quem se interessar. Fiquem a vontade para clonar o repo, fazer fork e dar feedbacks.

Links

Videos

Projeto, Repo e Figma

Valeu dms! :D

Carregando publicação patrocinada...
3
jeffcarlosbd

Ficou muito massa, parabéns Gus! um feedback, na minha resolução (1920x1080), o painel direito ficou meio apertado e apareceu uma barra vertical (para ler o conteudo dos posts), acho que dá para reduzir uns 30% da largura do painel esquerdo para sobrar mais espaço para os conteúdos.

3
2
leandersonandre

Que demais! Eu estava querendo utilizar o Tabnews como blog, vc me deu uma ótima sugestão. Apenas para contribuir, no ipad em landscape o layout do seu blog fica quebrado. Abs!

2
hagaka

Que massa! Eu também fiz algo parecido, Mas estou para postar ainda...

Eu deixei mu pouco mais simples, já tenho um blog em Hugo, e eu adicionei uma parte em que eu aponto aonde que aquele post está no tabnews, e quando o HTML é gerado, ele busca os comentários que está no tab, e cola no blog. Porque gostaria de quem acessar pelo blog poder acompanhar a discussão, mas se quiser comentar precisa entrar no tabnews.

Eu não fui tão longe de copiar o conteúdo do tab no blog porque queria poder postar coisas um pouco diferentes em cada plataforma, tipo umas shortcuts que eu tenho lá

1
1
1
1
1