Tempa Digital

Digital product studio · Malaysia

Software that handles real money, real patients, and real hardware.

A small studio in Malaysia. I build the whole thing: the database, the checkout, the admin panel your team actually uses. And I stay on after launch, which is when the hard parts show up.

See the workStart a project

Keep scrolling — the next section takes one of these components apart.

Preparing scene

One component, taken apart

Every component on this site is four layers over five shared values. Change a value and all of it follows.

  • surface--radius
  • media--u
  • type--step-1
  • interaction--signal
  • --signaloklch(70% 0.155 163)
  • --axis-scale1.250
  • --u6px
  • --radius-lg4px
  • --dur-2200ms

  • The whole build

    { …, paidAt, stripeFee }

    An order only carries what it actually has yet. A refund date on an unpaid order is not a bug to catch later; it cannot be written.

  • Selling online

    218 sen → 9,418 IDR

    Card fees always come back in ringgit, whatever the customer paid in. Miss the conversion and every foreign order quietly reports the wrong profit.

  • Interfaces that hold

    The same component in all five. None of them were retrofitted.

  • Getting found

  • Machine learning

    • open85.9%
    • power88.9%
    • pinch79%
    • key68.6%

    Weighting costs aggregate accuracy and buys back the rare grips. For a prosthetic hand that is the correct trade.

Work

Four projects. The hardest part of each one is running right here on this page, not screenshotted. Click it.

Live

Consultant neurosurgeon

Private client work

A practice site for a consultant neurosurgeon in Malaysia: conditions, patient guides, publications, and a career timeline, all editable through a Supabase-backed admin area.

Patients read these pages before brain surgery. Accessibility and clarity were requirements, not preferences.

Written for patients, not doctors
18 pages
Conditions and guides rewritten from clinical sources into language someone can read the night before surgery.
Findable when it matters
Structured for search
Someone searching a condition at 2am finds the page, not the homepage.
Readability
Passes AA
Every text colour measured against its background; the faint greys were replaced.
Edits it himself
No developer needed
Conditions, guides, publications, photos and videos, all editable from a login.
  • Next.js 16
  • TypeScript
  • Supabase
  • Tailwind v4
  • JSON-LD
Text on paperbefore
  • ink / 40% opacity2.13:1FAIL
  • ink / 50% opacity2.70:1FAIL
  • ink / 60% opacity3.51:1FAIL

Measured against the page they sit on. All three are too faint to be readable, which is why they went.

Live

Gunung

gunungclimbing.my

Direct-to-consumer climbing gear for Southeast Asia. Storefront, inventory, checkout, and a four-market currency system, end to end.

Commerce that handles real money, real inventory, and four currencies in production.

Four markets, four currencies
MY · ID · SG · PH
The right country and currency picked automatically, and remembered. Rupiah prices drop the decimals, because rupiah does not have any.
Sells while you sleep
Stock stays honest
Inventory decrements on payment, not on add-to-cart, so two people cannot buy the last one.
Database changes since launch
14
Each one applied to a live store without losing an order.
Payments
Books actually balance
Card fees come back in ringgit whatever the customer paid in, and get converted before they hit the order.
  • Next.js 16
  • React 19
  • Supabase
  • Stripe
  • Vercel
RegionMYR
MYR189.00

MYR carries two decimals.

state

Real rates from the shipped storefront, and the button runs its real loading state when clicked.

Live

Midpoint

midpoint.city

Finds a fair meeting point for a group: three optimisation strategies, live voting, in-meeting chat, and venue discovery around the result.

When the map provider goes down, it quietly switches to a backup and the user never sees an error.

When the map provider dies
Nobody notices
A second service takes over mid-request. An outage on their end is not an outage on yours.
“Fair” is three different answers
You pick which
Shortest distance, everyone travels the same time, or least total travel. They rarely agree.
Everyone sees it live
Voting and chat
Votes and messages appear for the whole group as they happen.
Findable on Google
Every page
Pages arrive complete rather than being assembled in the browser, so search engines can read them.
  • Next.js
  • Supabase
  • Leaflet
  • Foursquare
  • OpenRouteService
Routingidle
  1. OpenRouteService
  2. Failover
  3. GraphHopper

Waiting to work out travel times

Two map services are set up. The main one goes first.

Live

Bangkit Bionics

Research project

A prosthetic hand that reads what the wearer is trying to do. Sensors on the forearm pick up muscle signals, and a model works out which of four grips was intended, twenty times a second.

