Dutch Pay Master

N-bang Calculator (Dutch Pay Master)

• One-line intro: A settlement web app that cleanly splits complicated group expenses and turns each person's share into a receipt-style image to share.
• Period: 2026.01 – 2026.01
• Role: Personal project (sole owner of planning, UI design, and frontend development)
• Tech stack: React, TypeScript, Tailwind CSS, Vite

Why I built it / The problem

After group gatherings, settling up complicated payments was often confusing—sharing who joined which items and how much each person owed as plain text just wasn't intuitive. To solve this, I wanted a tool that visualizes each person's amount like an actual receipt and lets you save and share it as an image along with the account details for transfers.

Key features

• Managing participants and itemized expenses: Freely set the participants, and precisely assign who shares the cost of each expense item to calculate accurate split amounts.
• Personalized receipt UI: Based on the full expense data, render an intuitive receipt-style card for each person showing their items and final amount.
• Image capture and instant sharing: Let users instantly download an individual receipt or the full settlement as a .png image to share easily via messenger.

What I worked through myself

When saving a receipt image to the device, I ran into a technical challenge: making sure only the actual receipt content was captured, without the on-screen buttons or UI elements. Using the html2canvas library to convert DOM elements into images, I injected CSS padding and a background color dynamically only during the capture moment, and excluded the unnecessary download button from the render target—resulting in a polished image that looks like a real paper receipt.

I also thought carefully about how to design React state and derived state efficiently to handle the complex mapping between many participants and expense items, which helped me build up my frontend state-management skills.