ajay-naik/bill-splitter

1. Overall shape

This is a client-side React single-page app built with Vite. The repository contains no server code, so the whole bill-splitting workflow runs in the browser, with external API calls used only for receipt parsing.

2. Application entry and shell

index.html and src/main.jsx are the bootstrapping layer. src/App.jsx is the top-level application shell that likely wires routing and global layout, while src/styles/Global.css, index.css, and App.css provide app-wide styling.

3. Route-driven user flow

The main UX is split into page-level views under src/pages/:

- Home.jsx — landing / start point

- Scanner.jsx — receipt upload and OCR-based parsing

- Manual.jsx — manual item entry

- Person.jsx — assign items to people

- Summary.jsx — final owed amounts

This suggests a linear workflow where users either scan or enter data, then assign items, then review totals.

4. Core business flow: bill splitting

The central data flow is: receipt or manual items → people selection → per-person totals → summary. The app’s important rule is item-level ownership: each item can be assigned to one or more people, while tip and tax are distributed evenly across all participants.

5. Scanner subsystem

src/Api/BillParser.jsx is the main integration boundary for the AI receipt path. The README indicates it combines Tesseract.js OCR with the Gemini API to extract item names and prices from receipt images. This is the only explicit external service boundary in the repo.

6. Manual entry subsystem

Manual.jsx and the reusable item-entry components support a non-AI path where users add items, quantities, and rates by hand. This is an alternative input source, but it feeds the same downstream splitting logic as the scanner.

7. People assignment and split logic

Person.jsx appears to be the decision point where each bill item is assigned to specific diners. The architecture likely stores item-to-person associations here, then computes owed amounts based on those selections plus shared tip/tax.

8. Shared UI components

src/components/ contains reusable presentation pieces:

- Button.jsx

- BackButton.jsx

- Grid.jsx

- NewItem.jsx

- input.jsx

These form the reusable UI layer across multiple pages, separating interaction widgets from page-specific flow logic.

9. Styling and presentation boundaries

Styling is split between component/page CSS and global styles under src/styles/. The repo also mentions Bootstrap in the README, so the UI is a mix of framework styling and custom CSS rather than a fully custom design system.

10. Runtime/configuration boundary

The app depends on a browser-exposed env var, VITE_GEMINI_API_KEY, which means the Gemini integration is configured at build time through Vite. vite.config.js and eslint.config.js cover build and code-quality tooling, reinforcing that this is a frontend-only repository.

11. Deployment and external footprint

The README says the app is deployed on Vercel, so the production artifact is a static frontend bundle. There is no evidence of persistence, authentication, or backend storage; the “share summary” feature is therefore likely client-side sharing rather than a backend-hosted account system.

12. Useful diagram boundaries

For an architecture diagram, the main boxes should be: React app shell, page-based workflow, shared UI components, receipt parsing pipeline (OCR + Gemini), and computed split summary. The important arrows are from user input to parsing/entry, then to assignment, then to calculation and display.