From Car Dreams to Code Therapy: The Story Behind Plankton šŸš—šŸ’»

What do a Fiat Grande Punto, Microsoft Excel, and SpongeBob have in common? Weirdly enough—this budgeting app.

From Car Dreams to Code Therapy: The Story Behind Plankton šŸš—šŸ’»
Hey! Let's be financial responsible with the help of Plankton.

The Beginning

The idea behind Plankton isn’t exactly new—it’s over 20 years old.

It all started when I got my first job as a developer and received my very first paycheck. My goal was clear: I wanted to buy a car. But not just any car—I was completely obsessed with the Fiat Grande Punto. It was finally being released in Brazil, and I followed everything about it: press coverage, marketing campaigns, tech specs—you name it. I was hooked.

I still find the Design by the genius Giorgetto Giugiaro and his Italdesign studio timeless. Just beautiful.

To make that dream happen, I needed to start saving. That meant tracking expenses, building a budget, and being more intentional with my money. At the time, most people recommended using Microsoft Excel—but I couldn’t stand it. Formulas, cells, all that clicking around... not for me.

So, I did what many developers do: I built my tool.

I had just started learning .NET 3.5, along with WPF and the MVVM pattern. Creating a budget app felt like the perfect project to apply what I was learning. And that’s how the first version of what would eventually become Plankton was born.

The Windows-based app served me for years. It was built with WPF, later upgraded to .NET 4.5, and initially used SQL Server Compact. I experimented with SQLite and Oracle, but one felt too light and the other too heavy. I utilized free DevExpress components for the UI, and the app did exactly what I needed: it helped me save up for ā€œThe Squirrelā€ (yes, that beloved Fiat) and provided a solid foundation in .NET. 

The Present

Fast forward to 2025, and I felt the urge to reconnect with .NET.

The ecosystem has changed drastically—today, .NET is cross-platform, lightweight, and much more flexible. I decided to dive back in, not just for the sake of learning, but as a form of therapy. Rebuilding Plankton became my way to unwind while working on something I genuinely care about. There’s something incredibly satisfying about organizing your finances and making sense of where your money is going.

So today, Plankton is helping me in a few big ways:

  • Re-learn .NET
  • Refresh my CI/CD skills
  • Learn mobile development
  • And finally, build a modern budgeting tool that works for my current needs

Although I’d been planning this rebuild for months, actual development started just 45 days ago. Here's the tech stack I chose after a lot of consideration:

  • NET 9 Web API (10 beta wasn’t available yet)
  • FastEndpoints for the API layer
  • PostgreSQL 15 as the database
  • Vue.js for the web frontend with PrimeVue
  • MAUI for mobile
  • DigitalOcean for hosting
  • GitHub Actions for CI/CD

API First, Frontend Fights

The API came together quickly. Even though .NET Core and modern C# have evolved, the essence is still familiar. I got back into the groove pretty fast.

The frontend? That was a different beast.

I’ve always been a backend developer, and I don’t try to hide it. Taking on the frontend was a challenge. Luckily, we live in a time where pair programming doesn’t always require another human. My AI co-developer, Claude (thanks, Anthropic!), helped me get through the frontend work.

I chose the Sakai template from PrimeVue as the base—it’s excellent for learning Vue, and I highly recommend it.

Sakai by PrimeVue is a good start for a new Vue dev.

What followed were weeks of tweaking, rewriting, and redesigning. There were plenty of version rewrites, a few arguments with Claude (who was a bit too confident at times), and, honestly, even I wasn’t sure what I wanted for the UI. But eventually, we reached a consensus—and that’s how Plankton looks today.

All the major features from the original desktop app are back:

  • Expense and income tracking
  • Budget management
  • Credit card management
  • Charts and data visualization
  • Saving Boxes

Does it have stunning UX? Gorgeous visuals? Probably not. But it works—and for someone with questionable design taste, I’ll take that as a win. šŸ˜„

Deployment and the Name

With an MVP up and running, it was time to take it live.

Plankton is available here and you can use admin@example/Admin@123! to check it out

I chose DigitalOcean for hosting. It’s .NET, PostgreSQL, and Vue-friendly, the pricing is reasonable, and the App Platform makes deployment easy. Just create a Dockerfile, set your environment variables, connect your GitHub repo, and let it handle the rest.

And this is where Plankton got its name.

When I deployed the app, DigitalOcean automatically suggested ā€œPlanktonā€ as the app name. As a lifelong SpongeBob fan, I couldn’t resist. It just felt right.

So the duo makes sense for this project :D

To keep hosting efficient and cost-effective, the Vue app is built as static files and served directly from the API’s wwwroot folder—no need for a separate service. One container, one deployment.

What’s Missing?

The current version of the web app is almost everything I wanted. But there are a few things still on the Wishlist:

  • Open Banking integration – I’d love to pull data directly from bank APIs instead of manually uploading CSV or OFX files (both currently supported).

According to this article, Canada is expected to mandate Open Banking support by 2026. For now, National Bank seems to be ahead of the curve.

  • Background tasks – I'd like to add support for running async tasks in the background. Not essential for now, but something I’d love to implement down the road.

The Future

With the web version up and running, it’s time to tackle the next frontier: mobile.

This is completely new territory for me—I’ve never written, or even attempted to build, a mobile app before. And let me tell you: it’s been a challenge.

Mobile UX is a whole different game. My first instinct was to simply port over the web version, but that didn’t work. It was too visually heavy and didn’t adapt well to smaller screens. So now, I’m rethinking the approach entirely.

One thing I quickly learned: using images for icons on mobile is a bad idea. They don’t scale well, they look inconsistent, and they just don’t feel native. I’ve since switched to using Font Awesome, which instantly made everything look cleaner. Not that it looks good yet... but hey, it’s a step up šŸ˜„

Right now, I’m experimenting with mock-ups, diving into MAUI, and brushing up on my XAML skills. It’s very much a work in progress, and the UI is still taking shape.

Once I have something in a working state, I’ll share more. For now, I’ve got a few mock-ups—and a lot of excitement (and occasional head-scratching) as I figure it all out.

Dashboard still based on an old version of Plankton, but still too information heavy.
The UIs are not final, trying to find out what should be the best way to show the information, https://dribbble.com has been a great source of reference.

Closing

Thanks for reading this far—this project means a lot to me. If you're working on your own personal dev project or revisiting old ideas, I hope this post gives you a little motivation to keep going (even when your AI pair programmer disagrees with you šŸ˜…).

More to come soon.

— G

The Music

And of course—I didn’t forget the music.

The soundtrack for this post is ā€œGood Feelingsā€ by Coldplay. Sometimes life throws you off. People let you down. You feel stuck, disappointed, or just plain worn out. But then a song like this comes on—something upbeat, something hopeful—and it lifts you up, even just a little.

Good Feelings—because sometimes that’s exactly what you need.