DimeTrack

Worked on a custom date picker for the Timeline, so now instead of being locked into 7-day, 1 or 3 month views, users can now view any custom date they want. Created a financial safety net, where users can set a minimum balance and if your projected balance drops below it, a warning banner appears. Updated the auto-sync feature and made it truly auto, all users now need to do, is just enter a password once. Finally, did a final test of the app, fixed bugs, updated the landing page and the GitHub readme

Today, I worked on more Quality of Life features for my app, first of all - Introduced Keyboard Shortcuts, you can open the Command Bar with CTRL + K, add new transactions with ALT + N and switch tabs with ALT + 1 through 6. Created a small dialog that shows all the keyboard shortcuts available.

Another feature - Transaction Presets. You can now create a preset for your most used transactions, just fill out the add transaction form as usual and instead of pressing “Save Transaction” just press the new Bookmark icon, then at the top your preset will appear, next time just press on the preset and everything will be filled out for you.

Fixed a few tiny UI details, optimized mobile design, fixed a bug where the quick-add suggestion bar hardcoded a $ sign regardless of your selected currency. Finally, when creating a new transaction through the quick-add feature, you must now include a valid category otherwise the app won’t recognize that you are trying to add a transaction.

Today, I Improved the “Smart Stats” feature with a new “Insights” tab. I didn’t want to create a new tab just for the Insights, so I decided to Implement the new feature in to an already existing one. Insights display your spending pace, give budget warnings, alerts you If your Net Worth & Savings are trending up or down and gives your Goal Projections without you having to navigate to the Goals tab. Also, replaced the default browser confirmation dialogs with custom ones, updated the tabs list design to a bit more modern one and made the tabs list stick so when you are scrolling down, your tabs list will always be accessible. Finally, fixed a few small bugs and a major budget rollover bug that would instantly roll over your budget without checking, if you even had a budget limit previously.

Today, I’ve updated the command bar navigation to include the new Timeline and Investment tabs and with that also created a quicker way to add transactions - To create a transaction quicker, In the command bar all you need to do is type the amount, description and optionally category and account (for example: 9 Breakfast Food Checking). Also, reworked the transaction list and added abilities to select multiple or all transactions and bulk change account, categories, type or bulk delete transactions. Added ability to restore your transaction, if deleted accidentally. Finally, added an ability to duplicate transactions If needed.

Today, I created a fun new achievement system which currently features 12 achievements. In the achievements page you can see all of them + progress tracker towards them. Upon unlocking an achievement, you will receive a notification in the bottom right corner of your screen. All achievements are saved locally, included in JSON backups and sync seamlessly. Also, fixed some localstorage and JSON backup issues and fixed a bug that when clearing your data, your investments would not clear.

For todays update, I’ve worked on customization more. In settings, added an ability to turn off selected widgets that you do not care about. Turned off widgets will not be shown in the Overview tab. Also, I’ve done some more work to the Timeline tab, after each recurring transaction - your projected balance will show now, added an overdraft warning, so if your projected balance dips below 0 on a specific day, the chart will show a red zero-line and a warning banner will appear. Made the 3-month view sorted into groups by month, so Its easier to differentiate by month. Finally, I updated the exporting/importing and cloud syncing to make sure that everything is properly synced and no errors occur.

Made some small improvements to the Investments tab and added a “Portfolio Performance” chart, which tracks how much you invested vs how much your portfolio is worth currently. Other than that, I completely reworked the Calendar, which is now called - Timeline. Instead of a Calendar it now shows your 7 day, 30 day and 3 month timeline with a projected balance, a projected balance chart and upcoming recurring transactions. It it somewhat similar to the calendar, however the whole UX is much more simpler and cleaner. Finally, I fixed some math calculations.

Reworked the Investments Tab. Now you can properly buy/sell/update your investments to keep track of your Profit & Loss. When creating a new Investment, first of all, you will be able to select what kind of asset this is (It can be Stock, Crypto, ETF or Other). After creating an asset, you can buy/sell/update your asset. When buying, enter the quantity, price per date and set a date when bought. After buying you will instantly see your new updated portfolio value & how much you have invested. If you want to see your Total Profit & Loss, update your asset prices.

Another requested feature was cloud syncing or login so It was easier to use DimeTrack between multiple devices.

I built a cloud syncing feature with Upstash. Basically, your data is still encryped and nobody except you can see it. Also built an auto-sync feature so any time you add a transaction, update a budget, create a goal or do anything, the application waits 3 seconds and pushes your updated data to the cloud. Finally, did some minor settings UI changes to the tabs are less cluttered, especially on mobile screens.

How to set up syncing?

• Open Settings and navigate to the new Sync tab
• Under “Start New Sync” create your password and enable syncing
• The app will generate a unique Sync ID, save this ID

On your secondary device:

• Open Settings and navigate to the Sync tab
• Under “Connect to Existing Sync”, paste your Sync ID and enter your password
• Click Pull Data & Connect and your data will be downloaded. Auto-Sync is now active on both.

Auto-Sync is only active until you refresh your browser. After you refresh your browser, you will see a banner saying that Auto-sync is paused. To unpause - enter your password again.

*This sync feature is completely optional

Since the last devlog, I created a new Investments tab, where users can manually log their assets, mark them as Recurring Investments and update their values. Also, the total asset value is automatically added to the user’s Net Worth. For now, this investment tracker is very simple and I will be expanding on this feature a bit later. Most of my time during these few days was spent, trying to figure out how to connect Upstash to my app, so users can sync their data between devices, while I still keep DimeTrack fully serverless.

I’ve read the reviews of my previous ship and a few users suggested that I create a tutorial. So that’s what I have done.
When a brand new user opens the app (or an existing user clears their data), they will receive this welcome popup and will be given 2 choices - “Start Fresh” or “Start Demo Tour”. If the user chooses the Demo Tour, the app will instantly fill with realistic sample data (transactions,
categories, accounts, recurring transactions, savings goals & more). On top of that, a quick 12 step tutorial will appear. During the tutorial, users will create a transaction, a new category, setup an auto categorization rule & create a savings goal. Once the tutorial is finished, the sample data will be wiped and the user will be able to use the app with their own data.

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.