BudgetBase

Inspiration

We wanted a single place to track spending, set limits, and understand where our money goes—without switching between spreadsheets and multiple apps. The idea was to build a simple personal finance hub that could grow into something shared: budgets, alerts, and eventually splitting expenses with roommates or friends. BudgetBase came from that need for clarity and control over everyday finances.

What It Does

BudgetBase is a personal finance application that helps users track income and expenses, set category-based budgets, and see their financial picture at a glance.

The app includes:

A dashboard showing income, expenses, remaining budget, and spending trends
Analytics with expense breakdowns and top spending categories
A full transaction history with search and filters
Monthly budgets per category with alerts at 50%, 90%, and 100% of each limit
A Rooms feature for shared expenses and settling up with roommates or friends
Settings to manage user profile, username, and data

The UI is clean and consistent, using a light theme with green accents for clarity and focus.

How We Built It

BudgetBase was built using:

Next.js (App Router) and TypeScript for the frontend
Tailwind CSS for styling
Supabase for authentication and the database

The dashboard, analytics, history, and budgets pages share contexts for transactions and budget alerts. Data visualizations are built with Recharts for expense breakdowns, top spending categories, and spending-over-time views.

The Rooms feature supports invite codes, shared expenses, splits, and settlements, backed by Supabase tables and RPCs. Landing, login, and signup flows use a black background with white cards to create a clear and focused first impression.

Challenges We Ran Into

Supabase email rate limits during signup made testing and demos more difficult
Iterating on row-level security (RLS) and database migrations for users, expenses, income, budgets, and rooms
Maintaining UI consistency while moving from a dark theme to a single light theme with green accents
Designing shared-expense and settlement logic that was both intuitive for users and efficient in the database

Accomplishments We’re Proud Of

A complete flow from signup and login through dashboard, analytics, history, budgets with alerts, and settings
A fully working Rooms feature for shared expenses and settlements
A cohesive design system with consistent navigation (sidebar and bottom navigation)
Clear feedback through loading states, empty states, and error handling

The analytics page—especially breakdowns by period, top categories, and spending trends—is a highlight. Most importantly, we shipped a product we would actually use ourselves.

What We Learned

We learned how to structure a scalable Next.js app using shared contexts and how to keep authentication, user synchronization, and row-level security aligned with Supabase. We became more comfortable with Recharts for responsive data visualization and with Tailwind CSS for consistent theming at scale.

Designing shared-expense flows pushed us to think carefully about state management and edge cases. We also learned how small UX choices—like consistent form styling and a clear landing page—make a big difference in polish.

What’s Next for BudgetBase

Next steps include:

Real AI-based auto-categorization for expenses (currently a placeholder setting)
More advanced analytics with additional time ranges and export options
Enhancements to Rooms, such as notifications and recurring shared expenses
Optional bank or card linking, recurring transactions, and savings or goal tracking

Our goal is for BudgetBase to support both day-to-day budgeting and long-term financial planning.