Problem and solution
Problem
Expense records, receipts, and travel costs are difficult to review when they are scattered across separate files and lack consistent categories or date-based reporting.
Solution
A responsive full-stack application connects authenticated expense workflows to a PostgreSQL database and presents live summaries, visual reports, receipt evidence, and trip-level spending in one interface.
Technical approach
- Expense CRUD with category, date-range, keyword, and sorting controls
- Recharts dashboard with summary cards and spending visualizations
- Receipt uploads with previews and links to expense records
- Trip management with expense totals and per-trip records
- JWT authentication, profile editing, avatar uploads, and password updates
- CSV reports containing transaction data and category summaries
Implementation details
EXPensio gives authenticated users one place to record and understand personal or team spending. Its dark dashboard summarizes total expenses, transaction counts, average spending, recent receipts, pending tasks, category trends, and day-to-day expenses. Users can create, edit, and delete expenses; organize them into categories; search and filter by date, category, or keyword; sort by date or amount; and export detailed Thai-language CSV reports with category and overall summaries.
Expenses and reporting
The expense workflow supports Food, Transportation, Shopping, Entertainment, Bills, Health, and Other categories. Users can narrow records by week, month, year, a custom date range, category, or search term, then order the result by date or amount.
CSV export produces a dated report containing each expense, its category, description, amount, and related trip, followed by category totals and an overall transaction summary.
Receipts, trips, and profiles
Receipt images can be previewed before upload, attached to expense records, and reviewed later. The documented upload flow accepts JPG, PNG, and GIF images up to 5 MB.
Trip tools group related expenses under a named journey with optional start and end dates. Users can also update their name, avatar, and password from the profile area.
Architecture and delivery
The React 19 and Vite frontend uses React Router, Recharts, Lucide React, Axios, and date-fns. The Express 5 API uses Prisma ORM with PostgreSQL, JWT authentication, bcrypt password hashing, CORS controls, and environment-based configuration.
The API covers authentication, profiles, categories, expenses, dashboard summaries, and trips. GitHub Actions validates the frontend and backend through linting, builds, Prisma schema checks, client generation, and server startup checks.