Overview · Features · Workflow · Technology · Local setup
Note
A complete client-side expense workflow with advanced filters, Chart.js reports and downloadable exports.
ExpenseFlow is a responsive personal finance workspace built with HTML, CSS and vanilla JavaScript. It covers the complete journey from recording expenses to filtering, visualizing and exporting them.
Saved records are shared across the application's Home, Filters and Reports pages through localStorage, creating a cohesive multi-page experience without a backend.
| CRUD expense records | 7 filter inputs | 2 report charts | CSV/PDF export formats |
| Project detail | Implementation |
|---|---|
| Management | Add, update and delete expenses |
| Filtering | Date parts, range, category and maximum amount |
| Analytics | Category doughnut and monthly stacked bar charts |
| Export | CSV through Blob API and PDF through jsPDF |
Create records with category, description, amount and date. Existing entries can be updated in place or deleted with confirmation.
The filtering view can combine year, month, day, category, date range and maximum amount while recalculating result totals.
Chart.js transforms the saved data into a category doughnut chart and a stacked monthly bar chart. Reports can be narrowed to a selected year.
The browser generates downloadable CSV files with the Blob API and formatted PDF reports with jsPDF.
| Technology | Role |
|---|---|
| HTML5 | Accessible multi-page application structure |
| CSS3 | Responsive Liquid Glass-inspired interface |
| JavaScript | CRUD, filters, aggregation and DOM updates |
| Chart.js | Doughnut and stacked bar reports |
| jsPDF | Client-side PDF generation |
| Blob API | CSV generation and download |
| Web Storage API | Persistent expense dataset |
ExpenseFlow/
|-- index.html Expense manager
|-- filters.html Advanced filtering view
|-- reports.html Charts and export tools
|-- about.html Project information
|-- main.js CRUD and summaries
|-- filters.js Filter pipeline
|-- reports.js Charts and exports
|-- style.css Shared responsive design
|-- assets/ Application assets
|-- docs/ README-only visual assets
`-- README.md Project documentation
git clone https://github.com/itaygoldenberg/ExpenseFlow.git
cd ExpenseFlowOpen index.html or serve the folder with VS Code Live Server. No package installation, API key or backend is required.
- Expense data is stored only in the current browser.
- Chart.js and jsPDF are loaded from public CDNs on the Reports page.
Itay Goldenberg
Full Stack Developer Student
