DEV Community

Cover image for Piggy Tracker: Building a Fun, Full-Stack Financial Buddy for the Indonesian Market (Laravel, React, Flutter)
Muhamad Rifki Saputra
Muhamad Rifki Saputra

Posted on

Piggy Tracker: Building a Fun, Full-Stack Financial Buddy for the Indonesian Market (Laravel, React, Flutter)

#laravel #react #flutter #fullstack

Hey dev community! 👋

Ever feel like your money just... disappears? 💸 I certainly did! That's why I embarked on a journey to build Piggy Tracker, a personal finance tracker designed to be cute, fun, and actually helpful, especially for my local Indonesian market.

Today, I want to share a bit about this project, the tech stack, and some of the journey.

Piggy Tracker Landing Page Web

Piggy Tracker Splash Screen Mobile

What is Piggy Tracker? 🐽

Piggy Tracker is a web and mobile application that helps users easily track their income and expenses. The goal is to make financial management less daunting and more engaging. Think of it as your friendly piggy bank, digitized!

Currently, the app's UI is in Indonesian, catering to local users. However, the core concepts of financial tracking are universal, and I'm excited to share the technical aspects with a global audience!

The "Why": Bridging a Gap with a Smile

I noticed many financial apps felt a bit too... serious. I wanted to create something that felt approachable, especially for younger users or those new to budgeting, while still being a robust tool. Plus, it was an amazing learning experience to build a full-stack application from scratch!

The Tech Stack: Powering the Piggy 🚀

Building for both web and mobile required a careful selection of technologies:

Backend (Laravel 10):
Why Laravel? I chose it for its robust framework, elegant syntax, and fantastic ecosystem.

  • API Development: Laravel makes building RESTful APIs.
  • Google Auth: Implementing "Sign in with Google" was incredibly straightforward with Google OAuth APi, providing a seamless login experience.
  • JWT for Secure Sessions: Ensuring user data is safe and sound.

Frontend - Web (React 19):
The web dashboard needed to be responsive and interactive.

  • React: For its component-based architecture and declarative UI.
  • Tailwind CSS: For utility-first styling, allowing for rapid UI development.
  • shadcn/ui: A fantastic collection of beautifully designed, accessible, and reusable UI components.
  • Zod + React Hook Form: For robust and type-safe form validation.
  • Zustand: A delightfully simple and unopinionated state management solution.
  • TanStack Table (React Table): To display financial data in a clean, sortable, and filterable way.
  • Sonner: For sleek and non-intrusive toast notifications.
  • frimousse: an emoji picker component that I think is quite lightweight for react

📱 Frontend - Mobile (Flutter 3.x):
For the on-the-go experience, Flutter was the clear winner.

  • Cross-Platform (Android first): Write once, run on Android (and iOS is a future possibility!).
  • Beautiful & Performant UI: Dart and Flutter's widget system allow for creating expressive and smooth interfaces.
  • google_sign_in package: To integrate Google Sign-In natively on Android.
  • http: For communicating with our Laravel backend.

Key Features (So Far!):

  • ✅ Smooth Login & Registration (with Google Auth!)
  • 💰 Easy Income & Expense Tracking
  • 📊 Comprehensive Transaction History
  • 🌙 Dark Mode (because, why not?) but only in web version
  • 🌐 Accessible on Web & Android

A Glimpse into Piggy Tracker:

Here are a few peeks. Even if you don't speak Indonesian, hopefully, the UI gives you an idea!

Piggy Tracker Mobile Demo
Piggy Tracker Web Demo

Challenges & Learnings:

One of the main challenges was ensuring a consistent user experience between the web and mobile apps while leveraging the strengths of each platform. Setting up Google Auth across Laravel (backend), React (web), and Flutter (mobile) to work seamlessly also had its learning curve, especially with redirect URIs and client ID configurations for different platforms. It was a great lesson in understanding OAuth 2.0 flows in different environments!

What's Next for Piggy Tracker?

This is still an MVP (Minimal Viable Piggy! 😉). Some ideas for the future include:

  • Budgeting features
  • Option for English UI (to reach a wider audience!)
  • iOS version

Get Involved & Check it Out!

I'd love for you to check out the project on GitHub. It's a "work-in-progress" but I'm proud of how far it's come.

🐷 Piggy Tracker Web (Laravel + React)

📱 Piggy Tracker Mobile (Flutter)

Feel free to star the repos if you find them interesting, or even contribute if you're up for it!

What are your favorite tools for building full-stack projects? Any tips for localizing apps? Let me know in the comments below! 👇

Thanks for reading! Happy coding! 💻

Top comments (0)