A high-performance, single-file client-side React application designed to instantly parse, auto-clean, and visualize unstructured data tables extracted from raw Fidelity CSV exports. Built with Bun, Vite, TypeScript, and TailwindCSS v4.
Brokerage firms and financial reports typically contain messy headers, account preambles, and legal footers that break standard SQL or naive CSV parsers. This application uses a custom heuristic processor:
- Token Isolation: Parses lines respecting double quotes and escaped quotes (
""). - Density Metrics: Analyzes column count distribution across all rows, filtering out metadata fields.
- Contiguous Block Extraction: Detects and extracts the longest sequential block of data sharing identical column boundaries, automatically discarding messy postambles and legal disclaimers.
- Natural Sort Order: Loaded file datasets and tabs are natively sorted via
Intl.Collatorusing a strict numerical sequence (e.g.,file2.csvappears beforefile10.csv). - Global Interactive Dropzone: Click anywhere inside the empty state placeholder or the master import button to
trigger native system file explorers seamlessly via shared React
useReftokens. - Advanced Sticky Layouts: High-performance CSS containment supporting simultaneous sticky table headers
(
sticky top-0) and sticky identifier columns (sticky left-0) for cross-browser sheet viewing.
- Features Synchronous Lazy State Initialization from
localStorageto avoid multi-effect race conditions and theme flickering often triggered by double-rendering inReact.StrictModeenvironments during development. - Full integration with TailwindCSS v4 dark mode strategy using explicit DOM root synchronization.
- Dedicated utilities to Export/Import app configurations to standalone JSON templates.
- Runtime: Bun
- Build Tool: Vite
- Frontend Library: React (TypeScript)
- Styling Framework: TailwindCSS v4 (Utility-first, fully embedded optimized SVGs)
Ensure you have Bun installed locally on your development machine.
-
Clone the repository and navigate to the root directory:
git clone https://github.com/daggerok/csv.git && cd $_
-
Install the necessary development dependencies:
bun install -E
-
Launch the local Vite development server with Hot Module Replacement (HMR):
bun run serve
-
Upgrade all ecosystem packages to their latest absolute versions:
bunx npm-check-updates -u
Since the entire system compiles into a self-contained Single Page Application (SPA) without requiring any heavy node backend or cloud infrastructure, you can generate a static deployment bundle:
bun run build && bunx serve ./distThe resulting optimized assets will be located inside the ./dist folder, ready to be served from any static hosting
architecture or local offline workspace.
This application executes entirely client-side inside your web browser. No financial data, statements, ledger indices, or CSV filenames are transmitted to external cloud systems, tracking networks, or third-party servers. Your investment data remains isolated and completely secure.