EXpensifly.iO
Open-source personal finance platform.
2023
Overview
EXpensifly.iO was built to give individuals — especially young professionals and gig economy workers — a clear, honest picture of where their money goes. The platform tracks daily expenses by category, monitors savings goals, and provides financial education content alongside the numbers. It is fully open-source, designed to be extended by the community and adapted for different markets and currencies.
Our Role
Designed the full product — data model, Express.js API, Vue 3 frontend, Pinia stores, ECharts visualisations, and the financial education content structure.
Tech Stack
Key Features
Expense Tracking
Log daily spending with category, amount, date, and payment method. Filter by date range, category, or payment method to isolate spending patterns. Monthly and daily totals update automatically as entries are added.
Savings Goals
Define savings targets with a goal name, target amount, and deadline. The platform tracks progress against each goal and surfaces how much needs to be saved per day or month to stay on track.
Financial Targets
Set short and long-term financial goals — an emergency fund, a business investment, a travel budget. Each target has a visual progress bar and milestone markers so users can see momentum over time.
Analytics & Charts
ECharts-powered visualisations show expense trends over time, category breakdowns as pie charts, and daily spending patterns as bar charts. The charts update reactively as new expenses are logged.
Financial Education
Built-in guides cover budgeting basics, saving strategies for SMMEs, investment fundamentals, and introductory crypto content. Education is embedded in the app rather than outsourced to external links.
Open-Source & Extensible
Every module — expense tracking, savings, targets, education — is a separate Pinia store, making it straightforward for contributors to add new features without breaking existing ones. MIT licensed.
How It Was Built
The frontend is built with Vue 3 (Composition API, script setup) and Vite, using Pinia stores with pinia-plugin-persistedstate for localStorage sync — giving the app near-instant load times on return visits. The backend is an Express.js API on Node.js with MySQL for persistent user data, expenses, savings records, and financial targets. Passwords are hashed with bcrypt and sessions managed via JWT. Vue-ECharts wraps ECharts for reactive, responsive charts that recompute when store data changes. Tesseract.js is included for a future receipt OCR feature — snap a receipt and have the expense auto-populated. The WebSocket layer is architectured and ready for multi-device real-time sync. The app is deployed on Vercel (frontend) and Render (backend) for zero-infrastructure hosting.
Highlights
- Multi-store Pinia architecture — expenses, savings, targets, user each independently managed
- All stores auto-persist to localStorage — app loads instantly on return visits
- ECharts visualisations update reactively as expenses are logged
- Tesseract.js OCR integrated for future receipt-scanning feature
- WebSocket-ready architecture for multi-device sync
- Open-source (MIT) with financial education content built directly into the app
Build with us
Want something like this for your business?
We build web apps, mobile apps, and cloud infrastructure for African businesses.