DimeTrack

Upgraded the budgeting side and added support for category rollover. So basically, If you underspend your limit this month, the remainder rolls over to the next month. But If you overspend, it will carry over as debt and your limit next month will be lower.

Also worked on some smaller features, such as: added a clear filters button in transaction list whenever active filters are applied. Added small colored dots next to category names in the transaction list, the color of the dot matches your category color. If no recurring expenses are present, you will see a button, that will help you to create one.

Finally, started working on a proper tutorial which is probably going to be in the next devlog.

Added a new chart to the overview tab that projects your accounts balance 12 months in to the future based on your active recurring income & expenses. It features a red line at 0$ to warn you of potential overdrafts. Other than that, I’ve made a few code refactors, extracted formatting logic into a shared component and worked on mobile UI for this chart.

Since the last update, I’ve made some small QOL improvements. Created ability to edit assigned accounts when editing a transaction. Also, you can now sort transactions by date (newest/oldest) or amount (highest/lowest). Added ability to filter and search transactions by tags. Reorganized the filter & search toolbar to fit everything smoothly, especially for mobiles. Lastly, upgraded empty states, so if you have no transactions, you’ll see not only the empty state but also an “Add Transaction” button. The change applies to Savings Goals

Today I spent a lot of time making a command menu, basically you can press Ctrl+K anywhere or click the new search bar in the header to open the Command Menu. It allows you to instantly search all transactions, jump to any tab, or trigger actions like adding a transaction or goal. Also, I created a new tags feature, you can add tags when creating or editing transactions for cross-category tracking. Finally, slightly redesigned the header so It now fully functions and fits on mobile.

Continuing to work on DimeTrack, I made a dedicated “Subscriptions” tab, where It scans your recurring expenses, displays how much you spend on subscriptions monthly & annually and allows to toggle subscriptions between “Active” and “Cancelled” without deleting past transaction history. Also upgraded the main dashboard tabs to support 5 categories, added Icons to the tabs and on mobile tabs switch to icon-only layout to prevent text squishing. Finally, added a native browser confirmation prompts to all delete actions (deleting goals, accounts, categories & recurring transactions)

Created a “Monthly Report” dialog that generates a breakdown of the current months total income & expenses, net savings & savings rate, daily average spending, top spending category, largest single purchase & a trend comparison of expenses versus the previous month. Also fixed chart tool tip clipping om mobile screens, optimized the main header layout by hiding button text on small screens, preventing the “Settings” & “View Monthly Report” buttons from going out of bounds. Updated the landing page with new features and screenshots & updated the github readme.

Added a new Net Worth History chart to the overview tab, which tracks your all-time balance over the last 6 months. Also upgraded the 6-month Income vs Expenses visualization from a Bar chart to a Line chart to match the Net Worth History chart design. Both charts now feature a smart Y-axis formatting for large numbers, shared tooltip styles.

Today I made a guided setup checklist to help new users configure their dashboard with ease. Instead of an empty app, now a “Get Started” button appears at the top right corner, which opens a 5 step tutorial (Create Account, Category, Set a budget limit, a savings goal & Add a transaction). The checklist automatically detects completed steps and also allows users to skip the guide. Onboarding is fully linked with localStorage and JSON backups, so It doesn’t appear to users who already have everything setup.

Created 2 new features:

• Net Worth - replaced the “current balance” card on the overview tab which a dynamic Net Worth widget which calculates your all-time balance and compares it to your balance at the end of last month, displaying a green or red trend arrow to show how much your net worth has grown or shrunk this month.

• Custom color theming - created a new settings tab called “appearance” & custom color picker which allows users to instantly re-theme buttons, active tabs, calendar selections, focused inputs. The color picker here is powered by react-colorful and color change is being handled by colord. Also implemented a localColor state so the app only commits the CSS when the user releases the color picker drag.

Created a new Smart Stats widget to Overview tab that calculates your Daily Average spending and projects your End Of Month spending based on your current Daily Average spending. Then after that, I looked through every file and did some refactors, bug fixes & UI polishing (especially on mobile).

Bug fixes:

• Excluded “Starting Balance” transactions from calculateIncome & getMonthlyTrends so adding an account with starting balance doesn’t inflate income stats or trend charts.
• Fixed deleteCategory to clean up everything (including transaction splits, auto-categorization rules and category customization).
• Added a transfer account validation to Add Transaction dialog to prevent saving a transfer with empty “From/To” accounts or transferring money to the same account.
• Fixed the “Will exceed budget” warning showing when adding Income.
• Added defaultAccountId to JSON export/import handlers so the user’s default account setting survives JSON backups.

Refactors:

• Extracted the duplicated color/icon Popover UI from settingsUI & accountManager in to a single colorIconPicker component.
• Extracted duplicated Recharts tooltip styling into a shared chartStyles.ts constant.

UI Polish:

• Made the calendar mobile-friendly by showing colored dots on small screens and full text & balances on larger ones.
• Hid the default calendar navigation arrows that appeared at the top of the screen and adjusted button heights to match.
• Adjusted TabsList to use text-xs on mobile to prevent text overlapping on small screens.
• Added offset, z-index & allowEscapeViewBox to chart styles to prevent hover tooltips from being hidden behind chart graphics.
• Removed dead props, fixed a few typos and replaced hardcoded values with consts.

