Skip to main content

From Figma prototype to real-time estimation platform

Another overview of Estimation platform
Estimation platform overview screenshot
Project Overview

The consulting team now builds, prices, and shares project estimates with their clients in real time, with Salesforce connected and no account setup required on the client side. We turned their Figma prototype into a production-ready platform in thirteen weeks.

Our Client

Our client is a technology consulting firm based in the U.S.. Their consultants build project estimates every day, breaking work down into practices, workstreams, activities, and roles. That process was running entirely through spreadsheets and manual emails, slowing down collaboration and making it hard to share polished estimates with clients.

Their team had already mapped out the solution in Figma. They needed a team to bring it to life.

"They helped keep the development timeline on track. There was a little bit of overage due to scoping and estimation, but the team identified it early and managed it successfully for project delivery."

CTO, U.S. Technology Consulting Firm (via Clutch)
The Challenge: A Complex Data Model and Three External Systems

The estimation model had four nested levels, and every pricing change at the bottom needed to ripple upward through the whole hierarchy, updating costs, margins, and timelines along the way. The application also needed to connect to three external systems and support multiple users editing the same estimate simultaneously.

  • Modeling a four-level estimation hierarchy: the Figma prototype described a nested data structure where estimates contain practices, practices contain workstreams, workstreams contain activities, and activities contain activity details, each with its own pricing, scheduling, and team data. Every level needed sortable tables, CRUD operations, and real-time updates, with a dual low/high pricing model cascading through every calculation.

  • Connecting three external systems: the application needed to authenticate internal users through Azure AD, pull live account and contact data from Salesforce, and serve real-time updates through Supabase so multiple estimators could work on the same estimate at the same time.

  • Managing scope growth without slipping the timeline: when the Salesforce integration required more depth than the initial estimate allowed, we flagged the gap early, co-owned a formal change order with the client, and absorbed the expansion without shifting the delivery window.

Estimation platform overview
Estimation platform overview
Our Solution: A Real-Time Platform Built on Next.js and Supabase

Estimators needed to see each other's changes as they happened, clients needed to review estimates without setting up accounts, and access rules had to hold up across both surfaces. We built on Next.js 14 and Supabase because that combination covered all three: Realtime subscriptions for live collaboration, magic-link OTP alongside Azure AD for the two very different audiences, and Row-Level Security so access rules live in the database itself.

We kept the architecture lean: business logic like margin math, template cloning, and rate-history snapshots lives in Postgres functions and triggers rather than the app server, so each layer stays focused on what it does best.

The consulting team can now build estimates collaboratively, share a polished branded preview with clients through a single link, and spin up a new estimate from a template in minutes.

What we built:

  • A real-time estimation dashboard with full-text search, multi-column sorting, and a Salesforce-aware filter bar
  • A four-level detail workspace for managing practices, workstreams, activities, and activity details, with live cost, margin, and team-size strips
  • A Gantt chart rendering dual low/high bars per workstream on a weekly timescale
  • A Salesforce integration through Supabase Edge Functions, surfacing accounts, opportunities, and contacts inside slideover drawers
  • Magic-link client sharing: scoped access via Row-Level Security, a branded read-only preview, and a slider that toggles between low and high estimates
  • A template system backed by Postgres stored procedures that deep-copy an entire estimate hierarchy in a single transaction

"They provided detailed development documentation that was useful for aligning development and documenting the features. Each development cycle included videos of the functionality as part of the push to the code repository."

CTO, U.S. Technology Consulting Firm (via Clutch)
How the Engagement Ran

Five of us worked on the engagement: a project manager, two front-end engineers, a backend engineer, and our lead engineer, who is also one of Seta's co-founders. Time zones gave us a full business day of overlap with the client's team, so questions got answered the same morning rather than the next. Weekly demo meetings showed stakeholders working software rather than slide decks, and every code push included a short screen recording of what shipped that sprint, so the client team could follow progress without needing to open a pull request.

When the Salesforce integration turned out to need more depth than the original estimate covered, we flagged the gap as soon as we saw it, walked through the trade-offs with the client, and agreed on a formal change order together. The delivery window held. In the Clutch review, their CTO described it as "identified early by the team and managed successfully for project delivery."

