Este projeto é uma aplicação web construída com Next.js e Tailwind CSS que atua como uma newsletter dinâmica, consumindo a API pública do TabNews para exibir e filtrar conteúdos.
A aplicação foi desenvolvida como um MVP (Mínimo Produto Viável) para demonstrar a busca de dados do lado do servidor (Server Components) e a interatividade do lado do cliente (Client Components) com React.
- Next.js 14+: Framework React para aplicações com renderização do lado do servidor e estática.
- Tailwind CSS: Framework CSS utilitário para estilização rápida e responsiva.
- TypeScript: Linguagem para tipagem estática.
Para rodar a aplicação localmente, siga os seguintes passos:
-
Clone este repositório:
git clone [https://www.dio.me/articles/enviando-seu-projeto-para-o-github](https://www.dio.me/articles/enviando-seu-projeto-para-o-github)
-
Navegue até o diretório do projeto:
cd tabnews-newsletter -
Instale as dependências:
npm install
-
Inicie o servidor de desenvolvimento:
npm run dev
A aplicação estará disponível em http://localhost:3000.
- Busca Dinâmica: Uma barra de pesquisa permite ao usuário filtrar posts em tempo real por palavra-chave, procurando tanto no título quanto no corpo do conteúdo.
- Consumo de API: A aplicação faz uma requisição eficiente à API do TabNews para obter os posts mais recentes.
- Design Responsivo: O layout se adapta a diferentes tamanhos de tela (desktop, tablet, celular) graças ao Tailwind CSS.
Para que a aplicação se torne uma newsletter completa e robusta, as seguintes funcionalidades estão planejadas para futuras iterações:
Adicionar um sistema de paginação ou infinite scroll para permitir que o usuário explore todos os posts disponíveis, carregando mais conteúdos da API conforme avança na página.
Adicionar opções de filtro por categoria (Relevantes, Recentes) e ordenação por critérios como número de visualizações, comentários ou data de publicação.
Em vez de redirecionar o usuário, criar uma rota dinâmica (/posts/[slug]) que exiba o conteúdo completo de um post dentro da própria aplicação.
Permitir que os usuários salvem posts de interesse. Essa funcionalidade poderia utilizar o localStorage para persistência de dados.
Implementar um formulário para coletar endereços de e-mail e integrá-lo a um serviço de newsletter (como o Mailchimp ou Mailjet), permitindo que os usuários recebam atualizações por e-mail.
Ao clonar o projeto para o seu repositório, não se esqueça de substituir o https://www.dio.me/articles/enviando-seu-projeto-para-o-github pelo endereço correto do GitHub.
Com esta documentação, o seu projeto fica mais profissional e fácil para outros desenvolvedores (ou para você mesmo no futuro) entenderem rapidamente o seu propósito e as próximas etapas.
Podemos considerar este projeto finalizado, ou você gostaria de começar a implementar alguma das "Features Futuras"?
