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

AxoneSIM

eSIMs for travellers who pay with JazzCash, not Visa.

Sector
eCommerce · Travel connectivity
Role
End-to-end design and development
Duration
About one month
Year
2026
↓Scroll to explore showcase↓
Axon eSIM
eCommerce · Travel connectivity
TASE // 07

●METRICS

By the numbers.

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

01
0
payment integrations
02
0
order states
03
0
routes
04
0
API routes
05
0
components
06
0 mo
build

01 — What it does


What it
does.

Axon eSIM sells data-only eSIM plans to travellers, built for a market where most buyers pay through local wallets rather than international cards. Visitors browse plans priced in both PKR and USD, place an order, pay by JazzCash, EasyPaisa, card or bank transfer, and receive their eSIM QR code and activation details by email and WhatsApp.

Five tables hold the whole business: customers, plans, orders, payments and admins. An order is a text-keyed record (AXN-ABC123-XY99) that links a customer to a plan and moves through a seven-state lifecycle: pending, paid, processing, delivered, activated, then expired or cancelled, with a payments row recorded per attempt.

Access control is server-authoritative. Row-level security locks every table to the database service role and exposes only active plans to anonymous readers, so all order, payment and customer access happens server-side through API routes that hold the service key. The admin area adds a role check against an admins table that runs on every navigation.

02 — Module surface


20
screens.

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

20 OF 20 SURFACES SHIPPED
01SURFACE

Home

02SURFACE

Plans

03SURFACE

Checkout

04SURFACE

Order tracking

05SURFACE

Activate

06SURFACE

Setup guide

07SURFACE

Account dashboard

08SURFACE

Login

09SURFACE

Register

10SURFACE

Password reset

11SURFACE

Terms

12SURFACE

Refund policy

13SURFACE

Privacy policy

14SURFACE

Admin dashboard

15SURFACE

Admin orders

16SURFACE

Order detail

17SURFACE

Customers

18SURFACE

Plans admin

19SURFACE

Analytics

20SURFACE

Settings

03 — Technical highlight


CORE ARCHITECTURE

A state machine wrapped around a human

ARCH
Order tracking: the customer-facing edge of the seven-state lifecycle.
↳Order tracking: the customer-facing edge of the seven-state lifecycle.

Because the primary payment path is a local transfer rather than a synchronous card gateway, a human verification stage sits inside the order lifecycle. The customer uploads a payment screenshot at checkout; an admin later views that proof and sets the eSIM, either uploading the QR image to storage or pasting a QR URL and activation code.

That single action transitions the order to delivered, cascades any still-pending payment to success so the payment record matches the verified state, and fires a delivery email whose contents render conditionally on which eSIM fields were provided. Keeping every transition server-side under the service role means the browser never mutates an order directly, so a record can only advance along the defined path.

For a market where card penetration is low and money arrives by wallet transfer, a manual-verification state machine models how payment actually happens rather than forcing customers through a gateway they would not complete.

ARCH
Order tracking: the customer-facing edge of the seven-state lifecycle.
↳Order tracking: the customer-facing edge of the seven-state lifecycle.

04 — Architecture


SYSTEM TOPOLOGY

How it
runs.

INFRASTRUCTURE RUNTIMEPROD VERIFIED

One Next.js 16 application on Vercel is the only internet-exposed process. It talks to Supabase (Postgres, Auth and Storage) and, from server code only, to four payment providers, Resend for email and Twilio for WhatsApp. Eleven API routes carry all privileged work using the Supabase service role.

CONSTRAINTS: 4 TOTALZERO COMPROMISE
01 / 04ENFORCED

Server-authoritative data access

Every table is locked to the service role and only active plans are readable anonymously, so a leaked public key exposes nothing about orders, payments or customers.

SPEC CONSTRAINT
02 / 04ENFORCED

Two-tier admin authentication

A cheap cookie-session gate runs in the proxy, while the authoritative admins-table role check lives in the admin layout so it re-runs on every navigation, not just first load.

SPEC CONSTRAINT
03 / 04ENFORCED

Payment providers behind per-gateway modules

JazzCash, EasyPaisa, Safepay and Stripe each sit behind their own module over one shared order and payment model, so adding or swapping a provider never touches the lifecycle.

SPEC CONSTRAINT
04 / 04ENFORCED

Fulfilment proof travels with the order

The payment screenshot is stored and referenced from the payment record, so an admin verifies the actual proof before a delivery transition rather than trusting a status flag.

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

12+

SERVICES

ZERO UNCHECKED SINKVERIFIED API
  • 01

    Persistence, identity, storage

    4 SERVICES
    Supabase: PostgresAuth with Google OAuthStorage bucketsrow-level security
  • 02

    Payments

    3 SERVICES
    JazzCash and EasyPaisalocal walletsSafepayStripecard
  • 03

    Email and messaging

    2 SERVICES
    ResendTwilio for WhatsApp delivery
  • 04

    Analytics and 3D

    3 SERVICES
    Google AnalyticsRecharts dashboardsthree.js and react-three-fiber globe

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 delivery that emailed the customer but never updated the order

01 // SYMPTOM

An admin set the eSIM details and marked an order delivered. The customer received the delivery email, but the order stayed in its previous state and the payment still showed pending.

02 // ROOT CAUSE

The update that advanced the order reported its failure in the returned result object rather than by throwing, and the code did not read that value. The write was not applying while the surrounding flow, including the email, proceeded as though it had.

03 // ARCHITECTURAL FIX

The delivery path now checks the returned error and stops on failure, and on success cascades any pending payment to success so the history matches the verified state. Reading the returned error was chosen over a blanket try/catch because the client signals this class of failure through the result value, not an exception.

02 / 03RESOLVED IN PROD

The order you could not delete

01 // SYMPTOM

Removing a customer, plan or order from the admin either failed outright or left dependent records stranded.

02 // ROOT CAUSE

The foreign keys tying payments to orders, and orders to customers and plans, were defined without any on-delete behaviour, so the database refused a delete that would orphan child rows.

03 // ARCHITECTURAL FIX

ON DELETE CASCADE on the three relations, so removing a parent cleanly removes its dependents. Cascade was chosen over soft deletes because a payment or order row has no meaning once its parent is gone.

03 / 03RESOLVED IN PROD

The site Google would not read

01 // SYMPTOM

The production site was not being indexed, and its pages were not surfacing in search.

02 // ROOT CAUSE

Three independent issues combined into one symptom: robots.txt did not allow the framework asset paths the rendered pages depend on, there was no sitemap, and a favicon metadata declaration conflicted with the framework's own handling.

03 // ARCHITECTURAL FIX

Worked from the crawler's side, in terms of what an indexing fetch would actually see. robots.txt rewritten, a generated sitemap added, the conflicting favicon declaration removed.

01 OF 03

07 — Stack and outcome


CORE TECH TOOLKIT // 16 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
  • Twilio
  • Stripe
  • JazzCash
  • EasyPaisa
  • Safepay
  • three.js
  • react-three-fiber
  • Recharts
  • Zod
  • Tailwind CSS 4
  • Vercel
// COMMERCIAL & OPERATIONAL OUTCOME
MEASURED IMPACT

"A store that takes JazzCash and EasyPaisa as seriously as Visa, delivers eSIMs by email and WhatsApp, and never lets a browser move an order forward on its own."

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

Have one
like this?