A full-stack personal finance management application built with React + TypeScript on the frontend and .NET 8 Clean Architecture on the backend, backed by MS SQL Server and deployable to Azure.
- Accounts : manage multiple bank/investment accounts across different currencies
- Transactions : track income and expenses with category tagging; account balance auto-updates on every transaction
- Budgets : set monthly spending limits per category with live progress bars and overspend alerts
- Dashboard : KPI cards (total balance, monthly income, expenses, savings), income vs expenses bar chart (last 6 months), and spending by category pie chart
- Live Currency Conversion : view all data in INR, USD, AED, or EUR using real-time exchange rates from open.er-api.com
| Technology | Purpose |
|---|---|
| React 18 | UI framework |
| TypeScript | Type safety |
| Vite | Build tool |
| Axios | HTTP client |
| Recharts | Charts and data visualisation |
| React Router | Page navigation |
| Technology | Purpose |
|---|---|
| .NET 8 / ASP.NET Core | Web API framework |
| Clean Architecture | Domain / Application / Infrastructure / API layers |
| Entity Framework Core | ORM |
| MS SQL Server | Relational database |
| IMemoryCache | Exchange rate caching |
| Service | Purpose |
|---|---|
| Azure Static Web Apps | Frontend hosting |
| Azure App Service | Backend API hosting |
| Azure SQL | Cloud database |
| Azure Key Vault | Secrets management |
| Azure Application Insights | Monitoring & observability |
PersonalFinanceDashboard/
├── client/ # React + TypeScript frontend
│ └── src/
│ ├── api/ # Axios API layer (accounts, transactions, budgets, summary)
│ ├── components/ # Reusable UI components (modals)
│ ├── pages/ # Full page components
│ ├── types/ # TypeScript interfaces / DTOs
│ └── hooks/ # Custom React hooks
│
├── PersonalFinanceDashboard.Domain/ # Entities (Account, Transaction, Category, Budget)
├── PersonalFinanceDashboard.Application/ # Interfaces + DTOs
├── PersonalFinanceDashboard.Infrastructure/ # EF Core DbContext + Service implementations
└── PersonalFinanceDashboard.API/ # ASP.NET Core Web API controllers
# Restore and build
cd PersonalFinanceDashboard.API
dotnet restore
# Install EF Core tools (if not already installed)
dotnet tool install --global dotnet-ef
# Apply migrations and create database
dotnet ef database update --project ..\PersonalFinanceDashboard.Infrastructure
# Run the API
dotnet runAPI will be available at http://localhost:5294
Swagger UI at http://localhost:5294/swagger
cd client
npm install
npm run devFrontend will be available at http://localhost:5173
Update PersonalFinanceDashboard.API/appsettings.json:
{
"ConnectionStrings": {
"DefaultConnection": "Server=localhost;Database=PersonalFinanceDashboard;Trusted_Connection=True;TrustServerCertificate=True;"
}
}- KPI cards showing total balance, monthly income, expenses and savings
- Income vs Expenses bar chart (last 6 months)
- Spending by category pie chart
- Live currency switcher (INR / USD / AED / EUR)
- Account cards with balance, type and currency
- Add new accounts with opening balance
- Transaction list with category icons and colour coding
- Income/Expense toggle with category filtering
- Auto balance update on account
- Monthly budget cards with progress bars
- Green / Orange / Red colour coding based on spend %
- Overspend alerts
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/accounts |
Get all accounts |
| POST | /api/accounts |
Create account |
| DELETE | /api/accounts/{id} |
Soft delete account |
| GET | /api/transactions |
Get all transactions |
| POST | /api/transactions |
Create transaction (updates balance) |
| DELETE | /api/transactions/{id} |
Delete transaction (reverses balance) |
| GET | /api/categories |
Get all categories |
| GET | /api/budgets/current |
Get current month budgets |
| POST | /api/budgets |
Create or update budget |
| GET | /api/summary?currency=INR |
Get dashboard summary with currency conversion |
- Clean Architecture : strict separation between Domain, Application, Infrastructure and API layers. Domain has zero external dependencies.
- Soft deletes on Accounts : records are marked inactive rather than physically deleted, preserving transaction history.
- Balance auto-update : creating or deleting a transaction automatically adjusts the linked account balance in the same database transaction.
- Currency conversion via API : live rates fetched from open.er-api.com and cached in-memory for 1 hour to avoid excessive external calls.
- Serverless-ready : designed for Azure SQL Serverless with auto-pause support for cost efficiency.
- Azure deployment (Static Web Apps + App Service + Azure SQL)
- JWT authentication and user accounts
- Recurring transactions
- CSV import/export
- Mobile responsive layout
- Dark mode
Built as a full-stack learning project to explore React + TypeScript frontend development alongside an existing .NET / Azure backend skillset.