DevRoast is a small full-stack project built during Rocketseat’s NLW Operator event, focused on exploring AI-assisted developer tools.
The application allows users to paste code snippets and receive an automated quality review, including a score, categorized feedback, and suggested fixes. An optional Roast Mode adds a sarcastic tone to the analysis for a more playful experience.
The project was developed following the event's guided architecture while adapting parts of the implementation and UI. It served as a practical exploration of AI integration, type-safe APIs, and modern React full-stack patterns.
Problem
The goal was to build a playful developer tool that evaluates code quality using AI.
The challenge was designing a simple workflow where developers could paste code, receive meaningful feedback, and understand suggested improvements quickly.
The project was developed during Rocketseat's NLW Operator event, which focused on agentic workflows and integrating AI into real-world full-stack applications.
Architecture
The project follows a modern TypeScript-first full-stack architecture inspired by the structure proposed during the NLW event.
The frontend is built with Next.js and React, while the API layer uses tRPC to provide end-to-end type safety between client and server. Data fetching and caching are handled through TanStack Query, ensuring consistent loading and error states.
Persistence is implemented using Drizzle ORM, and input validation relies on Zod, keeping request handling predictable and safe.
Implementation
The core feature allows users to submit code snippets and receive an AI-generated evaluation with a numeric score and categorized feedback such as critical issues, warnings, and good practices.
Additional features implemented in the project include:
-
Roast Mode, which increases the sarcastic tone of the AI feedback
-
Suggested fixes, displayed as a diff-style improvement proposal
-
A Shame Leaderboard, ranking the lowest-scoring submissions for a humorous comparison between users
The UI focuses on clarity for reading code, including improved formatting and line alignment to make feedback easier to understand.
Impact
This project served as a practical introduction to building AI-assisted developer tools and working with modern full-stack TypeScript patterns.
Through the implementation, it was possible to practice integrating LLM APIs, structuring typed API contracts, and organizing React applications with predictable data flows.
The project also reinforced concepts around developer experience, including readable code interfaces and clear feedback presentation.