SpendTaskify

The problem

Managing personal expenses and pending tasks from separate applications creates friction: switching between a finance app and a task manager loses context and ends up with neither being used consistently. Most available tools are too complex for personal use or require a subscription for basic features.

The solution

A minimalist SPA that centralizes expenses, tasks, and academic notes in one place with secure authentication and cloud persistence via Supabase. Financial balance updates in real time when recording income and expenses. Tasks are filtered by status, date, and category. The profile is editable with persistent avatar and preferences. Fully responsive mobile-first design.

Challenges

• Keeping local state synchronized with Supabase in real time without race conditions when the user updates multiple modules simultaneously

• Designing a combinable filter system for tasks and expenses that is predictable and extensible without external filtering libraries

• Building the React component architecture in a fully modular way so each module, finances, tasks, and notes, is independent and reusable

• Making financial balance and task progress reflect in the main panel in real time without unnecessarily reloading data

Learnings

• Supabase as a backend eliminates infrastructure setup time and allows focusing development on user experience from day one

• React's Context API is sufficient for global state management in medium-complexity applications without needing Redux or Zustand

• Mobile-first is not a CSS adjustment at the end: designing from the smallest screen produces simpler components and more predictable layout across all breakpoints

• Centralizing multiple modules in a single app requires thinking about navigation and shared state from the start, not as a late decision