kalidou.dev

Unlock Protocol: Frontend

Core frontend engineer on Unlock Protocol's open-source membership platform: shipped the no-code Checkout Builder, redesigned the dashboard, and led the JavaScript-to-TypeScript migration across 650+ commits.

Role
Frontend Engineer
Stack
React, Next.js, TypeScript, Tailwind CSS, wagmi/ethers
Year
2023

Context

Unlock Protocol is an open-source protocol for memberships as NFTs. I joined as a Web3 frontend developer after being selected for UDT Grantee Class 1 in 2021, and worked as a core frontend engineer from February 2022 to August 2023 — 650+ commits in the main repository. Across an 8–9 person product team I owned features end to end, from Figma and design through to production.

Problem

Checkout flows for minting memberships get sophisticated quickly: multiple locks, metadata collection, recurring payments, network selection. Configuring one meant hand-writing JSON against a spec, a hard stop for the creators and communities the protocol was built for. More broadly, the dashboard exposed raw protocol machinery, and the codebase was untyped JavaScript.

What I built

I designed and built the Checkout Builder: a no-code, split-screen tool with a real-time preview. Configuration on one side, the live checkout on the other, with URL generation and JSON export for developers.

Also shipped:

  • Lock Settings redesign: reorganized every membership-contract parameter into five logical groups, removing the need for lock managers to touch a block explorer. Announcement
  • Transaction receipts: printable, privacy-scoped purchase receipts with seller VAT/business details, for expense reporting on NFT purchases. Announcement
  • Certifications: a builder for issuing verifiable credentials as non-transferable NFTs, with airdrop-by-email. Announcement

  • Events page redesign: cover images, custom URL slugs, and walletless RSVP by email. Announcement

  • Advanced withdrawals: withdrawal flows for lock managers beyond the default one-click path.
  • Multi-chain purchase and verification flows: purchase and key-verification across networks, handling failed transactions, gas estimation, and wallet edge cases.

And led the migration of the app from JavaScript to TypeScript, introducing unit and module testing along the way.

Key decisions

  • Split-screen live preview instead of a wizard: users see exactly what buyers will see, at every step.
  • JSON export kept the tool useful for developers, not just no-code users: the builder became the fastest way to write a config by hand.
  • Auto-save and saved configurations (shipped as follow-ups) so complex checkouts could be iterated on safely.

Impact

The Checkout Builder replaced hand-written JSON as the way checkout flows are configured, and every feature above shipped to production on an open-source platform where the work is publicly auditable. I authored the public announcement for each feature I built.

Proof

worksnext