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:
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
- Parte 1: https://www.youtube.com/watch?v=oxgZuLB-3yI
- Parte 2: https://www.youtube.com/watch?v=SKJhmUpfKOc (começa em 3:13)
Projeto, Repo e Figma
- Projeto Final: https://tab-news-blog.vercel.app/
- Link do Repo no GitHub: https://github.com/guscsales/tab-news-blog
- Link do Mockup no Figma: https://www.figma.com/file/RFKkmznNgvWW3I2zKONwNn/Gus-Quem-Fala---Blog-%2B-TabNews?node-id=0%3A1&t=v4D3NNjUZ2xUjCwm-0
Valeu dms! :D
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.
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!
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á
Caramba, que lindo cara, muito massa! Ótima sugestão!!