SakuFlow

Track money calmly, with guidance that feels simple.

SakuFlow is a SaaS personal finance app for everyday users and small households who want a clean, guided way to track spending, set monthly budgets, and understand their cash runway. It uses Google login, a notion-like workspace, and lightweight onboarding to help users start logging expenses within minutes. The product reduces financial friction by combining budgets, wallets, categories, OCR capture, and soft status cues in one place.

Business Goals

  • Reach 3,000 registered users within 6 months of launch with at least 35% completing onboarding.
  • Achieve 25% free-to-paid conversion within 90 days of introducing premium budget insights.
  • Maintain 40% monthly active user retention by month 3 for users who log at least 5 transactions in their first week.
  • Keep average onboarding completion time under 4 minutes and improve activation rate to 60% of signups.
  • Reduce support tickets related to navigation and data entry by 30% after the first two release iterations.

User Goals

  • Let users sign in quickly with Google and start without manual account setup.
  • Help users set a monthly budget, category suggestions, and wallet/payment methods in one guided flow.
  • Make it easy to add expenses manually or by scanning receipts with OCR.
  • Show a clear monthly recap with date-range filters similar to travel booking selectors.
  • Allow users to personalize theme, language, and account settings, including account deletion.

Non-Goals

  • Not a full accounting system for businesses, payroll, or invoicing.
  • Not supporting bank transaction syncing in the initial release.
  • Not providing investment, tax filing, or credit scoring features.
  • Not building a social finance or shared-group expense network in MVP.

Freelancer Raka, 29 - Raka gets paid irregularly and often loses track of daily spending across e-wallets and cash. He needs a fast way to understand how much budget is left before the month ends.

Freelancer Raka, 29

  • As a freelancer, I want to set a monthly budget and see a friendly status indicator, so that I know whether I can still spend freely.
  • As a freelancer, I want to add expenses using OCR from receipts, so that I can record spending on the go without typing everything.
  • As a freelancer, I want to filter recap by custom date ranges, so that I can review travel or project-related spending separately.

Young Family Parent Dina, 36 - Dina manages household spending and uses multiple payment methods across cards, cash, and e-wallets. She wants a simple system the family can understand quickly.

Young Family Parent Dina, 36

  • As a parent, I want suggested categories and payment methods during setup, so that I can organize expenses without thinking too much.
  • As a parent, I want dashboard cards that show category totals and monthly progress, so that I can spot overspending early.
  • As a parent, I want to change language and theme preferences, so that the app feels comfortable for daily use.

Student Naufal, 21 - Naufal has limited income and needs an easy tool to avoid overspending. He values a clean interface and simple guidance over complex finance features.

Student Naufal, 21

  • As a student, I want guided onboarding and tooltips, so that I can start using the app without reading documentation.
  • As a student, I want to log cash expenses and wallet balances, so that I always know how much money is left.
  • As a student, I want to delete my account and data if I stop using the app, so that I stay in control of my information.

Authentication and account management · High priority

  • Users must be able to create and access accounts securely using Google OAuth, manage profile settings, and delete their account on demand.
  • Support Google sign-in via Supabase Auth with one-click login and first-time account creation.
  • Persist user preferences for theme, language, onboarding completion, and default budget settings.
  • Provide account deletion flow with confirmation, reversible grace period if legally allowed, and full data purge after final confirmation.
  • Block access to app pages until authentication succeeds, with clear error states if Google login fails or is cancelled.

Onboarding and guided setup · High priority

  • New users need a guided first-run experience that helps them reach value quickly by configuring essentials before entering data.
  • Show a step-by-step tutor/guide tour on first login with progressive disclosure instead of long forms.
  • Collect monthly budget, preferred currency, categories, wallet/payment methods, and soft budget status thresholds during onboarding.
  • Recommend default categories based on common personal finance patterns, while allowing custom edits and additions.
  • Mark onboarding complete only after the user saves required setup fields and sees the first dashboard state.

Expense capture and OCR · High priority

  • Users must be able to log spending through manual entry or receipt scan, with data validation to reduce mistakes.
  • Floating plus button opens two actions: manual expense input and OCR receipt scan.
  • Manual form should support amount, date, category, wallet/payment method, merchant note, and attachment.
  • OCR flow should extract amount, date, and merchant where possible, then ask user to confirm before saving.
  • Handle invalid OCR confidence by pre-filling partial fields and flagging missing values instead of auto-saving.

