<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Naioua.d Anas</title>
    <description>The latest articles on DEV Community by Naioua.d Anas (@naioua_d_anas).</description>
    <link>https://dev.to/naioua_d_anas</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4009386%2Fa4a52fc6-2a5b-49a0-bf4a-023d8189961d.jpg</url>
      <title>DEV Community: Naioua.d Anas</title>
      <link>https://dev.to/naioua_d_anas</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/naioua_d_anas"/>
    <language>en</language>
    <item>
      <title>How I Built a 100% Client-Side Bank Statement Parser (Zero Servers, Maximum Privacy)</title>
      <dc:creator>Naioua.d Anas</dc:creator>
      <pubDate>Fri, 03 Jul 2026 09:54:12 +0000</pubDate>
      <link>https://dev.to/naioua_d_anas/how-i-built-a-100-client-side-bank-statement-parser-zero-servers-maximum-privacy-3dh1</link>
      <guid>https://dev.to/naioua_d_anas/how-i-built-a-100-client-side-bank-statement-parser-zero-servers-maximum-privacy-3dh1</guid>
      <description>&lt;p&gt;The Accounting Nightmare We All Share&lt;br&gt;
Every tax season, freelancer, and small business owner runs into the exact same brick wall: downloading bank statements as PDFs and realizing their accounting software needs them as a clean CSV or Excel sheet.&lt;/p&gt;

&lt;p&gt;You’re then left with three choices:&lt;/p&gt;

&lt;p&gt;Manually type out dozens of transactions (mind-numbing).&lt;/p&gt;

&lt;p&gt;Pay for expensive premium software.&lt;/p&gt;

&lt;p&gt;Upload highly sensitive financial data—containing your account numbers, home address, and spending habits—to a random third-party website that promises a "free conversion."&lt;/p&gt;

&lt;p&gt;As a developer, option 3 felt like a security nightmare waiting to happen. So, I decided to build option 4: A fast, completely free, and 100% client-side bank statement parser.&lt;/p&gt;

&lt;p&gt;Meet StatementFlow.&lt;/p&gt;

&lt;p&gt;Why Client-Side? (The Tech Stack Decision)&lt;br&gt;
When dealing with financial data, privacy isn't just a feature—it's the core requirement. If I built a traditional backend (Node.js/Python) to extract data from these PDFs, two things would happen:&lt;/p&gt;

&lt;p&gt;Users would have to trust my server with their banking history.&lt;/p&gt;

&lt;p&gt;I would have to pay for server computing power to process heavy PDF files.&lt;/p&gt;

&lt;p&gt;By keeping everything in the browser, the user's data never leaves their machine. Your bank statements stay yours.&lt;/p&gt;

&lt;p&gt;Here is how I structured the architecture using basic frontend tech:&lt;/p&gt;

&lt;p&gt;The Parser Engine: Utilizing browser-native PDF parsing libraries to extract the raw text nodes from the document layout.&lt;/p&gt;

&lt;p&gt;The Rule Matcher: A flexible regex engine that identifies common bank layouts (Date, Description, Amount, Balance) without needing a database.&lt;/p&gt;

&lt;p&gt;The Exporter: A simple client-side blob generator that packages the clean array into a downloadable standard CSV or XLSX file instantly.&lt;/p&gt;

&lt;p&gt;The Hardest Part: The "Wild West" of Bank PDF Layouts&lt;br&gt;
If you’ve ever opened a PDF in a text editor, you know it’s a chaotic mess of coordinates, not structured text. To make things worse, no two banks format statements the same way.&lt;/p&gt;

&lt;p&gt;Bank A might put the date, description, and amount on a single line.&lt;/p&gt;

&lt;p&gt;Bank B might wrap descriptions into two lines, pushing the amount to the next line.&lt;/p&gt;

&lt;p&gt;Bank C might use multi-page tables where headers repeat awkwardly.&lt;/p&gt;

&lt;p&gt;To solve this without a massive AI model running in the cloud, I focused on building a deterministic line-by-slide scanning algorithm. By analyzing the bounding boxes of the text elements natively in the browser, the tool groups items horizontally into rows before trying to read the text. If it looks like a table row on the screen, it treats it like a table row in code.&lt;/p&gt;

&lt;p&gt;Where it Stands Today (And It's Open Source)&lt;br&gt;
I wanted this tool to be accessible to anyone who hates manual bookkeeping. It’s entirely free, requires no login, and works in seconds.&lt;/p&gt;

&lt;p&gt;🚀 Try the live demo: bank-statement-converter.pages.dev&lt;/p&gt;

&lt;p&gt;💻 Check out the code / Star the Repo: &lt;a href="https://github.com/itsanssoff-source/Bank-Statement-Converter-" rel="noopener noreferrer"&gt;https://github.com/itsanssoff-source/Bank-Statement-Converter-&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What's Next?&lt;br&gt;
Right now, the parser natively handles standard bank layouts perfectly. I’m currently expanding it to recognize trickier credit card formats and international bank layouts.&lt;/p&gt;

&lt;p&gt;If you are a developer, I’d love your feedback on the extraction logic! If you are a freelancer or business owner, I hope this saves you a few hours of manual data entry this month.&lt;/p&gt;

&lt;p&gt;Let me know what you think in the comments below!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>showdev</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
    <item>
      <title>I built a $0 infrastructure Table-to-Excel tool using client-side WASM and Next.js. Roast my architecture.</title>
      <dc:creator>Naioua.d Anas</dc:creator>
      <pubDate>Tue, 30 Jun 2026 10:24:43 +0000</pubDate>
      <link>https://dev.to/naioua_d_anas/i-built-a-0-infrastructure-table-to-excel-tool-using-client-side-wasm-and-nextjs-roast-my-3b1i</link>
      <guid>https://dev.to/naioua_d_anas/i-built-a-0-infrastructure-table-to-excel-tool-using-client-side-wasm-and-nextjs-roast-my-3b1i</guid>
      <description>&lt;p&gt;I got tired of clunky OCR tools that charge a subscription or, worse, upload sensitive financial data to the cloud.&lt;/p&gt;

&lt;p&gt;So, I built TABLEXTRACT. It runs entirely in your browser using Next.js and Tesseract.js (WASM). Since all the OCR and Excel file generation happens locally, your data never leaves your machine, and my server cost is exactly $0.&lt;/p&gt;

&lt;p&gt;I'm validating the idea before buying a proper domain, so it's currently on a free Cloudflare staging URL.&lt;/p&gt;

&lt;p&gt;👉 *Try it here: &lt;a href="https://tablextract.itsanssoff.workers.dev/" rel="noopener noreferrer"&gt;https://tablextract.itsanssoff.workers.dev/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5u7buk4wbvtkh6ke5n8x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5u7buk4wbvtkh6ke5n8x.png" alt=" " width="799" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Please throw your messiest screenshots at it. I’d love to know what breaks and get your thoughts on the performance of client-side OCR!&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>ocr</category>
      <category>indiehacker</category>
      <category>react</category>
    </item>
  </channel>
</rss>
