Case study 09 / 20

TASE ARCHITECTURE

EvolutEcommerceSolutions

Eight service lines, two funnels, one pipeline that never drops a lead.

Sector

Ecommerce services · Lead generation

Role

Full build

Duration

About 3 months

Year

2026

↓Scroll to explore showcase↓

Ecommerce services · Lead generation

TASE // 09

01 — What it does

What it
does.

Evolut presents an ecommerce services agency to prospective brand owners and turns interest into booked calls. It covers eight service lines (Amazon account management, Shopify and MERN development, branding and listing optimisation, advertising, product photography, sourcing, freight forwarding and trademark work), each with its own detail page, alongside a portfolio, an insights library and two conversion paths: a standard contact form and a dedicated paid-traffic consultation funnel.

The data model is deliberately small: two entities. A contact submission captures general enquiries, and a consultation lead captures funnel responses, with the qualifier answers stored as structured JSON so a new funnel step does not require a schema change. The database runs row-level security with no public policies, so the browser key can read nothing; all reads and writes go through a server-only service role, and the admin inbox sits behind a signed, httpOnly session cookie.

02 — Module surface

12
screens.

Every discrete surface designed, engineered, and shipped in production. Zero placeholder concepts — 100% functional software.

12 OF 12 SURFACES SHIPPED

01SURFACE

Homepage

02SURFACE

Services index

03SURFACE

Eight service pages

04SURFACE

Portfolio

05SURFACE

Case study pages

06SURFACE

About

07SURFACE

Insights

08SURFACE

Articles

09SURFACE

Contact

10SURFACE

Consultation funnel

11SURFACE

Trademark and IP

12SURFACE

Admin lead inbox

03 — Technical highlight

CORE ARCHITECTURE

A pipeline that never drops a lead

↳The eight service lines as one composed grid; each card is one of 43 section components.

A submission is validated against a discriminated union that branches on a kind field, a lightweight onboarding capture versus a full qualifier, which lets one endpoint serve two very different payloads without collapsing them into a shared lowest-common-denominator schema.

The request then passes a single rate-limit window keyed to the visitor, has its IP hashed before anything is stored, and fans out to four destinations: a structured leads table for analysis, a mirror row in the operations inbox so the team works from one queue, an internal notification email, and a confirmation email to the prospect. Each write and each email is guarded independently, so a failure in one does not discard the lead or abort the others.

The decision that makes this more than plumbing is the strict-versus-tolerant field boundary: machine-read fields are validated as fixed ASCII slugs while human-readable copy is accepted as free text. That split is what stops the form from ever rejecting an answer it just produced, and it is why the pipeline stays reliable as the funnel copy changes.

04 — Architecture

SYSTEM TOPOLOGY

How it
runs.

INFRASTRUCTURE RUNTIMEPROD VERIFIED

A Next.js App Router project deployed to Vercel as serverless functions. Server route handlers are the only code that touches the database, reached through managed Postgres on Supabase via a service-role credential. Transactional email through Resend and scheduling through a Cal.com embed are the outbound integrations.

CONSTRAINTS: 4 TOTALZERO COMPROMISE

01 / 04ENFORCED

One request contract, two shapes

A discriminated union serves both the onboarding capture and the full qualifier from a single endpoint, so neither form is forced through the other's schema.

SPEC CONSTRAINT

02 / 04ENFORCED

Strict where it counts, tolerant where it must be

Machine fields are validated as fixed slugs and human copy is left free-form, so the server never rejects its own valid output when display text is re-encoded.

SPEC CONSTRAINT

03 / 04ENFORCED

One abuse window per visitor, not per endpoint

The rate guard is a shared module used by both public routes, so a bot cannot multiply its attempts by hitting two endpoints instead of one.

SPEC CONSTRAINT

04 / 04ENFORCED

Privacy by construction

Visitor IPs are hashed before storage and the database enforces row-level security with no public policies, so only server code can read or write lead data.

SPEC CONSTRAINT

01 OF 04

DECISION 01
ENFORCED
One request contract, two shapes
A discriminated union serves both the onboarding capture and the full qualifier from a single endpoint, so neither form is forced through the other's schema.
SPEC CONSTRAINT
DECISION 02
ENFORCED
Strict where it counts, tolerant where it must be
Machine fields are validated as fixed slugs and human copy is left free-form, so the server never rejects its own valid output when display text is re-encoded.
SPEC CONSTRAINT
DECISION 03
ENFORCED
One abuse window per visitor, not per endpoint
The rate guard is a shared module used by both public routes, so a bot cannot multiply its attempts by hitting two endpoints instead of one.
SPEC CONSTRAINT
DECISION 04
ENFORCED
Privacy by construction
Visitor IPs are hashed before storage and the database enforces row-level security with no public policies, so only server code can read or write lead data.
SPEC CONSTRAINT

05 — Integrations

ECOSYSTEM MAP

What it
talks to.

Every third-party API, external boundary, data pipeline, and payment rail hardened and operating in production.

04

GATEWAYS

4+

SERVICES

ZERO UNCHECKED SINKVERIFIED API

