Mobile application / React Native
SpendSense
Making everyday money easier to understand.
SpendSense is my open-source personal finance app built with React Native and TypeScript. It brings income and expense tracking, spending analysis and financial goals together so that recording a transaction leads to a clearer view of everyday finances.
- Focus
- Personal finance tracking
- Platform
- Cross-platform mobile
- Built with
- React Native · TypeScript
The challenge
A finance tracker has two jobs that depend on each other. Recording an expense needs to be manageable enough to repeat, and the records need to become useful information. If the entry flow is too complicated, the history becomes incomplete. If the analysis is unclear, there is little reason to keep recording it.
SpendSense connects those jobs through a shared set of transactions, accounts and categories. The aim is to make everyday records understandable across different time periods, while keeping personal goals close to the information that helps a person review their progress.
The approach
Give each transaction useful context
Transactions include an amount, category, account, date and notes. Income and expenses have their own categorisation, and custom accounts help people organise different parts of their finances. The history supports editing and filtering so that the app remains useful after the initial entry.
Turn records into readable analysis
The analytics screen supports monthly, yearly and all-time views. Category breakdowns and trend charts give different perspectives on the same records, while income, expense and net totals provide a compact summary. Switching the time period changes the question being answered without changing the underlying model.
Connect reflection with a goal
Savings goals pair target amounts with timeframes and visible progress. Theme and currency preferences make the interface adaptable, while reminders and streaks support a regular tracking habit. React Native and TypeScript provide the shared foundation for the mobile application and its reusable screen components.
03 / Inside the project
The technology behind SpendSense
The languages and tools used to bring the project to life.
The stack
- React Native & TypeScript
- Shared mobile screens and finance logic
- React Navigation
- Navigation between transactions, analytics and goals
- React Native SVG
- Charts and data visualisation
- Native iOS & Android
- Platform integration and application builds
Code by language
- TypeScript
- 87.1%
- JavaScript
- 5.9%
- HTML
- 3.2%
- Objective-C
- 1.8%
- Other
- 2.0%
The result
SpendSense demonstrates a connected mobile application rather than an isolated dashboard. Transaction entry, statistics, analytics, account management and goals all contribute to the same personal finance workflow. The public repository makes the implementation available to inspect, including its screens and reusable chart components.
The project is a practical example of my React Native development work: modelling user data, building consistent navigation and turning that data into readable interfaces. It is also a reminder that a chart earns its place by answering a useful question, such as where spending went or how one period compares with another.
Have something in mind?
Let’s build your next project.
Tell me what you want people to do, and we can work out the right experience to support it.
