Since my last devlog, I made a quite a few changes:
Implemented a timer in the top right corner of your screen. The timer starts, as you soon, as you start your run. Timer resets if you die or complete a level. Your best times per level are saved in the browsers localstorage and in each level your current time and best time are being displayed
Upgraded the overall game flow, created a level select screen, where it shows your best beat time. Also, levels are now locked, so you cannot play level 2 unless you beat level 1. The game saves your unlock progress in localstorage
Created a level complete screen, so now when a player touches the doors, a “Level Complete” overlay pops up showing your time. If you beat a record, it flashes “NEW BEST TIME” and you get choices to Retry, Play the next level or Go back to the level selection screen
Created a pause menu. When pausing your timer stops. In the pause menu, players can choose to either continue, reset or exit the level
Flipbound is a 2D platformer game that I’m building with the main mechanic being - flipping gravity. You press Space and you fall up. The game is being built in plain HTML, Vanilla JavaScript on a <canvas> and tailwindcss.
Today, I made the core mechanics of the game. Got the player movement, gravity flipping. Decided to add a Gravity Meter, which means that you cannot hang out in the ceiling forever. When you flip, the meter starts draining and you have a few seconds before you fall back to the floor.
After the gravity meter was done, I started making the level creation. Created a few levels with spikes, standing & moving platforms. Made the player move with the moving platform, so he doesn’t fall. After that, created the death & respawn logic.
Finally, added a camera so I could make the levels bigger, made a quick main screen and a door that transports the player between levels.
The red rectangle is a spike, the gray ones are standing platforms (they don’t move), the orange one that I’m standing on is the moving platform and the green bar at the top is the Gravity Meter.
At this time, there are no graphics and everything is ugly because I want to focus on mechanics first and then design.
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?
On your secondary device:
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
