DevRoast

O DevRoast e um app web divertido onde voce cola um trecho de codigo e recebe um "roast" com score, feedback e uma boa dose de sarcasmo.

Ambiente em producao: https://devroast-jlippertdev.vercel.app

Este projeto esta sendo construido durante o NLW-Operator da Rocketseat, acompanhando as aulas do evento e evoluindo o visual com base nos designs do Pencil.

O que o app faz

• Permite colar codigo em um editor com visual de terminal.
• Analisa o codigo usando Gemini AI e gera roast com score, feedback detalhado e correcoes sugeridas.
• Exibe uma previa de leaderboard com os codigos mais "vergonhosos".
• Leaderboard Pagination: Navigate through roast history with Previous/Next controls
  • 20 entries per page with URL-based navigation
  • Scroll-to-top behavior on page change
  • Empty state messages when no data available
  • Accessible keyboard navigation (WCAG AAA)
• Possui uma tela de component library para evolucao da interface.
• Suporte completo a i18n (EN/PT-BR) com rotas localizadas.

Estado atual

• Integracao completa com Gemini AI para analise de codigo.
• Persistencia em PostgreSQL com Drizzle ORM.
• Banco de producao no Neon (Vercel sem dependencia de Docker).
• Leaderboard dinamico com top 3 na homepage e top 20 em pagina dedicada.
• Cache agressivo (1h stale/revalidate, 24h expire) para performance.
• Prioridade em fidelidade visual e componentes reutilizaveis.

Destaques

• Estetica inspirada em terminal/dev tool.
• Componentes UI com padrao de composicao.
• Tokens de tema no Tailwind para manter consistencia visual.
• Animacoes de loading com efeito glitch e mensagens engraçadas rotativas durante submissão.
• Suporte completo a i18n (EN/PT-BR) com guard-rails para garantir idioma correto.
• Partial Prerender (PPR) do Next.js 16 para performance otimizada.
• Degradacao graciosa se banco PostgreSQL estiver indisponivel.

Banco de dados

• ORM com Drizzle, PostgreSQL 16 via Docker Compose e driver pg.
• Schema em TypeScript com camelCase e conversao automatica para snake_case.
• Queries planejadas com select, join e SQL explicito, sem relations() nativas do Drizzle.
• Em producao (Vercel), recomendado usar Postgres gerenciado (ex.: Neon) via DATABASE_URL.

Setup local

1. Crie o arquivo .env.local na raiz do projeto:

DATABASE_URL=postgresql://devroast:devroast@localhost:5432/devroast

2. Suba o banco:

docker compose up -d

3. Gere e aplique as migrations:

pnpm db:generate
pnpm db:migrate

Setup producao (Vercel + Neon)

1. Crie um projeto no Neon e copie a connection string pooled.
2. Na Vercel, em Settings -> Environment Variables, configure:

DATABASE_URL=postgresql://<user>:<password>@<neon-host>/<db>?sslmode=require&channel_binding=require
GEMINI_API_KEY=<sua-chave>
CRON_SECRET=<seu-secret>
DATA_RETENTION_DAYS=7

3. Rode migrations apontando para o Neon:

pnpm db:migrate

4. Faça deploy da main.

Scripts uteis

• pnpm db:generate gera migrations com base no schema.
• pnpm db:migrate aplica migrations no banco.
• pnpm db:push sincroniza schema diretamente.
• pnpm db:studio abre o Drizzle Studio.

Cache e Performance

O projeto usa cache agressivo para reduzir queries ao banco:

• Data queries: Cache de 1h (stale/revalidate) e 24h (expire)
• CodeBlock rendering: Cache de 1h com shiki syntax highlighting
• Partial Prerender: Next.js 16 PPR para rotas estaticas com dados dinamicos

Entregas concluídas

Refactor: Mobile Submit Resilience (2026-04-09)

• ✅ Extração das regras puras de submit para módulo dedicado (home-roast-submit)
• ✅ Orquestração do submit movida para hook dedicado (use-home-roast-submit)
• ✅ Sessão resiliente de submit em sessionStorage para manter estado durante remount/rotação
• ✅ Componente de feedback de submit centralizado com mensagens i18n no tom DevRoast
• ✅ Ajustes de responsividade mobile (Android/iOS) no fluxo Home + Code Editor

Paginação do Leaderboard (fases 2 e 3 do roadmap) (2026-04-07)

Implementação entregue de forma incremental em duas fases internas do roadmap do projeto.

• ✅ URL-based pagination with Previous/Next controls
• ✅ Skeleton loading states for full page and homepage preview
• ✅ Empty state variants (empty database + out of bounds)
• ✅ Reduced motion support for animations
• ✅ Database fallback with graceful degradation
• ✅ WCAG AAA accessibility compliance

Infra e Deploy: Neon + Vercel (2026-04-07)

• ✅ Conexao de producao preparada para Neon com SSL em ambiente serverless
• ✅ Setup documentado de variaveis de ambiente para Vercel
• ✅ Migrations aplicadas no banco remoto Neon
• ✅ Dominio de producao atualizado para devroast-jlippertdev.vercel.app

UX: Loading do Roast + OG Image (2026-04-07)

• ✅ +20 mensagens de loading em EN e +20 em PT-BR
• ✅ Rotacao de loading iniciando em piada aleatoria (nao fica sempre na primeira)
• ✅ Erros de submit do roast localizados por locale (EN/PT-BR)
• ✅ Fallback engraçado no modal quando a OG image falha
• ✅ Ajuste de middleware para nao redirecionar rota de opengraph-image