● refactoringbuildingsamridhlimbu.com/projects/tapcraft · v0.1

❯ cd projects/tapcraft

TapCraft Studio

● shipping · co-founderupdating

Headless Shopify storefront for 3D-printed NFC keychains — real-time 3D colour variant switching via Three.js material updates (no GLB swaps), headless affiliate tracking via Web Pixel, and a full B2C → B2B site migration.

tapcraft.shop code

0ms

3D variant switch

glb reloads

B2C→B2B

migration

Context

Co-founder, Feb 2026–present. TapCraft sells 3D-printed NFC keychains — tap the keychain to a phone and it opens a link. The product is physical but the UX problem is digital: show people exactly what their custom keychain will look like before they order. I built the full headless Shopify frontend, solved two non-trivial headless problems (3D variant switching, affiliate tracking), and led the pivot from consumer to B2B.

Timeline

Feb 2026

Co-founder, day one

Rejected WordPress + Shopify theme. Built the full headless Shopify + Next.js 16 frontend from scratch — full control over layout, 3D viewer, and checkout flow.

Feb 2026

3D product viewer

React Three Fiber viewer for 3D-printed NFC keychains. Colour variants switch by updating Three.js material properties on the loaded model — no GLB swap, no reload, no delay.

Mar 2026

Affiliate tracking in headless

UpPromote hooks into native Shopify checkout. In headless mode those hooks are gone. Solved via Shopify Web Pixel API + cart context events to attribute affiliate clicks correctly.

Mar 2026

B2C → B2B migration

Full site pivot: catalogue restructure, 301 redirect mapping, and 3D customiser repositioned as a bulk-quote tool. UpPromote affiliate tracking carried over.

Key technical decisions

three.js material update › glb swap per variant

Swapping GLB files on colour change means re-parsing and re-uploading geometry on every click. Updating the material colour is a single property assignment — instant, no network request.

web pixel + cart events › native shopify affiliate hooks

Headless checkout breaks UpPromote's default event hooks. Shopify Web Pixel runs in a sandboxed iframe with access to cart context — the only reliable way to attribute affiliate referrals in headless.

shopify storefront api (graphql) › shopify rest admin api

Storefront API is the public-facing, read-optimised surface for headless frontends — products, variants, cart mutations, and checkout. Admin API is for backend operations, not product pages.

cloudflare r2 › s3 for 3d assets

R2 has no egress fees. 3D model files are large and fetched on every product page load — egress adds up fast with S3.

3D variant switching

kairos/scheduler.pypy

1// colour variant switch — no GLB reload
2function applyVariant(scene, hex) {
3  scene.traverse(obj => {
4    if (obj.isMesh && obj.material) {
5      obj.material.color.set(hex)
6      obj.material.needsUpdate = true
7    }
8  })
9}

Traverse the scene graph, find every mesh, set the material colour. No file fetch, no geometry re-parse, no loading state. The model stays loaded — only the appearance changes. This is the entire colour switching implementation.

Stack

FrontendNext.js 16 · React Three Fiber · Tailwind v4

BackendShopify Storefront API (GraphQL)

InfraVercel · Cloudflare R2

tapcraft.shop source ← back to projects

1// colour variant switch — no GLB reload

2function applyVariant(scene, hex) {

3 scene.traverse(obj => {

4 if (obj.isMesh && obj.material) {

5 obj.material.color.set(hex)

6 obj.material.needsUpdate = true

7 }

8 })