About This Prototype

This is a working prototype of Mahogany, built entirely by Claude (Opus 4.6) in a single session from the prompt below. The stack is Next.js, SQLite, D3.js, and Tailwind CSS. It was deployed to a bare Debian VPS with nginx and Let's Encrypt.


The Prompt

We're going to build a prototype of a B2B SaaS app. Mahogany helps companies build compensation bands and administer changes. Leadership can set budgets and managers can see clearly where their teams are relative to market rates. Managers then take compensation changes through an approval process and the changes propagate into payroll systems. We think setting compensation for employees is a hard problem to solve. Mahogany is a tool that allows companies to set compensation bands and manage compensation changes. We also want to make it really easy to see where employees lie relative to market rates. There are some tools for larger companies that are expensive and lock you into an entire suite of products. For smaller companies there are antiquated spreadsheets that require them to do manual import/export into excel. They have to manage the approval process and feed that into payroll (ADP). Graphing + charting. A big part of this is going to be having a flexible way to add charts. As an example there is a graph in this directory that has two axes: employee level, and compensation. Each employee is a dot, having a level and a total compensation. Shaded regions on the chart indicate market rates, so some employees are outside the shaded regions if their compensation is not in-band. There is a social benefit to this software as well; larger teams will use it to correct unfair imbalances based on gender, race or any protected criteria. So splitting the data by gender, race, and age on the fly is a desired criteria. Seed data: a company of about 300 people. Maybe 30 managers, 150 engineers of different levels, 10 designers. No real auth — just a role switcher between Manager and Leadership views.

What Got Built

  • Dashboard — stat cards showing headcount, pending requests, employees out of band, average compa-ratio
  • Comp Bands chart — D3 visualization with level vs. salary, shaded band regions, employee dots color-coded by range status, and demographic overlays (gender, race, age)
  • Employees — searchable/filterable roster with expandable rows showing demographics and a salary change proposal form
  • Change Requests — approval workflow where leadership can approve/reject proposed salary changes
  • Band Settings — editable compensation bands per job function and level (leadership only)

Stack

  • Next.js 16 (App Router)
  • SQLite via better-sqlite3 (seeded with ~300 employees)
  • D3.js for the compensation band visualization
  • Tailwind CSS v4
  • Deployed on Debian 13 / nginx / Let's Encrypt