Side projects

Things I build for myself and friends, mostly with Claude Code.

Contextual Dummy Data Figma Plugin

The Contextual Dummy Data plugin panel in Figma, set to Hong Kong (HKD), listing the client fields it will fill

Built with

Figma Plugin API
TypeScript
Claude Code

Why I built it

Filling clienteling mockups for 13 markets by hand took about 2 minutes a screen, and the data often didn't add up, like order totals that didn't match their items or a +852 number in the Singapore view.

How it works

The plugin reads the selected frames, detects the page type, and fills the text layers with data that fits the market and the business logic: order totals with the right tax rate, phone formats and currency for each market, and statuses that match purchase dates. Components stay as instances, so the design system is preserved.

Built a Figma plugin with Claude to streamline dummy data entry when designing a multi-market productRead about my process

Social Media Paid Ads Dashboard

Built with

Claude Code
Next.js
Framer Motion

Why I built it

The paid ads for my own LEGO social media account (Legology) were spread across different platforms, so I centralised them to see the trend and keep track of the key metrics I want to benchmark.

How it works

It brings the paid ads data from each platform into one view and shows the key metrics I benchmark over time. It runs on private data, so there's no public link.

What I learned

How to structure the data and choose the right chart for each metric, so the tracking actually means something.

Trivia GameMobile-first

Visit live site(opens in a new tab)

Built with

Claude Code
Next.js
Neon Postgres
Upstash Redis
Vercel

Why I built it

My friends, their children and I wanted to learn something new, so I researched different topics and combined them into a trivia game everyone can play and compete in.

How it works

Pick a topic, answer as fast as you can, and compete with everyone else who has played.

Players can also share their results and challenge their friends by sharing the challenge invite.

What I learned

How to set up a Postgres database and an API, and the concept of caching.

Aircraft Spotting GuideMobile-first

Visit live site(opens in a new tab)

Built with

Claude Code
HTML
CSS
JavaScript
Vercel

Why I built it

I needed one place to centralise and organise all the knowledge I'd found about aircraft spotting, so I made a guide of it.

How it works

The guide groups what I've collected by manufacturer (Boeing, Airbus and engine makers), with quick identification tips.

Home Cook Diary

Built with

Next.js 16
TypeScript
Neon Postgres
Drizzle
Vercel Blob

Why I built it

I want to remember what my partner cooks for us, and for the log to become a menu we can cook from at home. Existing recipe apps focus on recipes and instructions, but I wanted to focus on the log and our own home-cooked menu.

How it works

You log a dish just after cooking it, and the diary organises everything you've cooked into shelves by country style.

What I learned

Using three.js, and Cache Components to bring you back to the same spot in the list when you go back from a dish.

Why kanban is good for AI-assisted personal development projectsRead about my process