A privacy-focused bill splitting utility that performs all calculations client-side and uses URL hash for state sharing.
TabSplit helps you split bills and shared expenses with ease. It performs all calculations in your browser and uses the URL hash to store and share state, eliminating the need for a database and ensuring complete privacy. The application supports both manual data entry and automated receipt processing using OpenAI's API.
- 🧾 Manual & Automated Entry - Input bill details manually or upload a receipt image for automatic data extraction
- 🔒 Privacy First - No user or bill data stored on servers, entirely stateless operation
- 🧮 Client-Side Calculations - All splitting logic, including tax and tip, executed in-browser
- 🔗 Secure Sharing - Split details encoded into self-contained URLs for easy sharing
- 💅 Modern UI - Responsive interface built with Next.js, React, and shadcn/ui
- 📊 Visual Breakdown - Split details presented in both tabular and chart formats
- Framework: Next.js / React
- UI Components: shadcn/ui, Tailwind CSS
- State Management: React Hook Form, URL hash-based state
- Validation: Zod
The application operates entirely client-side with all calculations, data manipulation, and state management happening in the user's browser. This ensures no sensitive information is ever transmitted to or stored on a server.
Instead of a traditional database, the application state is serialized and stored in the URL's hash fragment:
- User inputs data in the TabForm
- Form state (TabSchema) is serialized to a query string
- String is appended to the URL hash (/split#...)
- On page load, useHash hook parses and validates the hash data
Two serverless API routes support optional features:
/api/processReceiptUpload- Handles receipt scanning via OpenAI API/api/og- Generates dynamic social media preview images
- Node.js
- npm (or yarn/pnpm)
-
Clone the repository
git clone https://github.com/saharshxyz/tabsplit cd tabsplit -
Install dependencies
npm install
-
Configure environment variables
# Create .env.local and add: OPENAI_API_KEY=your_openai_api_key_here -
Start development server
npm run dev
Visit http://localhost:3000
Run the test suite:
npm test