Um blog fictício moderno, acessível e performático, criado como parte de um teste técnico para a empresa Avalon. Este projeto simula uma plataforma de leitura de artigos com listagem, detalhes de postagens, comentários e perfil dos autores, utilizando a JSONPlaceholder.
Versão online aqui: https://usepost.vercel.app
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- next-intl para internacionalização
- Framer Motion para animações
fetchnativo para requisições@heroicons/reactpara ícones- Imagens do Picsum Photos
git clone https://github.com/maatheusgouveia/usepost.git
cd usepostnpm installnpm run devAbra http://localhost:3000 no navegador.
Optei por usar o fetch nativo junto de uma função api customizada, evitando o uso de bibliotecas como TanStack Query, por alguns motivos:
- O projeto é estático e simples: não exige cache automático, invalidação, ou mutations complexas.
- Evitar dependências desnecessárias para um teste técnico simples.
- Melhor performance inicial sem overhead de hidratação do cache no client.
- Facilidade de uso com
async/awaitdiretamente nos Server Components.
Entretanto, TanStack Query seria ideal para cenários com:
- Estado compartilhado entre páginas
- Cache persistente entre navegação
- Mutations com revalidação
- Paginação real e controle refinado de background fetching
O projeto foi internacionalizado utilizando next-intl, pois ele se adapta perfeitamente ao novo App Router do Next.js, permitindo carregar mensagens no servidor com suporte ao getLocale, getMessages, e getTranslations.
- Listagem de posts com layout responsivo em grid
- Página de detalhes do post com:
- Imagem do post destacada
- Tempo estimado de leitura
- Comentários
- Página do autor com dados e seus posts
- Página "Sobre" com informações da carreira
- Seleção de idioma (🇧🇷/🇺🇸) com persistência via cookie
- Animações de entrada suaves com Framer Motion
- Layout acessível, responsivo e dark mode-ready
- 💾 Paginação real com backend que suporte isso (hoje todos os dados são retornados de uma vez)
- 🔁 Infinite scroll real com loading state e
swroureact-query - 🧠 Suporte a busca e filtros por título/autor
- 💬 Formulário para adicionar novos comentários
- 📤 Integração com CMS (ex: Strapi) para gerenciamento dos conteúdos
- 🖼️ Upload de imagem real por post (ex: amazon s3)
- 🧪 Cobertura de testes com Jest/Vitest + Testing Library
Desenvolvido por Matheus Gouveia, Frontend Engineer com mais de 9 anos de experiência criando produtos robustos e escaláveis com React, TypeScript e Node.js. 🌍
Além de já ter participado de projetos para grandes empresas no Brasil e no mundo, também tenho projetos pessoais que mantenho, são eles o blog Update sem Where e a plataforma WebDevTools
Este projeto foi desenvolvido para fins de avaliação técnica e aprendizado.