Back to projects
Introduction
The Top Expenditure App is a personal project that I have been using to track my daily expenses. It is a simple app that allows me to input expenses and categorize them into different categories. The app also provides a summary of the total expenses and the expenses for each category.
The app is built using React, Tailwind CSS. It is a single-page Progressive Web App (PWA) that uses Dexie.js (IndexDB) to store the data. The app is designed to be simple and easy to use, with a clean and minimalistic interface so I can quickly add expenses to the right category through the main page.
Features
- Input expenses and categorize them into different categories
- Set budget limits for each category
- View summary of total expenses and expenses for each category
- View expenses over time in a chart
- View detailed list of expenses with date and category
- Keep track of regular expenditures and income
Outlook
The app has been very useful for me in tracking my expenses and I would like to add more features to it in the future. Such as:
- Export data to CSV or PDF
- Support multiple currencies
- Upload records to a remote server
Screenshots
Main expenditure logging page
The most recent expenditure logging page. Based on my personal usage experience it is only the amount and the category of expenditures that matter the most (there are other fields such as name, tags, and date in the “info” tab should you choose to amend them) so I kept only these options on the main page.
Expenditure category details page
Allows you to view recent expenditures under a category, modify budgets and its percentage used in the current month, as well as modifying icons and colors of the category.
Statistics page
Shows the expenditures of the month and how they are distributed amongst expenditures. You can also see the expenditure trends and can choose if you want to see regular expenditures on the same graph as well.