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

SellerConnect

A Dutch Bol.com seller platform, shipped in 18 days.

Sector
E-commerce enablement · Netherlands
Role
Sole engineer, end to end
Duration
18 days
Year
2026
↓Scroll to explore showcase↓
SellerConnect
E-commerce enablement · Netherlands
TASE // 08

●METRICS

By the numbers.

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

01
0
pages
02
0
API endpoints
03
0
components
04
0k
lines of code
05
0
RLS policies
06
0
days

01 — What it does


What it
does.

SellerConnect sells done-for-you Bol.com operations to Dutch and Belgian merchants: product listing, inventory synchronisation, fulfilment and brand registration. The software is the front door to that service business rather than the service itself.

Fifteen public pages in Dutch carry the proposition, one per offer plus a savings calculator, a pricing comparison and a long-form application form. Two forms convert: a general contact form and a qualification form that captures store name, store URL, catalogue size and which services the merchant wants. Behind authentication sits an admin console where submissions are listed, opened, moved through a status workflow and exported to a spreadsheet, so the sales side of the business runs off the same deployment that markets it.

Eighteen days, first commit to last, one engineer.

02 — Module surface


22
screens.

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

22 OF 22 SURFACES SHIPPED
01SURFACE

Home

02SURFACE

Services

03SURFACE

Software

04SURFACE

Pricing

05SURFACE

How it works

06SURFACE

Integrations

07SURFACE

About

08SURFACE

Contact

09SURFACE

Support

10SURFACE

Bol: add products

11SURFACE

Bol: inventory

12SURFACE

Bol: fulfilment

13SURFACE

Bol: brand registration

14SURFACE

Bol: pricing

15SURFACE

Bol: application form

16SURFACE

Sign in

17SURFACE

Register

18SURFACE

Admin dashboard

19SURFACE

Applications

20SURFACE

Contacts

21SURFACE

Users

22SURFACE

Spreadsheet export

03 — Technical highlight


CORE ARCHITECTURE

Lead data is write-only from the public internet, three times over

A merchant filling in the qualification form never touches the database directly: the browser posts JSON to a route handler, which validates the required fields server-side and performs the insert with a server-held service key that never leaves the deployment.

The read path is built so that possessing anything the browser has grants nothing. Row-level security allows the anonymous role to insert into both intake tables and allows no select at all unless the caller has a profile row whose role is admin, so an exposed public key buys an attacker the ability to submit a lead, not to enumerate the pipeline. Edge middleware refreshes the session cookie on every non-static request and bounces unauthenticated traffic off the console. Each admin route handler then resolves the user again and re-reads the role from the database rather than trusting the middleware that already ran.

The redundancy is the point: a middleware matcher is one regular expression away from silently exempting a path, and a route handler is one refactor away from losing its guard, but a policy evaluated inside Postgres fails closed no matter which layer above it was misconfigured.

04 — Architecture


SYSTEM TOPOLOGY

How it
runs.

INFRASTRUCTURE RUNTIMEPROD VERIFIED

One Next.js App Router application on Vercel, with no separate backend service. Marketing pages render as server components and are served from the edge cache; 14 route handlers run as serverless functions for form intake, admin reads and spreadsheet export. Postgres, authentication and row-level policies come from Supabase.

CONSTRAINTS: 4 TOTALZERO COMPROMISE
01 / 04ENFORCED

Route groups split marketing from the console

A parenthesised group holds 15 public pages without contributing a URL segment, while the admin tree gets its own layout, navigation and guard. The filesystem states that boundary instead of a conditional.

SPEC CONSTRAINT
02 / 04ENFORCED

Authorisation re-checked at every layer

Middleware, route handler and database policy each deny independently. One gate is one point of failure, and the layer least likely to be edited by accident is the one in Postgres.

SPEC CONSTRAINT
03 / 04ENFORCED

Writes use a server-held key, reads never do

Nothing shipped to the browser can read the intake tables back, so the blast radius of a leaked public key is bounded at inserting a row.

SPEC CONSTRAINT
04 / 04ENFORCED

Effects isolated behind a single client boundary

One wrapper component carries the client directive, so the pages embedding animated backgrounds stay server-rendered and keep the edge caching that makes the marketing surface fast.

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.

04

GATEWAYS

13+

SERVICES

ZERO UNCHECKED SINKVERIFIED API
  • 01

    Identity and data

    4 SERVICES
    Supabase: PostgresauthenticationSSR cookie sessionsservice-role admin client
  • 02

    Credentials

    1 SERVICE
    NextAuth 4 credentials provider with bcrypt password hashing
  • 03

    Hosting

    3 SERVICES
    Vercel: edge cacheCDNserverless route handlers
  • 04

    Interface and reporting

    5 SERVICES
    Radix UIFramer Motionsimplex-noise backgroundsSheetJS exportWhatsApp deep link

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 build failed because a configuration object was exported

01 // SYMPTOM

The application ran in development, but every deploy failed at build time on the authentication route, with no runtime error to inspect.

02 // ROOT CAUSE

A route handler file may export the HTTP verb handlers and a short list of recognised configuration values, and nothing else. The catch-all authentication handler also exported its options object from that file so other server code could import it, and the framework rejected the unrecognised export at build time.

03 // ARCHITECTURAL FIX

The options object moved into a plain library module and the route file was reduced to the two handler exports the framework permits. Two earlier attempts, removing the export and swapping the whole library, had moved the problem rather than solving it.

02 / 03RESOLVED IN PROD

Two files claimed the same URL, and only production noticed

01 // SYMPTOM

The root URL behaved correctly locally and served the wrong thing once deployed, while the build reported a duplicate route.

02 // ROOT CAUSE

A parenthesised route group contributes no URL segment, so an index page inside the marketing group resolved to the same path as a root index page. A dynamic-rendering directive on the homepage changed which candidate the production build settled on, which is why the two environments disagreed.

03 // ARCHITECTURAL FIX

The homepage was given its own explicit route and the root path redirects to it in framework configuration, so the URL is declared once instead of inferred from directory naming.

03 / 03RESOLVED IN PROD

The animation layer would not survive server rendering

01 // SYMPTOM

Pages carrying the animated backgrounds and scroll effects failed to build, while the same components rendered correctly in isolation.

02 // ROOT CAUSE

The effect components reach for browser APIs that do not exist during a server render, so importing one into a server-rendered page pulled browser-only code into a server module graph. The first fix, adding the client directive per page, quietly converted static marketing pages into client components.

03 // ARCHITECTURAL FIX

A single wrapper component carries the client directive and renders its children unchanged, so any server page can embed an effect without becoming a client component itself.

01 OF 03

07 — Stack and outcome


CORE TECH TOOLKIT // 12 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 14 App Router
  • React 18
  • TypeScript
  • Postgres via Supabase
  • @supabase/ssr
  • NextAuth 4
  • bcrypt
  • Tailwind CSS 4
  • Radix UI
  • Framer Motion
  • SheetJS
  • Vercel
// COMMERCIAL & OPERATIONAL OUTCOME
MEASURED IMPACT

"A Dutch marketing surface, a lead pipeline and a sales console on one deployment, shipped in eighteen days, with the one thing that matters most in a lead business, the pipeline itself, unreadable from the public internet."

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

Have one
like this?