Criei um Wordle de Notícias Automatizado (e apanhei muito para fazer o parse de strings)

Fala galera.

Ler notícias hoje é entediante e passivo.

Você rola o feed. Lê a manchete. Esquece 5 minutos depois.

Eu queria mudar isso. E como todo dev viciado em Wordle (ou Termo), a solução pareceu óbvia:

E se a manchete do dia fosse um quebra-cabeça?

Foi assim que nasceu o Newsdle: um minigame construído do zero onde o objetivo é adivinhar as palavras ocultas na principal notícia do dia.

🚀 Como o Newsdle funciona na prática:

🎯 Gatilho Autônomo "Lazy Loading" (Sem Cron Jobs!)
Cadastrar notícias na mão? Jamais. A Vercel cobra caro por Cron Jobs complexos, então eu criei uma arquitetura muito mais esperta e totalmente isolada.
O primeiro jogador que entra no site a cada dia é quem "engatilha" o código. Na página principal (Server Component), o sistema checa em tempo real no banco: "Já tem puzzle de hoje?". Se não tiver, ele bate na API de notícias (de forma estrita no backend para não vazar a chave pro cliente), sanitiza, salva e entrega o jogo na hora.
A partir daí, todos os próximos jogadores daquele dia recebem a notícia do banco de dados instantaneamente. Zero dependência de serviços externos!

🧠 Engine de Validação: O pesadelo do Parse
Essa foi a parte mais insana. Manchetes reais têm vírgulas, aspas, hífens e muitas stopwords (como "o", "a", "de").
O backend precisou ser inteligente. O algoritmo faz o parse da string inteira, separa as pontuações para renderizar fixas fora do grid e valida apenas as letras jogáveis.

💾 Persistência Local (Sem fricção)
Obrigar login para jogar um minigame mata a conversão (e a vontade de jogar).
Implementei uma persistência robusta usando Local Storage. Você tenta algumas palavras, fecha a aba, volta horas depois e suas tentativas continuam lá.

🛠️ Arquitetura e Stack (Under the Hood)
Construído focando em performance, segurança contra trapaças e SEO:

• Next.js (App Router): Uso severo de Server Actions. A validação das letras acontece estritamente no backend. Nada de expor a resposta certa na aba de Network do DevTools para os espertinhos.
• Supabase + Drizzle ORM: PostgreSQL rápido, escalável e com tipagem forte ponta a ponta.
• Tailwind CSS: Grid dinâmico e responsivo (fazer o wrap de palavras grandes e pontuações misturadas no mobile não foi nada fácil).
• SEO Avançado: Geração dinâmica de Open Graph Images (opengraph-image.tsx). Quando alguém compartilha a vitória no WhatsApp ou Twitter, o preview do link vira um card super visual.

A Gamificação como Ferramenta

Construir o Newsdle me ensinou absurdos sobre manipulação complexa de strings, estado e arquitetura serverless na Vercel.

Mas deixou uma reflexão:

Vocês acham que gamificar a informação ajuda a combater o desinteresse pela leitura, ou é só uma moda passageira?

Feedbacks (e críticas cruéis ao código/arquitetura) são muito bem-vindos!

Desenvolvido por Victor Lobato. Estudante de ADS e Desenvolvedor de Software.