TASE Logo
Case study 10 / 20
←All Work
TASE ARCHITECTURE

EcomStride

Eighty-one testimonials, fifteen services, zero database reads.

Sector
eCommerce services · Amazon agency
Role
End-to-end design and development
Duration
4 months
Year
2026
↓Scroll to explore showcase↓
EcomStride
eCommerce services · Amazon agency
TASE // 10

●METRICS

By the numbers.

Production telemetry, active capacity, and engineering scale measured in live deployment.

01
0
service offerings
02
0
testimonials
03
0
components
04
0
routes
05
0
database reads on marketing pages
06
0 mo
build

01 — What it does


What it
actually does.

EcomStride is the public web presence and inbound-lead engine for an agency that manages Amazon marketplace accounts. Visitors move through a services catalogue, individual service pages, an about and credentials narrative, a testimonials wall and a consultation form. The site's single commercial job is to turn a cold visitor into a tracked inbound lead, then hand that lead to the operator through a private dashboard.

The data model is deliberately narrow. One persisted entity, the lead, is captured from the public form. Everything else the visitor reads, the fifteen service definitions, their long-form detail and eighty-one testimonials, lives as typed data in the repository rather than in the database, so the marketing pages render without a single database read and every content change ships through code review.

The public surface also carries a dedicated Amazon Selling Partner API data-access policy that maps each service to the specific API roles it relies on.

02 — Module surface


13
screens.

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

13 OF 13 SURFACES SHIPPED
01SURFACE

Home

02SURFACE

Services (15 offerings)

03SURFACE

Service detail

04SURFACE

About and credentials

05SURFACE

Testimonials

06SURFACE

Contact and lead capture

07SURFACE

Privacy

08SURFACE

Terms

09SURFACE

SP-API data-access policy

10SURFACE

Admin login

11SURFACE

Admin dashboard

12SURFACE

Leads manager

13SURFACE

Settings

03 — Technical highlight


CORE ARCHITECTURE

One anonymous key, two very different callers

The same Supabase key serves the public form, which may insert a lead and read nothing, and, after authentication, the admin dashboard, which may read, update and delete. Rather than trusting the caller, every privileged path is written on the assumption that the database may silently refuse it: writes ask for their affected rows back, and an empty result is treated as a rejection, not a success.

Session continuity across React Server Components runs through the Supabase SSR cookie adapter, refreshed on each request by the proxy handler so that a server-rendered admin page and its client components share one authenticated identity. Keeping authorisation in the database rather than only in application code was the right call for a single-operator tool: the rules live in one place, and the database itself is the enforcement point.

04 — Architecture


SYSTEM TOPOLOGY

How it
runs.

INFRASTRUCTURE RUNTIMEPROD VERIFIED

One Next.js 16 application on Vercel's serverless runtime is the only internet-exposed process. It speaks to Supabase for persistence and identity and to Resend for transactional email. There is no separate backend, queue or scheduler; the only asynchronous step is a single notification email dispatched after a lead is saved.

CONSTRAINTS: 4 TOTALZERO COMPROMISE
01 / 04ENFORCED

Content as typed source, not database rows

Services, service detail and testimonials are compiled into the build, so the marketing site serves with no database round trip.

SPEC CONSTRAINT
02 / 04ENFORCED

Authorisation in the database

The anonymous key is scoped to inserts, while reads and mutations require an authenticated session, so a misused public key cannot surface the lead table.

SPEC CONSTRAINT
03 / 04ENFORCED

Session enforced in a root proxy handler

Every admin request refreshes and checks the session before the route renders, keeping access control out of the individual page components.

SPEC CONSTRAINT
04 / 04ENFORCED

Email isolated from lead capture

The Resend call is wrapped so a mail outage still persists the lead and still returns success to the visitor, because losing the lead is the one unacceptable outcome.

SPEC CONSTRAINT
01 OF 04

05 — Integrations


ECOSYSTEM MAP

What it
talks to.

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

03

GATEWAYS

6+

SERVICES

ZERO UNCHECKED SINKVERIFIED API
  • 01

    Persistence and identity

    4 SERVICES
    Supabase: PostgresAuthrow-level securitySSR cookie sessions
  • 02

    Email

    1 SERVICE
    Resend
  • 03

    Hosting

    1 SERVICE
    Vercel serverless

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 delete that reported success and changed nothing

01 // SYMPTOM

An operator deleted or edited a lead, saw the action confirmed, then found the record unchanged after refreshing.

02 // ROOT CAUSE

Row-level security was declining the write, but a delete or update that returns no representation completes with no error object. The client received no error and inferred success. The refusal was silent by design.

03 // ARCHITECTURAL FIX

Every privileged write now appends a row-returning select, and an empty array is treated as a rejection rather than a success, raising an explicit error to the operator. Relaxing the database rules was rejected because the goal was to detect the refusal, not to stop refusing.

02 / 03RESOLVED IN PROD

Fonts that broke the build, not the page

01 // SYMPTOM

After the move to the Turbopack bundler, the production build aborted on font handling, even though the pages looked correct in development.

02 // ROOT CAUSE

The JavaScript-based Google Fonts loader path was not resolved the same way under the new production build.

03 // ARCHITECTURAL FIX

Font loading moved to a plain CSS import, which the bundler resolves without special handling. Preferred over pinning the bundler because it removes the dependency on bundler-specific resolution altogether.

03 / 03RESOLVED IN PROD

One animation library, two import paths

01 // SYMPTOM

After a dependency overhaul, components that used animation stopped compiling.

02 // ROOT CAUSE

The animation library ships under two entry points and the codebase mixed them; the overhaul left a set of imports pointing at the path that no longer resolved.

03 // ARCHITECTURAL FIX

Imports normalised to one consistent entry point across the component tree, chosen over compatibility shims because removing the ambiguity leaves nothing to maintain later.

01 OF 03

07 — Stack and outcome


CORE TECH TOOLKIT // 9 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
  • Resend
  • Tailwind CSS 4
  • Framer Motion
  • Radix UI
  • Vercel
// COMMERCIAL & OPERATIONAL OUTCOME
MEASURED IMPACT

"A marketing site that renders without touching the database, a lead engine that cannot lose a lead to a mail outage, and an operator dashboard whose every write is verified rather than assumed."

Status: 100% Operational & Scaled
TASE ARCHITECTURE VERIFIED ✓
NEXT PRODUCTION ENGAGEMENT

Have one
like this?