DK SplitBill is a web application that helps roommates, friends, and teams split shared expenses quickly. Track what each person owes, distribute discounts and fees fairly, and generate an Indonesian QRIS code so people can pay on the spot.

• Add items with prices and assign each one (with quantities) to the right people.
• Support fixed or percentage discounts that can be applied per-person or prorated per-item.
• Split shipping and miscellaneous fees evenly or based on each person’s subtotal.
• Track payment status per person and open a QRIS payment modal to collect money instantly.
• Persist the entire bill in the browser’s local storage so nothing is lost on refresh.

• React 18 with TypeScript and Vite 5 for a fast, typed development experience.
• Tailwind CSS for utility-first styling.
• lucide-react for modern, accessible icons.
• modify-qris to generate QRIS payment codes on the fly.

• Node.js 18 or newer.
• npm 9 or newer (ships with recent Node.js releases).

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open the app at http://localhost:5173 and begin adding items and people.

• npm run dev – start the Vite development server.
• npm run build – create a production build in dist/.
• npm run preview – preview the production build locally.
• npm run lint – lint the project with ESLint.
• npm run deploy – build and publish to GitHub Pages (requires repository access configuration).

Begin by adding every billable item along with its price. Add the people who are sharing the bill, then assign each item to the appropriate person (or multiple people using quantities). Apply discounts, shipping, and other fees as needed; the Summary panel recalculates totals instantly and highlights what each person owes. Mark someone as paid to keep track, or open the payment modal to let them scan the QRIS code and pay directly. All data is cached locally, so you can close the tab and resume later.

• QRIS payment source: Set VITE_QRIS_CODE in a .env file to override the default QRIS payload:

  echo "VITE_QRIS_CODE=000201..." > .env

  The modal will generate a QR image using this payload and the amount due.
• Currency: Amounts are formatted with the Indonesian Rupiah (IDR) locale by default. Adjust formatCurrency in src/utils/calculations.ts if you need a different currency.

src/
├─ components/      # UI pieces for items, people, summary, and payment modal
├─ context/         # React context that stores bill, people, and assignments
├─ types/           # Shared TypeScript interfaces
├─ utils/           # Calculation helpers and formatting utilities
└─ main.tsx         # Application entry point

Contributions are welcome—feel free to open issues or submit pull requests during Hacktoberfest (or any time) to improve the splitter, add new distribution rules, or polish the UI.

Thanks to all who have contributed to this project!

• @rbayuokt