Budgeting and categorization · High priority

  • The app should help users set monthly budgets, manage categories, and visualize budget health using soft status indicators.
  • Allow one or more monthly budgets per user, with a primary overall budget and optional category budgets.
  • Provide system category suggestions such as Food, Transport, Bills, Shopping, Health, Education, and Entertainment.
  • Define budget status bands using gentle labels and amber/orange cues instead of harsh red warnings.
  • Allow users to create, edit, archive, and reorder categories without breaking historical transaction records.

Dashboard, recap, and analytics · Medium priority

  • Users need a clear overview of spending, remaining budget, and date-based recap views for quick financial understanding.
  • Dashboard should show current month budget progress, remaining amount, category breakdown, and recent transactions.
  • Recap screen must support monthly presets and custom calendar ranges with inclusive start/end dates.
  • Display trend cards for spending by category, wallet, and day, with empty states for new users and low-data periods.
  • Use number formatting and currency localization based on user language and settings.

Settings, localization, and UX personalization · Medium priority

  • Users should control visual and language preferences and experience a responsive, clean workspace across devices.
  • Support dark and light mode, saved per user and applied consistently across the app.
  • Support Indonesian and English language options in MVP, with architecture ready for more locales.
  • Make the web layout sidebar-first for desktop and adapt to mobile with collapsed navigation and sticky action controls.
  • Ensure accessibility basics such as readable contrast, keyboard navigation, and screen-reader labels for critical actions.

First-Time User Experience

  • User lands on a calm login page with Google sign-in and one clear call to action.
  • After login, a short guide tour explains the dashboard, floating add button, recap, and budget status.
  • User sets monthly budget, selects or edits suggested categories, and chooses wallet/payment methods.
  • User chooses preferred language, theme, and soft budget status style to personalize the experience.
  • User reaches the dashboard with starter data in under 4 minutes from first login.
  • If the user skips optional steps, the app saves progress and prompts later without blocking access.

1. Sign in and create profile

  • The user signs in with Google and receives a secure Supabase-backed profile automatically.
  • If login is cancelled or fails, show a retry state without losing prior progress.
  • Auto-create a user record and default settings after successful OAuth.
  • Redirect new users to onboarding, returning users to the dashboard.

2. Complete guided setup

  • The user goes through a lightweight setup flow that builds the finance workspace around their habits.
  • Ask for monthly budget, currency, category suggestions, wallet/payment methods, and budget status threshold preferences.
  • Preselect common categories and allow one-tap edits to reduce setup friction.
  • Save each step incrementally so partial completion is not lost if the tab closes.

3. Add an expense

  • The user taps the floating plus button and chooses manual input or OCR scan.
  • Manual form validates amount, date, and category before submission.
  • OCR path imports receipt image, extracts fields, and asks for confirmation on low-confidence values.
  • Store receipt image only if the user consents and show clear upload progress.

4. Review dashboard and recap

  • The user sees month progress, status badges, recent spending, and category cards on the dashboard.
  • Budget status uses soft labels such as healthy, watchful, and tight to avoid punitive tone.
  • Recap supports monthly and custom date ranges with visual totals and filters.
  • Empty states explain what to do next when there is little or no data.

5. Manage settings and data

  • The user personalizes the app and can control their account lifecycle from settings.
  • Allow theme, language, notification preferences, and category defaults to be edited independently.
  • Include a clear account deletion flow with confirmation and explanation of consequences.
  • Show export or backup options if enabled in a later phase.

Advanced and Power-User Features

  • Recurring expense templates for rent, subscriptions, and savings transfers.
  • Category budget alerts when a category approaches its limit.
  • CSV export of transactions and recap data for personal backup.
  • Receipt image history with OCR correction tracking.
  • Multi-wallet balances with per-wallet transaction filtering.
  • Archive categories without deleting historical transactions.

UI and Visual Principles

  • Notion-like clean workspace with generous spacing, soft borders, and card-based information grouping.
  • Pastel palette with amber and orange accents for budget caution states instead of aggressive red.
  • Colored category icons and pill-shaped budget badges for quick scanning.
  • Hero illustration in line-art style on the landing and empty-state screens.
  • Desktop-first sidebar navigation with responsive collapse on smaller screens.
  • Fast interactions with skeleton loaders, optimistic saves, and minimal modal overload.
  • Accessible typography, clear focus states, and contrast-safe text on pastel backgrounds.

Dina used to track spending in a notes app and a spreadsheet, which meant her budget always felt one week behind reality. By the time she remembered to update numbers, she had already overspent on groceries and delivery several times in a month.

