Deal Estimation InterfaceBDG

Salespeople were estimating deals in spreadsheets.

BDG's 250+ person ad sales team managed deals through an internal Deal Desk app. Salespeople estimated deals manually across multiple spreadsheets, copying values between files and totaling by hand before presenting to clients. It worked, but it was slow and error-prone for a revenue-critical workflow.

The app had its own issues. It was scaffolded with Avo, which helped early on but made custom design work harder over time. The form workflow was especially clunky: adding a line item opened a side drawer with a long scrolling form full of fields that weren't always relevant.

Strip it down, then build what's missing.

I started by auditing what was getting in the way. Avo's defaults were adding interaction overhead users didn't benefit from. I replaced scaffolded views with purpose-built interfaces, starting with the most-used pages and working outward until the whole app had a consistent feel.

Same problems, different stack.

The recreation includes the estimation page, simplified drawer forms, and the async export flow. The full branching form workflow is stripped back and authentication is removed, but core interactions and data relationships are preserved.

Choosing the stack

Next.js was new to me and a good fit for this project. Server components mapped well to my data-fetching patterns, server actions replaced what Turbo had handled for forms, and TypeScript added full-stack type safety. Tailwind stayed as the one tool I used in both versions.

Neon over Supabase

I initially chose Supabase for its built-in auth, but auth felt unnecessary for a portfolio piece and the free tier kept pausing during gaps between sessions. Neon was simpler: always-on and no unused features.

Prisma over Drizzle

I wanted to replicate how Rails' Active Record lets you interact with data as objects. Prisma's API was the closest match. Drizzle was more performant by reputation but read more like raw SQL.

// Active Record (Rails)
Order.find(id)

// Prisma
prisma.order.findUnique({ where: { id } })

// Drizzle
db.select().from(orders).where(eq(orders.id, id))

Sitting closer to the problem.

Early on, I sat in on a meeting with the sales team to understand their workflow. At the time I treated it as a formality. I had my tasks and knew what to build. Looking back, that was a missed opportunity. Understanding how users actually work, not just what they need, is what separates a correct implementation from a genuinely useful one.

This project changed how I think about what I build. Before Deal Desk, most of my work was on reusable UI components for brand websites. This was the first time I built something with a direct impact on someone's daily productivity, and it shifted my perspective on what front-end engineering can accomplish.