Results: From Spreadsheets to a Live Collaboration Platform

The MVP shipped on schedule and the consulting team moved straight into a user feedback phase. In their CTO's words: "MVP features functioned as documented; now moving to user feedback capture for future updates."

0
Weeks to MVP
0
External systems integrated
0
Value for cost (Clutch)
0
Overall Clutch rating
  • The consulting team collaborates in real time: multiple estimators can work on the same estimate simultaneously, with live stat counters, instant table refreshes, and in-app notifications, all powered by Supabase Realtime.

  • Clients can review and comment without an account: magic-link sharing and the threaded comment system let customers review, annotate, and compare low/high estimates through a single link.

  • New estimates spin up in minutes, not hours: the template system and modular data architecture let the team reuse their best work, and the rate-card audit trail keeps historical pricing intact as rates change.

Milestones

February, 2024

Kickoff and Figma Breakdown

We broke down the Figma prototype, modeled the four-level estimation hierarchy, and groomed a full backlog across six epics.

February, 2024Foundation: Auth, Database, and CI

Azure AD single sign-on, the Postgres schema, Row-Level Security policies, and GitLab CI pipelines for migrations and edge functions all came online in the first two weeks.

March, 2024

Estimation Dashboard and Salesforce Integration

The estimates dashboard shipped with stats, CRUD, multi-column sorting, full-text search, and a six-filter bar. Salesforce account search, contacts, and opportunities surfaced inside slideover drawers.

March, 2024Scope Expansion and Change Order

The Salesforce integration required more depth than the initial estimate covered. We identified the gap early, flagged it to the client, and co-owned a formal change order. The delivery window held.

April, 2024

Templates, Client Review Flow, and Gantt Chart

Estimate templates with deep-copy stored procedures, the magic-link client review flow with a low/high range slider, and the Gantt chart with dual bars per workstream went live.

May, 2024Commenting, Notifications, and Rate Cards

Threaded comments, database-triggered notifications, and the role and rate card module with utilization-based margin calculations rounded out the collaboration and pricing features.

May, 2024

Handoff and User Feedback Phase

The production-ready platform was delivered on schedule. The consulting team began using it with their clients and moved directly into a user feedback phase to shape future iterations.

Key Takeaways
  • Scope changes are manageable when visibility is high. Weekly demos, per-sprint video walkthroughs committed alongside the code, and a proactive change-order process let us absorb a scope expansion without slipping the delivery window.
  • Keeping core logic in Postgres paid off. On this project, putting margin math, template cloning, and rate-history snapshots into database functions and triggers kept the data layer authoritative as the UI evolved, and the application server simpler to reason about.
  • Row-Level Security as the source of truth. Enforcing client access restrictions at the database meant the same rules applied whether a request came from the internal app, the magic-link client view, or any future surface.

What's Next?

The platform is live and generating real feedback from the consulting team and their clients. They are already shaping the next round of priorities: analytics dashboards, advanced reporting, deeper CRM automation. The foundation supports all of them.

More case studies

BizzyCar project overview

BizzyCar

We turned BizzyCar’s prototype into a full-fledged web application, enabling automotive dealerships to manage vehicle recalls effortlessly.

Vexels project overview

Vexels

We boosted Vexels' design capabilities by developing advanced tools, improving the overall design experience and user engagement.

Che Boludo! project overview
Che Boludo! project overview

Che Boludo!

We created an interactive mobile app with cutting-edge features to expand the "Che Boludo!" book, bringing its experience to life.

Upbe project overview

Upbe

We empowered Upbe with tailored web components for seamless integration, boosting their AI-driven platform’s functionality and insights.

Shopify Plus project overview

Shopify Plus

We stabilized a high-volume enterprise's operations, resolved critical issues, and led a seamless migration to modern infrastructure.

RainbowChase project overview
RainbowChase project overview

RainbowChase

We optimized a real-time rainbow tracking app, by improving performance and expanding coverage for a better user experience.

Let's build something
together!