With SakuFlow, she signs in using Google, completes a short guided setup, and gets category suggestions for household spending. The dashboard immediately shows her monthly budget status in a soft amber pill when she starts getting close, so she can adjust before it becomes a problem.

A month later, Dina records expenses in seconds from her phone, scans receipts when she is in a hurry, and reviews a clean recap by date range for family trips. She feels more in control, and the business gains a retained user who logs consistently and is more likely to upgrade for deeper insights.

User-Centric Metrics

  • 80% of new users complete onboarding within 4 minutes.
  • 60% of active users log at least 5 transactions in their first 7 days.
  • 70% of users can correctly identify remaining monthly budget from the dashboard in a usability test.
  • 50% of receipt scans are confirmed and saved without manual re-entry.
  • Less than 10% of users abandon the expense flow after opening the add menu.

Business Metrics

  • 35% onboarding completion-to-activation rate within 30 days of launch.
  • 25% free-to-paid conversion within 90 days after premium launch.
  • 40% month-3 retention among users who reach activation.
  • 20% month-over-month growth in registered users during the first 2 quarters.
  • <5% monthly churn among paid users after stabilization.

Technical Metrics

  • 99.9% monthly uptime for authenticated app routes.
  • P95 page interaction response under 300 ms for dashboard and recap views.
  • OCR receipt processing completes in under 8 seconds for 90% of uploads.
  • Zero critical auth or data loss incidents; full audit logging for account deletion and major settings changes.

Tracking Plan

  • Track sign_in_with_google_completed with source and device type.
  • Track onboarding_step_completed for each setup step and drop-off point.
  • Track budget_created with amount, currency, and monthly period.
  • Track expense_added_manual and expense_added_ocr with validation success or failure.
  • Track recap_date_range_changed with preset or custom range metadata.
  • Track theme_changed, language_changed, and account_deletion_requested from settings.
  • Track dashboard_budget_status_viewed to measure engagement with budget health cues.

Technical Needs

  • Next.js App Router for server-rendered routes and fast navigation.
  • Tailwind CSS for utility-first styling and rapid theme implementation.
  • Supabase Auth, Postgres, Storage, and Row Level Security for secure multi-tenant SaaS data.
  • OCR service integration with a reliable provider such as Google Cloud Vision or AWS Textract.
  • Zod or similar schema validation for form and API payload consistency.
  • Vercel deployment with edge-friendly caching for static assets and authenticated pages.
  • Internationalization framework such as next-intl for language switching and localized formatting.

Integration Points

  • Google OAuth through Supabase Auth.
  • Supabase Storage for receipt images and attachments.
  • OCR provider API for receipt text extraction.
  • Optional analytics via PostHog or Amplitude for event tracking.
  • Optional email service such as Resend for account and security notifications.

Data Storage & Privacy

  • Store all user finance data in separate tenant-scoped records with strict Row Level Security.
  • Encrypt sensitive data at rest through managed database and storage providers, and use HTTPS everywhere.
  • Provide clear consent before storing receipt images and allow deletion on account removal.
  • Document data retention and deletion policies for GDPR and CCPA-style requests.
  • Avoid storing Google access tokens unless absolutely required; prefer short-lived auth sessions.

Scalability & Performance

  • Design read-heavy dashboard queries with indexed monthly aggregates and transaction date indexes.
  • Use pagination or infinite scroll for transaction history to avoid large initial payloads.
  • Cache derived summary data per month to reduce repeated aggregation cost.
  • Keep OCR and image upload asynchronous so expense entry remains responsive.

Potential Challenges

  • OCR may misread amounts or dates; mitigate with confidence thresholds, manual confirmation, and editable extracted fields.
  • Users may feel shamed by budget warnings; mitigate by using neutral, soft-toned labels and helpful suggestions.
  • Custom categories can create inconsistent reporting; mitigate by offering suggested defaults, merge/archive actions, and historical mapping.
  • Multi-language formatting issues may break totals or dates; mitigate with centralized i18n formatting and locale tests.
  • Account deletion must be legally and technically complete; mitigate with a background purge job, audit logs, and explicit confirmation screens.

Team & resourcing - Small team - 2 full-stack engineers, 1 product designer, part-time PM, and shared QA support

Phase 1: MVP foundation · Weeks 1-4

  • Next.js app scaffold with Tailwind and design system
  • Supabase auth with Google login
  • Core data model for users, budgets, categories, wallets, and expenses
  • Sidebar navigation and empty dashboard
  • Basic onboarding flow and user settings

