Uni engenharia e propósito: Construí uma aplicação gamificada para ajudar meus amigos com um habito em comum.

Se você é engenheiro(a) de software, provavelmente já passou por isso: você enxerga uma necessidade no seu dia a dia e pensa "eu posso construir um sistema para resolver isso".

Eu tinha um objetivo muito claro: queria ajudar meus irmãos em Cristo (e a mim mesmo) a manter a constância diária na oração do Santo Terço. O problema dos aplicativos de habit trackers tradicionais é que eles são genéricos demais, apenas marcam um "X" num calendário. Nós precisávamos de algo que nos unisse, que comprovasse o compromisso e nos mantivesse engajados através de gamificação e uma "pressão social" positiva entre amigos de fé.

Foi unindo esse propósito espiritual com a engenharia que decidi sair do óbvio e construir meu próprio sistema do zero. O objetivo não era apenas ter um app bonitinho para o nosso grupo, mas usar essa missão como laboratório para me forçar a enfrentar desafios arquiteturais reais com as novidades do Next.js 16 e do React 19.

A ideia: Uma plataforma gamificada (Holy Streaks) Decidi criar uma aplicação web moderna onde os fiéis podem criar grupos, acompanhar o calendário Mariano, meditar os mistérios do dia e validar o progresso enviando "logs" com fotos reais de seus terços. Tudo envelopado num design Neo-Brutalista.

Link do projeto: https://holy-streaks.vercel.app/
Repositório: https://github.com/lancao2/holy-streaks

Mais do que o propósito e a estética, o que me motivou tecnicamente foram as "dores" de tirar isso do papel. Desenvolver lógicas de gamificação altamente consistentes simula problemas complexos que enfrentamos na indústria. Separei aqui alguns dos principais desafios e como os resolvi:

O desafio do Algoritmo de Ranking Dinâmico (Leaderboard) O cálculo do ranking dentro dos grupos foi, de longe, a parte mais espinhosa. Não bastava apenas ordenar por quem rezou mais dias. O critério de desempate era complexo: quem tem a maior ofensiva (streak) fica no topo, mas, em caso de empate, o líder (que ganha a 👑 na UI) é aquele que validou a oração mais cedo naquele dia.

A solução foi levar a complexidade para o banco de dados. Em vez de buscar todos os logs e fazer algoritmos caros no JavaScript, estruturei a modelagem relacional usando Prisma ORM (com MariaDB/PostgreSQL). A inteligência de agrupamento e ordenação temporal foi resolvida via query. Assim, os Server Components do Next.js já recebem a lista pré-processada e incrivelmente rápida para renderizar no servidor.

Consistência de Estado e Validação de Mídia (A Trava de Segurança) Eu não queria que fosse fácil "burlar" o sistema. Para o hábito contar, o usuário precisa enviar uma foto do momento da oração. Para resolver isso, criei um pipeline integrando a API do Cloudinary para validação e compressão das imagens. Assim que o upload é concluído com sucesso, o sistema dispara uma Server Action que aplica uma "trava de segurança". Imediatamente, os mistérios do dia são marcados como concluídos (5/5) e a interface é congelada para evitar edições acidentais. Usando o revalidatePath do Next.js, essa mutação reflete na tela de todos os membros do grupo instantaneamente, sem necessidade de refresh.

Estilização e Performance com Tailwind CSS v4 O design Neo-Brutalista exige sombras densas e bordas grossas. Aproveitei a nova engine do Tailwind v4 para centralizar os tokens de design utilizando variáveis CSS nativas. Isso manteve os componentes fluídos, como o widget de mistérios que é expansível e retrátil, sem impactar a performance com excesso de classes no HTML.

Por que recomendo construir projetos paralelos com propósito? Projetos de "to-do list" são fáceis e raramente vão testar seus limites sobre arquitetura de banco de dados, mutações de cache otimistas ou integração segura de mídia.

Mesmo já enfrentando problemas complexos de engenharia diariamente no meu trabalho atual, quando você tenta construir algo full-stack do zero para ajudar uma comunidade real, você assume o chapéu de DBA, DevOps, Designer e Product Manager. Você esbarra em problemas arquiteturais que treinam sua resiliência e mantêm seu machado afiado para o mercado.

Fica o convite para testarem a aplicação (e formarem seus grupos de oração!), além de darem uma olhada no código fonte. Adoraria ouvir a opinião de vocês sobre a arquitetura que usei, e como resolveriam o problema lógico de desempate do ranking.

Um abraço e Salve Maria! 🌹📿
Acesse meu Portfólio para ver mais projetos: https://www.alexlan.com.br/