ModBox Admin

Context

ModBox sells factory-built homes, and every deal starts as a message through the website’s contact form. Before this dashboard existed, those messages arrived in an inbox with no context: no idea which page the person read, how they found the site, or whether the quote the team emailed back was ever opened.

ModBox Admin is the private console I built into the same Next.js app as the public site. The sales team uses it every day to work leads, see how visitors actually move through the site, and send quotes they can track.

All screenshots on this page come from a local demo instance with a fictional dataset. The names, emails, amounts and traffic are invented, and the IP addresses come from the ranges reserved for documentation. They are captured at 3840×2160, as the dashboard looks on a 32-inch 4K monitor.

Approach

A CRM that knows where each lead came from

The leads view is a small sales pipeline: status, owner, estimated value, a follow-up date, and a notes thread that records who wrote each note. Opening a lead marks it read, and the list can be filtered by stage, by “follow-up due” or by “my leads”, then exported to CSV.

The part a generic CRM can’t do is attribution. The analytics and the leads live in the same database, so every lead carries the visitor’s journey: the landing page, the traffic source, every page viewed before submitting, what they clicked, and how long it took them to decide. Visits are matched through a salted hash of the address plus a first-party cookie, so the trail holds together across sessions without storing anything a third party could use.

First-party analytics, built for the questions sales asks

Pageviews, unique visitors, bot share, referrers, devices, a day-by-hour heatmap, a live view and a visitor map, all collected by the site itself with no Google Analytics and no third-party tracker. Each pageview records dwell time and scroll depth, sent with a beacon as the visitor leaves. The individual-visits table lets the team open any single view and see what that person did.

One small honesty rule: the map draws a radius, never a pin, because city-level geolocation is not a location.

Funnels that explain the drop-off

• Conversion funnel. All visitors, then those who reached the contact page, then submissions. Sessions are rebuilt in SQL with window functions and a 30-minute idle rule, which also yields entry and exit pages, page-to-page flows, bounce rate and session length.
• Content performance. Median time on page and how far down each page people actually scroll, so a guide that ranks well but loses readers halfway shows up immediately.
• Form drop-off. A field-by-field funnel of the contact form: how many people focused each field, whether they left it filled or empty, and the last field touched in sessions that started the form but never sent it.

A document vault for quotes

Quotes used to go out as PDF attachments, which can be forwarded anywhere. The File Encryptor replaces that:

• The original PDF never leaves the server as a file. Each recipient gets their own link, and every page is rendered to an image on the server before it is sent.
• Every rendered page carries an invisible forensic watermark tied to that link.
• Links can expire, be capped at a number of opens, or be revoked, and revoking also deletes the rendered pages.
• The access log records each open and page read with device and city. Per reader, it shows time spent on each page and how far they scrolled, so the team knows whether a quote was actually read before calling.
• Documents link back to the lead, so a lead’s page shows every quote sent to that person and how it was read.

Trace a leak

If a quote turns up somewhere it shouldn’t, the team drops the image into Trace a leak, and the dashboard names the link it was issued under. The mark survives screenshots, re-compression, cropping, and pages the browser scaled to fit the window.

In the demo below, the input is a cropped browser screenshot of the recipient view, captured on a 4K display, so the page arrives at 125% of its original size. The tool measured that scale, read the mark from about 1,500 background cells, and returned the right recipient. It does not survive a phone pointed at a monitor, and the page says so plainly.

Security and privacy

• Access. Each admin signs in with an email and a personal access key, with optional TOTP two-factor. Keys are stored only as hashes. Failed logins are rate-limited with a lockout, and sessions expire.
• No admin surface to map. An unauthenticated request to a real admin endpoint gets the same 404 as a path that does not exist.
• Request integrity. CSRF protection on every state-changing request, and hardened, host-locked cookies.
• Abuse screening. Contact submissions are screened for threats and spam. Flagged messages land in their own queue with the matched reasons and an evidence export, and never trigger an auto-reply.
• Data retention. Raw IP addresses are purged after a retention window, while the anonymised hashes that keep the reports working stay.

Results & What I Learned

In daily use by the ModBox sales team. Leads, quotes and traffic now live in one place, and the first question on every call, “how did you find us and what have you read?”, is answered before the phone rings.

• Put the CRM where the data already is. Attribution was nearly free because analytics and leads share one database. Bolting a third-party CRM onto a third-party analytics tool would have needed an integration, and would still have lost the journey.
• Do sessionization in SQL. Window functions over pageviews give sessions, funnels and flows in one query, with no event pipeline to maintain.
• For documents, aim for attribution, not prevention. No web page can stop a screenshot. What actually changes behaviour is a recipient knowing a copy can be traced back to them, and the team being able to prove it in under a minute.

Tech Stack

App: Next.js 16 (App Router, Server Components, Route Handlers) · React 19 · TypeScript · Tailwind CSS v4

Data: PostgreSQL · postgres.js · SQL window functions · Leaflet

Documents: Ghostscript · sharp · server-side rendering with forensic watermarking

Security: hashed access keys · TOTP · CSRF tokens · rate limiting