Mini SaaS para quem quer feedback de código com humor ou com pé no chão — você escolhe o tom.
O Devroast é uma aplicação onde a pessoa cola um trecho de código e recebe uma avaliação gerada com base no modo escolhido:
- 🌶️ Roast mode — avaliação sarcástica do código (efeito viral, entretenimento).
- 📋 Modo real — mesma ideia, mas sem sarcasmo: feedback mais direto e útil.
No fim das contas, a ideia é misturar viralidade (quem não gosta de ver o próprio código sendo “assado”?) com educação: pontos de melhoria reais, sugestões acionáveis e a possibilidade de compartilhar o resultado nas redes sociais. Também entra no roadmap um ranking dos trechos mais mal avaliados — para dar aquela competitividade saudável (ou não tão saudável).
| Camada | Tecnologia |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19 |
| Linguagem | TypeScript 5 |
| Estilização | Tailwind CSS v4 + @tailwindcss/postcss |
| Componentes (comportamento) | Base UI (@base-ui/react) |
| Syntax highlight | Shiki (servidor, tema Vesper) |
| Lint / format | Biome |
| Dados | PostgreSQL + Drizzle ORM |
| API Layer | tRPC (TanStack React Query) |
| Animações | @number-flow/react |
| Estrutura de código | Diretório src/ (ex.: src/app) |
- Pencil — design do app e conceito de layout (arquivos
.pen). - OpenCode CLI — usado na fase inicial do projeto.
- Cursor — editor principal daqui em diante, com Composer 2.
- MCP Context7 — documentação e referências atualizadas de bibliotecas no fluxo do assistente.
- MCP Pencil — leitura e edição integradas dos designs
.penno editor.
O código da aplicação vive em src/ (por exemplo, src/app para rotas e layout do App Router).
Estado atual (desenvolvimento): layout global com navbar (SiteHeader), home em / com dados estáticos e preview de leaderboard, biblioteca de componentes em /components. Convenções do projeto: AGENTS.md.
Pré-requisitos: Node.js e pnpm (o projeto declara a versão em packageManager no package.json; recomenda-se Corepack para alinhar o pnpm).
Instale dependências e suba o servidor de desenvolvimento:
pnpm install
pnpm devAbra http://localhost:3000 no navegador.
- Copie
.env.examplepara.env.local(gitignored) e ajusteDATABASE_URLse necessário. - Suba o Postgres com Docker:
docker compose up -d- Aplique o schema (migrações em
drizzle/):
pnpm db:migrateDATABASE_URL de exemplo (alinhada ao Compose): postgresql://devroast:devroast@localhost:5432/devroast
Para validar a ligação: GET /api/health/db (responde { "ok": true } quando o DB está acessível).
| Comando | Descrição |
|---|---|
pnpm dev |
Servidor de desenvolvimento |
pnpm build |
Build de produção |
pnpm start |
Inicia o servidor após build |
pnpm lint |
biome check |
pnpm format |
Formata e corrige com Biome (biome check --write) |
pnpm db:generate |
Gera migrações Drizzle a partir do schema |
pnpm db:migrate |
Aplica migrações |
pnpm db:push |
Empurra o schema para o DB (desenvolvimento) |
pnpm db:studio |
Abre o Drizzle Studio |
pnpm db:seed |
Popula o banco com dados de exemplo |
O projeto usa tRPC como camada de API com tipagem end-to-end.
stats.getMetrics— Retorna métricas (total de roasts, score médio)
- Backend:
src/server/trpc/— Routers e procedimentos - Client:
src/trpc/— Provider e utilitários - API Route:
src/app/api/trpc/[trpc]/route.ts
Para mais detalhes, ver src/server/AGENTS.md.
Antes de implementar novas features, criar especificação em specs/. Ver specs/AGENTS.md para formato.
A forma mais simples de publicar um app Next.js é a Vercel. Veja também deploy na documentação do Next.js.
Projeto originalmente criado com create-next-app.