<?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>Forem: Swofski</title>
    <description>The latest articles on Forem by Swofski (@swofski).</description>
    <link>https://forem.com/swofski</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3626837%2Ff5f051db-9d73-4f73-85f5-b750df2eabaf.png</url>
      <title>Forem: Swofski</title>
      <link>https://forem.com/swofski</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/swofski"/>
    <language>en</language>
    <item>
      <title>How I "Vibe Coded" a Secure AI Finance App (Without Writing the Boilerplate)</title>
      <dc:creator>Swofski</dc:creator>
      <pubDate>Mon, 24 Nov 2025 11:31:17 +0000</pubDate>
      <link>https://forem.com/swofski/how-i-vibe-coded-a-secure-ai-finance-app-without-writing-the-boilerplate-43fj</link>
      <guid>https://forem.com/swofski/how-i-vibe-coded-a-secure-ai-finance-app-without-writing-the-boilerplate-43fj</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;I have a degree in computing, but my day job is booking water efficiency appointments. I wanted to build a serious finance tool to fix my own spending, but I didn't want to spend six months writing HTML tags and CSS manually.&lt;/p&gt;

&lt;p&gt;I decided to act less like a "coder" and more like an Architect. I used Google Gemini as my "Junior Developer" to build Finance Buddy, a PWA with bank-grade encryption.&lt;/p&gt;

&lt;p&gt;Here is how I orchestrated an AI to build a production-ready app, and why "Vibe Coding" is the future for solo founders.&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.amazonaws.com%2Fuploads%2Farticles%2Fnbt2knqsyhq3easvkcsx.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.amazonaws.com%2Fuploads%2Farticles%2Fnbt2knqsyhq3easvkcsx.png" alt="AI Companion Modal" width="800" height="499"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. The Architecture: Privacy by Design
&lt;/h2&gt;

&lt;p&gt;The biggest challenge wasn't the code; it was the security model. I didn't want to see user data, and I didn't want the AI to leak it either. I defined a "Zero-Knowledge" architecture:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Client-Side: The browser encrypts the data (AES-GCM) using the user's password.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The Transfer: Only encrypted "blobs" are sent to Firebase.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The AI: The Gemini AI operates on a stateless, zero-retention basis. We only send anonymized, ephemeral snippets of data to the inference engine.&lt;br&gt;
The AI processes the request and forgets it immediately, ensuring your financial history is never used to train external models.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;My role wasn't typing the encryption functions; it was verifying that the AI implemented the security protocols I designed.&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.amazonaws.com%2Fuploads%2Farticles%2Fgxzhjoqvncb6umhj8ipy.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.amazonaws.com%2Fuploads%2Farticles%2Fgxzhjoqvncb6umhj8ipy.png" alt="Calendar Tab" width="800" height="499"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Managing the "Junior Dev" (Gemini)
&lt;/h2&gt;

&lt;p&gt;Most people try to get AI to "write the whole app." That fails. I treated Gemini like a junior teammate.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Bad Prompt: "Make a finance app."&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;My Strategy: "Write a React hook that takes a transaction object and encrypts the amount field using the Web Crypto API. Return the error state if encryption fails."&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I spent my time reviewing code, not writing it. This allowed me to move 10x faster than a traditional dev. I focused on the features (Receipt Scanning, Forecasting) rather than missing semicolons.&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.amazonaws.com%2Fuploads%2Farticles%2Foa65ptwrt4g0aegzy8uz.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.amazonaws.com%2Fuploads%2Farticles%2Foa65ptwrt4g0aegzy8uz.png" alt="Transactions Tab" width="800" height="499"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. The Result: From Concept to "Shipped"
&lt;/h2&gt;

&lt;p&gt;The result is a fully functional PWA with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Receipt Scanning: Integrating Gemini Vision to read paper receipts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Interactive AI: A chat interface that knows your budget but respects your privacy.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Real Usage: It's currently live, helping me (and my first few users) track debts and subscriptions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;You don't need to be a 10x Engineer to build great software anymore; you need to be a 10x Architect. By leveraging AI for the heavy lifting, I built a tool that solves a real problem without quitting my day job (yet).&lt;/p&gt;

&lt;p&gt;Check out the app here: &lt;a href="https://financebuddy.swofskiwebsolutions.com/" rel="noopener noreferrer"&gt;Finance Buddy&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://financebuddy.swofskiwebsolutions.com/" rel="noopener noreferrer"&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.amazonaws.com%2Fuploads%2Farticles%2Fjhgyanjud56jn2c31pec.png" alt="Finance Buddy Landing Page" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>gemini</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