01
Database
1 SERVICE
SupabasePostgreSQL with row-level security
02
Email
1 SERVICE
Resend
03
Scheduling
1 SERVICE
Cal.com embedded booking
04
Messaging
1 SERVICE
WhatsApp direct chat handoff

06 — Problems solved

DIAGNOSTIC LOG & ROOT CAUSE ANALYSIS

What broke,
and how we found it.

Feature lists show what was built. These post-mortems show how obscure edge cases and silent production bugs get diagnosed and permanently resolved.

01 / 03RESOLVED IN PROD

The headings that lost their spaces

01 // SYMPTOM

Multi-word headings across the site rendered with the words run together.

02 // ROOT CAUSE

The headline animation wraps each word in its own inline-block with an overflow mask, and the separating space was the last character inside that box. CSS collapses trailing whitespace at the end of an inline element, so every inter-word space was discarded at render time.

03 // ARCHITECTURAL FIX

The separator space moved out of each word's masked box and between the boxes as a normal text node. A fixed margin was rejected because it does not scale with font size.

02 / 03RESOLVED IN PROD

The copy that could vanish

01 // SYMPTOM

On some loads, whole sections of marketing copy stayed blank and never appeared.

02 // ROOT CAUSE

Scroll-reveal relied on an intersection observer to flip content from hidden to visible. When the observer never reported an intersection, for example in a tab opened in the background, the content stayed at opacity zero permanently.

03 // ARCHITECTURAL FIX

Explicit in-view state plus a short fallback timer that forces the content visible if no intersection is reported. Reduced-motion visitors bypass the animation entirely. The rule adopted: marketing copy must never be hidden by a missed animation event.

03 / 03RESOLVED IN PROD

The form that rejected its own answers

01 // SYMPTOM

The consultation funnel returned a generic validation failure for submissions that were complete and correct.

02 // ROOT CAUSE

The funnel was posting to the general contact endpoint, whose schema required a long free-text message the funnel never collects. A later attempt pinned the budget field to an exact list of display strings containing typographic dashes, so any re-encoding of that copy made the server reject the form's own output.

03 // ARCHITECTURAL FIX

The funnel got its own endpoint with a discriminated-union schema that validates the machine fields as fixed slugs and accepts the budget copy as free text.

01 OF 03

INCIDENT 01

RESOLVED IN PROD

The headings that lost their spaces

01 // OBSERVED SYMPTOM

Multi-word headings across the site rendered with the words run together.

02 // ROOT CAUSE DIAGNOSIS

The headline animation wraps each word in its own inline-block with an overflow mask, and the separating space was the last character inside that box. CSS collapses trailing whitespace at the end of an inline element, so every inter-word space was discarded at render time.

03 // ARCHITECTURAL FIX

The separator space moved out of each word's masked box and between the boxes as a normal text node. A fixed margin was rejected because it does not scale with font size.

INCIDENT 02

RESOLVED IN PROD

The copy that could vanish

01 // OBSERVED SYMPTOM

On some loads, whole sections of marketing copy stayed blank and never appeared.

02 // ROOT CAUSE DIAGNOSIS

Scroll-reveal relied on an intersection observer to flip content from hidden to visible. When the observer never reported an intersection, for example in a tab opened in the background, the content stayed at opacity zero permanently.

03 // ARCHITECTURAL FIX

Explicit in-view state plus a short fallback timer that forces the content visible if no intersection is reported. Reduced-motion visitors bypass the animation entirely. The rule adopted: marketing copy must never be hidden by a missed animation event.

INCIDENT 03

RESOLVED IN PROD

The form that rejected its own answers

01 // OBSERVED SYMPTOM

The consultation funnel returned a generic validation failure for submissions that were complete and correct.

02 // ROOT CAUSE DIAGNOSIS

The funnel was posting to the general contact endpoint, whose schema required a long free-text message the funnel never collects. A later attempt pinned the budget field to an exact list of display strings containing typographic dashes, so any re-encoding of that copy made the server reject the form's own output.

03 // ARCHITECTURAL FIX

The funnel got its own endpoint with a discriminated-union schema that validates the machine fields as fixed slugs and accepts the budget copy as free text.

07 — Stack and outcome

CORE TECH TOOLKIT // 14 DEPENDENCIES

Built
with.

Every dependency is chosen deliberately for raw execution speed, strict type safety, zero cold-start latency, and battle-tested reliability under high concurrent load.

Next.js 16
React 19
TypeScript
Supabase
Zod 4
Tailwind CSS 4
Framer Motion
GSAP
Three.js
React Three Fiber
Resend
Cal.com
Lenis
Vercel

// COMMERCIAL & OPERATIONAL OUTCOME

MEASURED IMPACT

"Eight service lines, two funnels and a lead pipeline in which every write and every email is guarded independently, so the one unacceptable outcome, a lost lead, cannot happen quietly."

Status: 100% Operational & Scaled

TASE ARCHITECTURE VERIFIED ✓

←

PREV STUDYSellerConnect

NEXT STUDYEcomStride

→

EvolutEcommerceSolutions

By the numbers.

What it
does.