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

Muhamad Rifki Saputra — Wed, 28 May 2025 02:47:27 +0000

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.

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!

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! 💻

My Journey Building a Privacy-Focused Chatbot with Next.js

Muhamad Rifki Saputra — Wed, 09 Oct 2024 13:46:03 +0000

Hey Dev.to Community!

I'm still fairly new to web development, but I'm excited to share my latest project – a feature-rich chatbot platform built entirely with Next.js.

Disclaimer: I'm still learning, so consider this a beginner project. I'm open to feedback and suggestions for improvement!

Here's what makes this chatbot platform unique (and what I had fun building):

Multiple AI Models: Users can choose from a variety of AI models, making the chatbot experience customizable.
Privacy by Design: User privacy is incredibly important to me. All conversation data is stored locally in the user's browser using IndexedDB and Dexie.js – nothing is sent to an external server.
Powered by Next.js: I chose Next.js because of its great performance, SEO benefits, and developer-friendly environment (which has been perfect for a beginner like me!).

I'd love to hear your thoughts on the project so far! Check out the live website at Lahelu AI and give it a try.

Support me 😊:

I'd love to hear your feedback on the user interface, any features you'd like to see added, or your experience with the different AI models.

The GitHub repository is at Lahelu AI Repo if you'd like to explore the code.

DEV Community: Muhamad Rifki Saputra

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

My Journey Building a Privacy-Focused Chatbot with Next.js