NOTEOnline project: Zhuli Life · Bookkeeping Assistant Open-source repository: Tokisaki-Galaxy/statistics-zhulishenghuo
Development Background
Campus life expenses such as water fees, water refills, and laundry are small but frequent. The Zhuli Life app currently lacks an intuitive financial statistics feature. Manually recording such tiny expenses is inefficient. This project aims to use browser-side technology to automatically extract and analyze spending records.
Core Features
Image Recognition Data Entry
The system integrates OCR technology. Users upload long screenshots of spending records to complete data collection. No need to manually enter amounts and times.
Localized Privacy Protection
All image recognition logic runs locally in the browser. Data is stored in the client-side IndexedDB. No information is uploaded to any server. Privacy and security are guaranteed at the foundation.
Multi-Dimensional Data Visualization
The system provides monthly bill summaries. A heatmap of spending periods reveals life patterns. A GitHub-style contribution graph intuitively reflects spending frequency.
Technical Architecture
Front-End Framework
Uses the lightweight Alpine.js. Clear logic hierarchy. Suitable for rapid development of small single-page applications.
Text Recognition
Integrates the Tesseract.js engine. Achieves high-performance OCR recognition in the browser. Supports text parsing of complex long images.
Data Persistence and Visualization
Uses IndexedDB for high-capacity local storage. Ensures data is not lost after page refreshes. Uses Chart.js to draw dynamic statistical charts.
Workflow
- Get a screenshot: capture a long screenshot of spending records in the Zhuli Life app.
- Upload and parse: upload the screenshot to the bookkeeping assistant interface.
- View reports: the system automatically parses and generates statistical charts.
- Export data: supports exporting CSV or JSON format files for secondary analysis.
Notes
- A PC browser is recommended for a better experience.