Final part of the Accounts update:
Worked on visual customization for the accounts system. Users can now edit account names without losing their transaction history. Also introduced a color and icon picker for accounts (just like with categories), so It’s easier for users to differentiate between accounts. Created a new “Total Balance” card that quickly shows your balance between all accounts. Finally, added a new filter for the transaction list - “Transfer”, colored transfers in a gray color so they don’t look like expenses, hidden the “Starting Balance” system transactions to reduce the visual clutter of the transaction list & updated the default account badge design.

Part 2 of the Accounts update:
Created a new ‘account balance’ widget that displays all your accounts & their balances. The transaction list now features a badge with the account name that the transaction was assigned to. Spent a lot of time fixing CSV exports/imports to properly support accounts & transfers between accounts. Finally, introduced a ‘starting balance’ feature for users can instantly input their balance when creating a new account without typing months of history and a ‘default account’ setting that auto selects their primary account when creating a new transaction

Part 1 of the Accounts update:

I finally built the whole architecture for multi-account management. Users can now create accounts (like checking or savings) and assign transactions to them. Also Introduced “transfers” which allow users to move money between accounts without adding fake data to income or expenses. The add and edit transaction dialogs now feature a dynamic UI that swaps out categories & split transaction functionalities for “From/to” account selectors. Finally, updated localStorage & JSON data exports to make sure that accounts are included.

Improved the spending pie chart by adding a legend below the chart, displaying currency symbols when hovering & vastly improving tooltip readability on hover. Also expanded the Recent Transactions page with even more filters. Now you can filter transactions by income, expenses and categories. Finally, fixed some design inconsistencies.

Added category customization, allowing users to personalize categories with custom icons & colors. Updated the spending chart and budget overview to use the new customization system, so select icons and colors are consistent throughout the whole application. Refactored the application to use default icon & color when none are selected.

Added auto-categorization rules, which allows transactions to be automatically assigned to categories based on custom keywords. When you type the set keyword in description, a category will be auto chosen based on the rule. Built a rules manager in the Settings page to manage auto-categorization rules. Also expanded CSV & JSON import/export functionality to include notes & auto-categorization rules. Fixed several issues with CSV importing, when imported descriptions, notes were missing & incorrect amounts were assigned. Finally, redesigned the Settings UI and assigned each category to its own tab & cleaned up various design inconsistencies.

Introduced the ability to split a single transaction across multiple categories. Also improved the transaction list to clearly display split categories and their amounts. Now, creating new categories is much easier, as they can be added directly when creating a transaction. Finally, I added warnings that notify users when a savings goal contribution would exceed its target or when a new expense would push a category over Its budget limit.

I spent 12 hours on this 😭😭😭. It’s a cash flow calendar which uses historical and current transactions & puts them in a calendar. This feature projects your upcoming recurring transactions & income, automatically calculating your daily running balance. It highlights your balance red, if there is a potential overdraft. It’s pretty easy to navigate through past & future months to analyze your spending.

Created an optional selection when creating a savings goal - Target Date. If Target Date is selected, when contributing to a goal, you will get a suggested amount based on your goal & target date. Created a notification system and replaced all alert() functions with notifications. When creating & editing transactions, users can now enter additional notes that they may have about the transaction. Also fixed CSV importing bugs & a few small UI inconsistencies.

Today most of my time was dedicated to a UI rearrangement. I split the whole dashboard into 3 main tabs. Also created a section that shows your upcoming recurring transactions in the next 7 days. Finally, made a setting that allows users to wipe all their data.

Mostly worked on the new Import CSV, Export & Import backups features. With Import CSV, you can import your existing transactions & categories while with Import backup you can import everything that your app has, this is great if user is switching browsers or devices. The other feature is a 6 month expenses vs income TrendChart that allows you to visually see how much you are making, spending & compare.

DEV #7

Well first of all, It took me an hour to find a simple shadow class that needed to be removed so the landing page picture looks better. The rest of the time was spent figuring out how to & actually making the ability to create multiple goals at once.

DEV #6

Since shipping I worked on a small landing page which presents the core features of dimetrack. Fixed some issues with recurring transactions & implemented the ability to use custom values for recurring transactions instead of using the preset ones. Lastly, created loading
skeletons & worked on some small design improvements (inconsistent gaps, settings dialog not being scrollable when too many elements are present, added small animations to progress bars.)

DEV #5

Polished the application more (especially mobile design) and finished the remaining features that I had planned.

• Users can now search their transactions by description, category or amount
• Added a separate goal contribution history for easier tracking
• Added budget limit warnings at: 50%, 80% & 100%
• Users can export their data in a .csv file

DEV #4

• Added recurring transactions support. Users can select recurring transactions every day, week, month or year.
• Users can see all their recurring transactions & delete them in settings
• Added transaction filtering, same as recurring transactions, users can filter their recent transactions by day, week, month, year or lifetime
• Created field errors
• Many bug fixes

DEV #3

New features:

• Currency selector
• New settings page
• Ability to contribute to goal
• Ability to delete categories
• Ability to edit budget limits
• Lots of bug fixes
• Huge code cleanup, refactors & +99 more bugs to fix

Day 2

Created:

• Categories
• Spending by category & spending breakdown pie-chart
• Ability to edit goals

Mostly worked on optimization today, moved most components into separate files. Fixed some bugs (hopefully). Designed a quick (was not quick) logo & favicon.

Created the first working version of the transaction system. Income and expenses are now accepted, and actual data rather than hardcoded amounts are used to update balance, income, and spending in real time. Also created transaction saving to localStorage.

Discovered a bug early on where an invalid input broke all calculations, so I added a better validation in the form to (hopefully) prevent these types of errors in the future.

For now, I’ll keep working on the UX part and create more features and then move on to UI.