Reconly is a browser-based CSV reconciliation tool that compares order and payment records. It helps identify matched records, amount differences, missing payments, and payments without a corresponding order.
This is a frontend portfolio project built with React and TypeScript.
- Upload order and payment CSV files
- Validate file size, required columns, values, and duplicate records
- Review validation issues before reconciliation
- Match records using normalized order IDs
- Search and filter reconciliation results
- View result summaries and paginated records
- Process files locally in the browser
Files must be comma-separated .csv files, no larger than 2 MB, with a maximum of 5,000 data rows.
Required columns:
order_id,customer_name,total
ORD-1001,Ayşe Demir,1250.00Required columns:
transaction_id,order_id,amount
TX-5001,ORD-1001,1250.00Extra columns are allowed. Amounts must be positive values using a decimal point and no more than two decimal places.
Sample files are available in public/samples.
| Status | Description |
|---|---|
matched |
Order and payment IDs and amounts match |
amount_mismatch |
Order ID matches, but the amounts differ |
missing_payment |
An order has no corresponding payment |
unknown_payment |
A payment has no corresponding order |
Duplicate order IDs, duplicate transaction IDs, and multiple payments for the same order must be corrected before reconciliation.
- Parses browser-selected CSV files with Papa Parse
- Normalizes external string values into predictable domain records
- Converts TRY amounts into integer minor units for reliable comparisons
- Uses strict TypeScript types across parsing, validation, and reconciliation
- Keeps business logic separate from React components
- Tests normalization, validation, duplicate detection, and reconciliation rules with Vitest
- React
- TypeScript
- Vite
- Tailwind CSS
- Papa Parse
- Vitest
- ESLint
Install dependencies:
npm ciStart the development server:
npm run devNo environment variables or backend configuration are required.
npm run dev
npm test
npm run lint
npm run build
npm run previewDomain tests cover normalization, validation, duplicate detection, and reconciliation outcomes.
CSV files are processed locally in the browser. The application does not upload or permanently store their contents.
Reconly is a portfolio demo, not a production accounting or banking system. Use fictional or non-sensitive data only.