Paste your code. Get roasted.
DevRoast is a fullstack web application where you submit code and receive AI-powered feedback, either constructive or brutally sarcastic, depending on your bravery. Every roast is scored and ranked on a public leaderboard of shame.
Gravando.2026-03-18.195117.mp4
Built during the NLW Operator event by Rocketseat.
- Code Editor — syntax-highlighted editor with auto language detection for 14+ languages and dual light/dark theme support.
- Two Review Modes — Normal mode gives professional, constructive feedback; Roast Mode unleashes maximum sarcasm.
- AI Analysis — powered by Gemini, each submission returns a score (0–10), a verdict, a list of issues with severity levels, and a suggested code fix with a unified diff.
- Shame Leaderboard — the worst code on the internet, ranked by score ascending.
- Dark Mode — default theme, because developers only code at night.
- Rate Limiting — Limited roasts per IP per hour, enforced at the database level.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19 + Tailwind CSS v4 |
| API | tRPC v11 + TanStack Query v5 |
| AI | Google Gemini Flash via Vercel AI SDK |
| Database | PostgreSQL 16 + Drizzle ORM |
| Syntax Highlighting | Shiki (editor) + highlight.js (language detection) |
| Linting / Formatting | Biome |
| Testing | Playwright (E2E) |
| Package Manager | pnpm |
src/
├── app/ # Next.js App Router pages and API
│ ├── api/trpc/[trpc]/ # tRPC HTTP handler
│ ├── leaderboard/ # /leaderboard page
│ ├── roast/[id]/ # /roast/:id result page
│ └── page.tsx # Home page
├── components/
│ ├── home/ # Home page components (editor, actions bar, leaderboard preview)
│ ├── layout/ # Navbar
│ ├── leaderboard/ # Full leaderboard components
│ ├── roast/ # Roast result components
│ └── ui/ # Generic UI primitives (Button, Badge, ScoreRing, etc.)
├── server/
│ ├── index.ts # tRPC init and context
│ ├── router.ts # All tRPC procedures
│ ├── analysis.ts # Gemini AI integration and response parsing
│ └── utils/diff.ts # Unified diff generation
├── trpc/ # tRPC client, provider, and server utilities
├── db/
│ ├── schema.ts # Drizzle schema (roasts, analysis_items)
│ └── index.ts # Database connection
└── lib/
├── diff.ts # Shared diff parsing utility (client + server)
└── shiki.ts # Shiki highlighter singleton
- Node.js 20+
- pnpm
- Docker (for PostgreSQL)
git clone https://github.com/tvc95/devroast.git
cd devroast
pnpm installCreate a .env.local file in the project root:
DATABASE_URL=your_postgresql_database_url_here
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_hereTo get a Gemini API key, visit Google AI Studio.
docker compose up -dpnpm db:migratepnpm db:seedThis inserts 100 fake roasts with randomized scores and analysis items, useful for testing the leaderboard.
pnpm devOpen http://localhost:3000 to view the app.
| Command | Description |
|---|---|
pnpm dev |
Start the Next.js development server |
pnpm build |
Build for production |
pnpm start |
Start the production server |
pnpm lint |
Run Biome linter |
pnpm format |
Run Biome formatter (writes changes) |
pnpm db:generate |
Generate a new Drizzle migration from schema changes |
pnpm db:migrate |
Apply pending migrations to the database |
pnpm db:push |
Push schema directly to the database (skips migration files) |
pnpm db:studio |
Open Drizzle Studio (visual database browser) |
pnpm db:seed |
Seed the database with fake development data |
- Fork the repository
- Create a feature branch:
git checkout -b feat/my-feature - Follow the code conventions enforced by Biome:
pnpm lint - Before implementing a significant feature, create a spec file in
specs/following the format inspecs/AGENTS.md - Submit a pull request
This project was developed by Thiago Viana and is under the MIT license.
MIT © 2026 — built as a portfolio project.
