Dough is a personal-finance analytics dashboard for turning transaction CSVs into categorized spending views, month-by-month metrics, predictions, and budget recommendations.
The frontend is built with Next.js 15, React 19, Tailwind CSS, shadcn-style UI primitives, Recharts, and Framer Motion. It talks to a backend API for CSV upload, categorization, metrics, reports, and predictions.
- CSV upload flow for bank/transaction exports
- Transaction categorization trigger after upload
- Transaction table with typed columns
- Financial overview cards for income, expenses, net savings, and savings rate
- Expense reports and chart visualizations
- Actual-vs-predicted expense line chart
- Recommendation cards for budgeting and savings improvements
- Animated landing page and polished dashboard UI components
- Framework: Next.js 15 App Router
- UI: React 19, Tailwind CSS, Radix primitives, custom animated components
- Charts: Recharts, Chart.js / react-chartjs-2
- Data access: Axios client pointed at
NEXT_PUBLIC_API_URL - Local storage helper: better-sqlite3 utility module
- Deployment: Dockerfile and docker-compose configuration included
- Node.js 20+
- npm, pnpm, yarn, or bun
- A compatible backend API that exposes the
/api/v1/*finance endpoints used by the app
Create a local environment file when the backend is not running on http://localhost:3000:
NEXT_PUBLIC_API_URL=http://localhost:8080npm install
npm run devOpen http://localhost:3000.
The dashboard expects these backend routes:
| Route | Method | Purpose |
|---|---|---|
/api/v1/csv/upload |
POST |
Upload transaction CSV files |
/api/v1/categorize |
POST |
Categorize imported transactions |
/api/v1/transactions |
GET |
Fetch categorized transactions |
/api/v1/metrics |
GET |
Fetch income/expense/savings metrics |
/api/v1/reports |
GET |
Fetch reporting data |
/api/v1/predictions |
GET |
Fetch actual and predicted monthly expenses |
app/ # App Router pages and feature routes
components/ui/ # Reusable UI and animation components
lib/ # Utilities and SQLite helper
utils/axiosInstance.ts # API client configuration
public/ # Static assets
npm run dev # Start the development server
npm run build # Build for production
npm run start # Start the production server
npm run lint # Run lintingPrototype dashboard. The frontend is presentable, but it depends on a compatible finance API for full functionality.
