Every project starts as a drawing. Each case study below plots its wireframe first, then builds into the real screens. Flip between Plan and Built to compare.
01A-201
Internal company portal · 2026
SPR Construction
One portal for every job on the board
Private client build · shown by drawing
spr-construction / hubPlan view
N-1 Brief
SPR Construction needed one internal home for the whole job lifecycle (open bids, awarded work, contracts, and client relationships) behind a single company sign-in.
Next.js 16
React 19
TypeScript
Tailwind CSS
Auth.js + Entra ID
Neon Postgres
N-2 Scope
Hub launcher with role lenses: Admin, Project Manager, and Engineer each get their own stats and recommended tiles.
Pre-Award board: assign engineers, track due dates and site visits, and keep document folders together.
Post-Award delivery: milestones, change orders, and budget vs. actual for awarded jobs.
Contract Review: PDF and Word extraction, AI summaries, and retrieval-augmented Q&A over key terms.
CRM pipeline for owners, contacts, opportunities, and next actions.
Admin control plane: users and roles, cron jobs, notifications, and feature flags.
N-3 Outcome
One sign-in across every module, with Microsoft Entra single sign-on and 12-hour sessions.
Same-origin app paths, light and dark themes, and deep links straight to a job or view.
A photography site that feels like sitting in a screening room, not scrolling a grid, and that still books shoots.
Next.js 16
React 19
Three.js
React Three Fiber
Resend
Sharp
Zod
N-2 Scope
Opening credits and a countdown leader before the reel.
Scroll-driven 3D helix reel in React Three Fiber with a custom film shader and a CSS fallback.
Film-strip library with genre filters, lightbox, and real EXIF data.
Viewfinder cursor that focus-locks onto anything clickable.
“Call Sheet” booking form with clapperboard UI, honeypot, rate limiting, and Resend email delivery.
Photo ingest pipeline: Sharp resizing, blur placeholders, and dominant-color extraction.
N-3 Outcome
A distinct brand system (monogram, signature, palette) carried through every page.
The same contact pipeline now powers this site's Request for Proposal sheet.
Detail 03 · Internal tools
The Ace Electronics suite
Three internal apps built at Ace Electronics on one shared user registry: a single source of truth for credentials, roles, and per-app access.
01
JobTrack Production management
Work orders, multi-process timers with pause/resume, testing, inspection, kitting, and supervisor oversight, with daily Google Drive sync.
React
Express
PostgreSQL
02
EstimatePro Estimation + BOM
Bill-of-materials management with five-level quantity-break pricing, vendor tracking, and a database sync tool with live progress.
React
Express
Drizzle
PostgreSQL
03
LogiTrack Warehouse inventory
Inbound receiving: scan items, assign locations, and track LPN transactions across 38k+ items, with Excel import and export.
React
Express
Drizzle
PostgreSQL
Detail 04 · Concept builds
Spec work, built like client work
Three fictional businesses, one per industry, each with its own brand. The companies, people, and reviews are invented and every site says so; the code, the forms, and the Tallyboard app are real.
C1A-201
Concept build · Trades · 2026
Ridgeline Builders
A contractor site built to turn visits into walkthroughs
A fictional Central Jersey general contractor. The goal: look established, answer the questions homeowners actually ask, and make requesting a quote take under a minute.
Next.js 16
React 19
TypeScript
CSS Modules
Zod
Resend
N-2 Scope
Three-step quote wizard (project, details, contact) with per-step validation and a spam honeypot.
Project gallery with trade filters and a drag-to-compare before/after slider.
Service-area page with a county map and ZIP code checker, plus LocalBusiness structured data for local search.
Click-to-call header, FAQ accordion, and review blocks placed where hesitation happens.
N-3 Outcome
A rugged, high-contrast brand (condensed type, safety orange, hazard-stripe dividers) that reads at a glance on a phone.
Forms run in demo mode until an email key is set, so the build is safe to share.
C2A-201
Concept build · Professional services · 2026
Hart & Vale CPAs
A quiet, trustworthy front door for an accounting firm
A fictional two-partner CPA firm in Westfield, NJ. The site needed to feel calm and credible, explain six practice areas plainly, and book consultations.
Next.js 16
React 19
TypeScript
MDX
CSS Modules
Zod
N-2 Scope
Practice-area pages that each deep-link into a pre-filled consultation request.
Consultation form with service, client type, format, and preferred time slots.
Insights articles written in MDX, plus a team page with credentials.
Live tax calendar that shifts deadlines past weekends and federal holidays and counts down to the next one.
N-3 Outcome
An editorial brand (serif display type, forest green, ledger-style details) distinct from the other concepts.
AccountingService structured data, generated Open Graph images, and a client-portal teaser kept out of search.
A fictional sales-and-inventory dashboard for small retailers. Unlike the other concepts, this one is a full-stack product: sign in, create a workspace, invite your team, and manage stock.
Next.js 16
React 19
TypeScript
Auth.js
Drizzle ORM
Neon Postgres
Stripe
N-2 Scope
Marketing site with features, pricing tiers, and a changelog.
Auth.js sign-in with magic links, GitHub, and a one-click read-only demo that reseeds itself nightly.
Workspaces with owner, admin, and member roles, shareable invite links, and plan-based seat limits.
Dashboard with revenue, orders, and days-of-cover metrics; inventory with search, low-stock filters, and reorder points.
Billing through Stripe test mode, or a mock plan switcher when no keys are set.
N-3 Outcome
Every write is checked server-side against the user's role and plan, and the demo workspace can't be modified.
Runs with zero configuration on an embedded Postgres, and on Neon in production.