The model with the best headline score was the worse model. Picking the right one meant knowing which mistakes hurt.

Grips read correctly
84.9%
Across 22 people, on recordings the model had never seen.
Hardest grip, before and after
42% → 69%
The key grip was the one it kept missing. Fixing that cost some overall accuracy and was worth it.
Reads muscle signals
20 times a second
Filtered to strip out electrical noise and heartbeat before anything is decided.
Works for amputees
6% → 64%
Trained on people with intact limbs first, then adapted. That transfer is what made it usable.
  • PyTorch
  • NumPy
  • SciPy
  • WebSocket
  • NinaPro
Reading grips from muscle signalschosen
  • Open85.9%
  • Power88.9%
  • Pinch79.0%
  • Key68.6%

Overall score 84.9%. Lower on paper, better in the hand: pinch and key are the grips you reach for, and both now clear the line.

Client feedback

What people say

A few words from people I have built with, shipped with, and learned from.

In the many times I've worked with Alwi, he's always effectively led us to success. He's always mindful of our aims and objectives and keeps our team motivated towards reaching our goals

Ronit SarnaSoftware Developer

Alwi demonstrated exceptional agency right from the start. He quickly grasped our goals, took proactive steps without needing constant direction, and produced remarkable results in record time. We couldn't have asked for a better collaborator

Martynas PociusCo-founder, NarrativeScapes

I was impressed by the dedication and expertise throughout our project. The responsive design and performance optimizations resulted in a significant increase in user engagement for our platform.

Emma DavisMarketing Director, Growth Solutions

In the many times I've worked with Alwi, he's always effectively led us to success. He's always mindful of our aims and objectives and keeps our team motivated towards reaching our goals

Ronit SarnaSoftware Developer

Alwi demonstrated exceptional agency right from the start. He quickly grasped our goals, took proactive steps without needing constant direction, and produced remarkable results in record time. We couldn't have asked for a better collaborator

Martynas PociusCo-founder, NarrativeScapes

I was impressed by the dedication and expertise throughout our project. The responsive design and performance optimizations resulted in a significant increase in user engagement for our platform.

Emma DavisMarketing Director, Growth Solutions

Hover to pause · More voices, same standard

Approach

The unhappy paths, first

What the screen does while it is loading, when the form is empty, when the payment fails. These get built alongside the normal case, because bolting them on later is how they end up missing entirely.

Change one thing, not fifty

Every colour, size and spacing comes from one place. Rebrand a site, tighten the spacing, shift the whole palette: one edit, not a week of hunting through files.

Checked, not eyeballed

On the neurosurgeon’s site, three greys looked fine and measured too faint to read for anyone with low vision. They were replaced. Patients read those pages before brain surgery.

Launching is the easy half

Gunung has had fourteen rounds of database changes since it went live, none of which lost an order or dropped the store. Most work happens after launch, and that is the part people forget to budget for.

Now change it yourself

Everything you have scrolled past comes from the five values below: the cards, the buttons, the type, the spacing, the timing. Drag any of them and the whole page retunes at once. Nothing falls out of alignment, nothing becomes unreadable, and every setting stays accessible.

Why this matters for your project

A site built this way can be rebranded, re-spaced, or tuned for a new audience without rebuilding it. Change happens in one place instead of five hundred, so it stays cheap after launch, which is where most of a site’s life is spent.

Current values
  • --signaloklch(70% 0.155 163)
  • --axis-scale1.250
  • --u6px
  • --radius-lg4px
  • --dur-2200ms

Control surface

Five values. Drag any of them — every component on the page follows, and none of them break.

0deg

Rotates ground and both accents together in OKLCH. Lightness and chroma are held, so contrast is constant across the range.

1.250

Modular ratio. Every step is the previous one multiplied by this value.

6px

Base spacing unit. Every gap on the page is a multiple of it.

4px

Outer radius. Inner corners are computed from it, so nested curves stay concentric.

1.00x

Multiplies every duration. Disabled when the system asks for reduced motion.

Accent on ground7.19:1AAA

Measured live with the WCAG 2.1 formula against the current palette rotation. Lightness and chroma are pinned per role, so no position on the palette axis can drop this below AA.

Have something that needs building?

Tell us what it is, what it has to do, and when it needs to be live. Work that is not a fit gets said so directly.

hello@tempadigital.example

Placeholder address — the studio inbox is not set up yet.