VeloceCode Engineering
Web Application

Expense Tracking & Budget Management Web App

A full-stack personal finance web application for recording, categorizing, importing and analyzing everyday expenses.

Project Overview

The problem this application solves is a common one: it's easy to spend money and hard to see, clearly, where it went. Most people either track nothing or abandon a spreadsheet within a few weeks. The goal was a tool fast enough to use every day — add an expense in seconds — while still producing reports detailed enough to actually change spending behavior.

Solution

The application organizes transactions around three connected ideas: entry (manual, or imported from a CSV), categorization (customizable categories and payment methods, filterable and sortable server-side with the filter state persisted in the URL), and analysis (a dashboard, a calendar view, and periodic reports that compare the current period against the previous one). Budgets sit on top of that data — both a general monthly budget and per-category budgets — and surface usage percentage, remaining amount, daily available spend and a projected end-of-period total, so an overage is visible before it happens rather than after.

Key Features

  • Quick manual expense entry, editing, duplication and bulk delete
  • CSV import and export
  • Server-side filtering by date range, category, payment method, tag, amount and search
  • Calendar view with daily totals
  • General and category-level budgets with usage %, daily available amount and projected end-of-period spend
  • Periodic reports (day / week / month / custom range) with prior-period comparison
  • Recurring-expense templates that convert to a real expense on their due date
  • Dashboard with summary cards, a 7-day spending chart, category breakdown and real-data spending alerts
  • Customizable categories and payment methods
  • Light and dark themes, mobile-first responsive layout

CSV Workflow

Bank or card statement CSV → import → the transactions are structured into the application's expense records → organized by category and payment method → available immediately in the dashboard and reports.

Built to a professional standard

Authentication and sessions run on Auth.js with hashed passwords and rate-limited login/registration endpoints. Every server query is scoped to the authenticated user — nothing trusts an ID supplied by the client. Route access is enforced in two layers (middleware and per-action server checks), sensitive actions require explicit confirmation, and account/admin actions are written to an audit log.

The codebase has unit and integration tests (Vitest) covering the server actions and business rules, plus end-to-end tests (Playwright) covering registration, expense CRUD, cross-user data isolation and budget calculations.

Technology

Next.js 16React 19TypeScriptPostgreSQLPrisma ORMAuth.jsTailwind CSSRecharts

Interface

Expense Tracking dashboard with spending summary cards, a 7-day chart and a category breakdown
Budgets page showing a general budget and category budgets with usage progress bars
Add Expense form with a category grid, amount field and date picker
Expense list with search, filters, sorting, and CSV import/export
Reports page with period totals, category distribution and payment-method breakdown

Outcome

The result is a complete working finance application that combines manual expense management, imported data, budgeting and reporting within one responsive interface — built with authentication, a relational database and role-aware server-side authorization, not a front-end-only demo.

Have a Project?

Need Something Like This Built?

Tell me what you want to build and I'll help define the right technical approach.

ozgur@velocecode.com