Phase 2: Core finance workflows · Weeks 5-8

  • Manual expense entry form
  • Monthly budget setup and budget status badges
  • Category management with system suggestions
  • Dashboard cards for spending summary and recent transactions
  • Recap page with monthly and custom date-range filtering

Phase 3: OCR and personalization · Weeks 9-12

  • Floating plus button with manual and OCR actions
  • Receipt upload and OCR extraction flow
  • Dark/light mode and language switching
  • Account deletion flow and privacy settings
  • Improved empty states, guide tour, and accessibility refinements

Phase 4: Beta hardening and growth · Weeks 13-16

  • Analytics events and funnel tracking
  • Performance tuning and query optimization
  • CSV export and recurring expense templates
  • Bug fixes from beta users and support instrumentation
  • Launch-ready onboarding improvements and upgrade hooks

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a SaaS personal finance web app called SakuFlow using Next.js App Router, TypeScript, Tailwind CSS, and Supabase.

Product summary:
A clean, Notion-like finance workspace for consumers to track expenses, set monthly budgets, manage categories, choose wallet/payment methods, and review monthly recap reports. Auth must use Google sign-in. The app should support dark/light mode, Indonesian and English language switching, account deletion, and a guided first-time tour.

Core screens:
1. Public landing page with hero illustration and Google login CTA
2. First-time onboarding tour and setup wizard
3. Dashboard with budget progress, remaining amount, category cards, recent expenses, and soft status pill indicators
4. Recap page with monthly and custom date-range filters similar to travel booking selectors
5. Wallets page
6. Categories page with system suggestions and custom category CRUD
7. Monthly budgeting page
8. User settings page with theme, language, and delete account
9. Expense entry flow with floating plus button opening two actions: manual input and OCR scan

Behavior requirements:
Use a desktop sidebar navigation and responsive mobile layout. The floating plus button should reveal two stacked actions above it: manual expense input and OCR receipt scan. Onboarding should collect monthly budget, category suggestions, wallet/payment methods, and budget status preferences. Use soft pastel colors, amber/orange warnings instead of harsh red, card-based UI, pill-shaped badges, and colored category icons. Save onboarding progress incrementally. Support validation for amount, date, category, wallet, and OCR confidence fallback with editable extracted fields.

Data model:
User, UserSettings, Wallet, Category, Budget, Expense, ReceiptUpload, RecapFilter, and AuditLog.
Use Supabase Postgres with Row Level Security so each user only sees their own records. Include timestamps, currency, status fields, soft budget threshold fields, and category archival instead of hard delete.

Integrations:
Supabase Auth, Supabase Database, Supabase Storage, Google OAuth, OCR provider such as Google Cloud Vision or AWS Textract, analytics such as PostHog.

Implementation details:
Create reusable components for cards, badges, floating action button, onboarding steps, form fields, date-range picker, and empty states. Build server actions or API routes for create/update/delete operations. Include locale-aware formatting for currency and dates. Add account deletion with confirmation and full data purge flow. Seed the app with default categories and suggested wallet types. Make the dashboard feel calm, modern, and highly usable.

Generate the full app scaffold, database schema, key components, routes, and sample placeholder data.

Business Idea

buatkan aplikasi untuk pencatatan keuangan, dimana ini akan menjadi sebuah saas, orang dapat memanfaatkan ini - login pakai akun google - pake next.js dan tailwind.css - supabase - ketika awal register, pengguna mendapatkan tutor/guide tour, set budget bulanan, jenis kategori (berikan suggestion/pilihan dari sistem), metode pembayaran/dompet, setting status budget bulanan dalam range (misal 0-100rb = sisa banyak/masih kaya, 1jt=sudah miskin) - user, bisa setting dark/light mode, bahasa, dan delete akun - ada menu sidebar: 1. dashboard 2. rekap (bisa set bulanan, tanggal sesuai kalender spt traveloka ketika memilih range trip) 3. dompet 4. kategori 5. budgeting bulanan 6. user setting 7. input pengeluaran - menu input buat seperti form, lalu buatkan tombol + melayang, ketika ketuk +, munculkan 2 btn diatasnya, scan ocr sama input manual Design Direction: Notion-like clean workspace - Warna: pastel palette (hindari merah tegas untuk "over budget", pake orange/amber soft biar nggak terasa "menghukum") - Card-based dashboard dengan ikon berwarna per kategori - Badge status budget dengan pill-shape indicator - Hero illustration di halaman utama (line-art style) - Sidebar navigasi kalau versi web/desktop

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company