Production-ready full-stack personal finance platform for budgeting, smart allocation, tax planning, and financial goal tracking.
Overview • Features • Screenshots • Tech Stack • Architecture • Quick Start • Deployment
Smart Budget Tracker & Asset Allocator is a production-ready personal finance platform that helps users manage income streams, expenses, savings goals, tax planning, and smart asset allocation through a responsive full-stack dashboard.
The project combines a modern React/Vite frontend, FastAPI backend architecture, dynamic financial allocation logic, Google Sheets integration, responsive mobile-first UI, and Dockerized deployment workflows.
It is designed as a portfolio-grade engineering project demonstrating full-stack development, REST API architecture, responsive UI engineering, deployment pipelines, financial logic systems, and production-ready project organization.
| Frontend | Backend API Docs |
|---|---|
| https://smart-budget-allocator.vercel.app | https://smart-budget-allocator.onrender.com/docs |
|
|
|
|
Frontend React • Vite • CSS3 |
Backend FastAPI • SQLite • SQLAlchemy |
DevOps Docker • Git • GitHub |
|
Frontend Hosting Vercel |
 Backend Hosting Render |
Integrations Google Sheets API |
| Account | Current | Target |
|---|---|---|
| Chequing | 1100 | 5000 |
| Savings | 400 | 20000 |
| WealthSimple | 500 | 10000 |
Monthly Income: 3600
flowchart TD
A[React + Vite Frontend] --> B[FastAPI REST API]
B --> C[SQLite Database]
B --> D[Allocation Engine]
B --> E[Tax Planner]
B --> F[Goal Tracking Engine]
B --> G[Google Sheets Import]
User Enters Financial Data
↓
React Dashboard Captures Inputs
↓
FastAPI Backend Validates Request
↓
SQLite Stores Income, Expenses, Goals, and Logs
↓
Allocation Engine Calculates Surplus, Gaps, and Priorities
↓
Tax Planner Estimates Tax Impact
↓
Goal Tracker Computes Progress and Timelines
↓
Dashboard Displays Charts, Logs, Warnings, and Recommendations
↓
Optional Google Sheets Import/Sync Updates Financial Records
↓
User Reviews Monthly Logs and Adjusts Budget Strategy
| Step | Description |
|---|---|
| 1 | User enters income, expenses, goals, and financial data |
| 2 | Frontend sends requests to FastAPI APIs |
| 3 | Backend validates and stores financial data |
| 4 | Allocation engine computes savings and goal progress |
| 5 | Dashboard visualizes financial insights |
| 6 | Logs and goals persist across sessions |
| Area | Highlights |
|---|---|
| Frontend Engineering | Responsive React/Vite dashboard with mobile support |
| Backend Engineering | Modular FastAPI REST architecture |
| Financial Logic | Dynamic smart allocation engine |
| Mobile Optimization | Horizontal table scrolling and adaptive layouts |
| Deployment | Vercel frontend and Render backend |
| DevOps | Dockerized deployment workflows |
| UX Engineering | Touch-friendly responsive finance workflows |
| Integrations | Google Sheets CSV/API synchronization |
📁 Folder Structure
smart-budget-allocator/
├── backend/
│ ├── app/
│ │ ├── api/
│ │ ├── core/
│ │ ├── models/
│ │ ├── schemas/
│ │ └── main.py
│ ├── tests/
│ ├── requirements.txt
│ └── Dockerfile
│
├── frontend/
│ ├── src/
│ │ ├── api/
│ │ ├── components/
│ │ ├── App.jsx
│ │ ├── main.jsx
│ │ └── styles.css
│ ├── package.json
│ └── Dockerfile
│
├── docs/
│ ├── screenshots/
│ ├── ARCHITECTURE.md
│ ├── DEPLOYMENT.md
│ ├── GOOGLE_SHEETS_SETUP.md
│ └── USER_GUIDE.md
│
├── google-sheets/
├── scripts/
├── docker-compose.yml
├── render.yaml
├── .env.example
└── README.md
cd backend
python -m venv venv
pip install -r requirements.txt
uvicorn app.main:app --reload --port 8000Backend:
http://localhost:8000
API Docs:
http://localhost:8000/docs
cd frontend
npm install
npm run devFrontend:
http://localhost:5173
docker compose up --build
|
|
See: docs/GOOGLE_SHEETS_SETUP.md
The backend calculates:
- current surplus
- savings gap
- investment gap
- monthly goal progress
- estimated months to goal
- recommended allocations
Default logic:
IF chequing is below target:
prioritize chequing + savings
ELSE IF savings is below target:
prioritize savings + investments
ELSE:
prioritize investments
| Capability | Description |
|---|---|
| Yearly logs | January to December tracking |
| Year selector | Dynamic selection from 2020 to 2050 |
| Editable cells | Income and expense entries can be updated |
| Auto totals | Monthly income, expenses, and balance are calculated |
| Current month sync | Ongoing month updates reflect across related tabs |
| Responsive view | Horizontal scrolling for mobile screens |
The application is optimized for:
- Android
- iPhone
- tablets
- desktop browsers
Mobile features include:
- horizontal table scrolling
- responsive layouts
- adaptive spacing
- touch-friendly navigation
- scrollable financial tables
- mobile-first dashboard workflows
| Layer | Platform |
|---|---|
| Frontend | Vercel |
| Backend | Render |
| Database | SQLite |
| Containers | Docker |
| Environment Config | .env files |
frontend/vercel.json
frontend/.env.production.example
frontend/.env.local.example
backend/start.sh
render.yaml
docker-compose.yml
docs/DEPLOYMENT.md
Run:
start-app.bat
This automatically:
- creates backend virtual environment
- installs dependencies
- launches backend/frontend
- opens browser automatically
- enables same-network mobile access
Stop local servers:
stop-app.bat
| Priority | Improvement |
|---|---|
| High | JWT authentication |
| High | PostgreSQL migration |
| Medium | AI-powered financial insights |
| Medium | Investment analytics dashboard |
| Medium | Cloud synchronization |
| Low | Email reminders |
| Low | Financial forecasting |
| Low | Multi-user collaboration |
This project is licensed under the MIT License.
This project is intended for budgeting, financial organization, and planning purposes only.
It does not provide legal, tax, financial, or investment advice.