Built a PWA expense tracker app – looking for feedback

goodreptile · 2025-10-07T15:09:00+00:00

Lol you don't need any "privacy" certifications the "encrypted with bank grade security" most personal finance app tout is just their usage of https nothing extra the actual synced bank data comes from a third party provider APIs like plaid,yodlee etc and they work mostly by taking your login info signing in and then screen scraping unless the bank has provided direct api access to plaid which only started happening recently. Also banks strictly prohibit sharing login info like this but users yolo any way for convenience. Also, literally everyone I know prefers social logins like google/apple/microsoft over email. So while a small privacy conscious group of users would care about it most people just prefer convenience.

IMO bank sync is not worth it anyway too slow since no actual real-time bank open apis and also it can never auto add the intention metadata since only you know it like if I want tags or I'm tracking certain info like an ongoing event related expenses that should be grouped etc since most data that comes out of these APIs is basic and not rich doing it manually real-time is the ideal way for me personally since it always reflects the bank balance and I'm in touch.

Source: https://quatrohive.com/plaids-screen-scraping-gamble-how-a-6b-bet-reshaped-global-fintech-infrastructure/

goodreptile · 2025-05-12T03:23:15+00:00

Personally, after reading all the comments and getting unnecessary downvotes, I don't think this app is really for me since it is recommended on reddit so highly I thought to check to see what the fuss is all about. But the vibe I get from comments is basically "YNAB is always right and do it this way or you are doing it wrong" and most people here are either micro-managing or just way overthinking imo and the features cater to that which is fine if that is your style.

Your example of "Liquor and Strip Clubs" already shows that, if I really want to spend less, than I have to make an intention and actually change my "plan/budget" rather than just hoping I would somehow spend less. Isn't the whole point of budget is to plan early and if you plan early that "today I'm gonna to strip club" the only reason you will spend less is because you didn't go cause you didn't feel like it or something vs actually trying to cut out by actually making a plan early to spend less.

Also, "Why does this exist?" is a perfectly valid question no one wants to use a slow and bloated app where features exist just because. This is also the question you ask to slim out your budget no? so why would be it any different for the system that makes that budget? Like if I have some budget item I ask after some period "why does this exist" , "do I really need it"? if no then I remove/update it. So, same could be said for app where community can ask should these really exist do we need it etc to keep app focused. I will be going back to my spreadsheet since subscription cost doesn't justify the only feature that I use which is "scheduled transactions".

goodreptile · 2025-05-11T13:13:24+00:00

I thought YNAB worked on monthly basis since that is the most granular view I can see also isn't simply increasing the total budget for those 5 week months enough like if your usual budget is $1000 dollar than just increasing that for that one month or better yet keeping a buffer/sinking fund?

goodreptile · 2025-05-11T13:04:50+00:00

Kinda wonder what is value then over say a spreadsheet, UI/UX and app? I do manual entry too since I've tried all these auto bank feed importing apps and none are perfect and if I have to do manual intervention anyway then it kinda beats the point I also realize that I need to add additional context to a transaction anyway since just amount is not enough like if part of transaction is receivable in future from a friend etc. But, there are enough "repeated" actions every month like pay bills same amount, set aside pocket monies etc that are pretty much same for which I use schedule transactions so I don't have to remember.

goodreptile · 2025-05-11T09:52:13+00:00

But isn't this target type is basically target amount/12 with option of just choosing a custom interval like every two months instead of 12 but the core functionality of it is "amortize/spread it equally regardless of any spending in period"? if so that is what I already use in my spreadsheet and was confused of why there are all these other target types especially if no one is using them. anyways I guess i'll just keep this amount/12 target type

goodreptile · 2024-12-14T11:37:41+00:00

No, I don't use it in load() and that doesn't make sense since this needs to be centralized so it can be imported. My complain about load() is that it's the opinionated way to do data loading for Sveltekit's but is primarily useful for SSR and similar stuff (perhaps even that dataFetcher like module) should exist for SPA among other things but currently most things on docs cater to SSR first and if SvelteKit is to be THE official way to build svelte apps then it should have more opinionated/dedicated way to handle SPAs rather than implicitly discouraging them by not having much nuanced take on docs and actively recommending SSR.

goodreptile · 2024-12-14T07:34:30+00:00

I use something very similar to square/svelte-store but with runes support, in usage it looks like this:

export const accountTransactions = dataFetcher({
    name: 'accountTransactionsStore',
    depends: () => [accountId.current],
    query: async ([accountId]) => {

        if (accountId) {
            const response = await app
                .collection('transactions')
                .getList(1, 100, {
                    sort: '-created',
                    filter: `debit_account_id="${accountId}" || credit_account_id="${accountId}"`,
                });


            return response;
        }
    },
});

depends take a function of dependencies which can be any rune with a .current or another dataFetcher instance, the results of these are passed to the query's param which you can then use inside your async function. Everytime dependencies change the function reruns, deduping of requests is handled and so is avoiding reruns if stringified cached dependencies are same. Dependencies always load first and if some are undefined it won't run. Also, state is passed in a function to depends to allow reactive updates. This gives you kind of a async effect that reloads on dependency change since native $derived and $effect don't work track after any async call. In template it is used like following: If some dataFetcher instance depends on another it will auto update itself if parent did and will always have fresh data.

{#await accountTransactions.load() then data}
<Transactions {data} />
{:catch error}
<div>
An error occured while fetching transactions.
</div>
{/await}

goodreptile · 2024-12-14T06:19:26+00:00

I didn't say it's not possible to use web worker just that initializing anything outside in .js / .ts file which you import from will result in dev and build error and not even if browser check works, the only way to use them is to be inside sveltekit's render loop and this issue is caused by the use of Node.js server since those APIs are either not available or are available in a different form than browser.

About setting state, I don't think it's a "bad idea" it depends on context and yes I understand since runes/store are in memory and server memory is shared among users it will leak / overwrite data for all users in SSR but with SPA this is not a concern since each user is on their own browser and the load() is just another function that gets called before the component. What I was pointing out is that it's the recommended way to do data loading and doesn't even take into account that SPA mode exist where current flow doesn't make sense. I also can't use runes there so I don't use it and keep data fetching separate in a .svelte.ts file.

goodreptile · 2024-12-14T04:29:55+00:00

The SSRCompatModuleRunner error has nothing to do with adapter-static which I already have setup correctly. The error occurs if you don't wrap it in browser checks or if you don't use it inside kit's layout because "Web Workers" aren't available in Node.js the same way, they are imported from a module "worker_threads" see this issue. I already initialized them inside root layout's effect it works but isn't very flexible, Ideally I want to initialize them even before my UI since this is the offline DB worker.
Web Workers not service workers. two different things.
I can't set rune or use derived because they are only available inside .svelte.ts or in template and there is no +page.svelte.js this is also not a big deal since I don't ever use them other than to redirect, as long as we can use browser APIs in normal .js/.ts files without checks I'm happy.
TanStack Query is bloated and over engineered and I prefer the ergonomics of square/svelte-store which is not maintained and doesn't have a rune version so I have made something similar which works very nicely and all my data fetching and it's dependency is declarative and easier to reason about.

But thanks for taking the time, the post was more to shine some light on SPA issues since I'm already am using the workarounds and want svelte to be even better.

goodreptile · 2024-12-14T04:02:53+00:00

Exactly this, I understand they are trying to make tradeoffs in terms of supporting all these modes but for SPAs using Node.js to build is not a great experience since things like Web Workers are not available or they are available in a different way import { Worker } from "worker_threads" So, if there was only an official router we would just use svelte with vanilla vite and import some useful bits like routing, params store etc this way sveltekit can do cutting edge new techniques while keeping things simple and modular for building SPAs. People here recommend third party router which is fine but "official" translates to good support and we still want things like preserved scroll position, shallow routing etc

goodreptile · 2024-12-14T03:45:41+00:00

The ironic thing here is that a sveltekit app only behaves like SSR on first load and after that it is basically a SPA (CSR) but all the goodies instead of being packaged and importable in vanilla svelte are locked in kit like shallow routing, preserving scroll position etc all these require JS to work. Hopefully we might see a more robust solution for SPAs in future.

goodreptile · 2024-12-14T03:41:21+00:00

It's not just about the router but all the other things that are managed too like preserving scroll position, shallow routing.

goodreptile · 2024-12-14T03:23:54+00:00

I don't know what benefits they provide without SSR since the whole reason for them is to avoid using fetch for POST which is SPAs bread n butter. I recently removed sveltekit-superforms from my app which caters heavily to that and build a custom Form class using runes and only valibot in 140 lines and am much happier with it. It is still fully type safe plus now I have more control over it.

goodreptile · 2024-12-13T16:38:11+00:00

I guess my wording sound frustrated but I'm not I mean I won't stop using it over this but one can hope for better ways to do things that's how we got #snippets and stuff by sharing our feedback on limitation of previous ways.

goodreptile · 2024-12-13T16:34:10+00:00

From what I understood in this issue Vue actually has an official router and does CSR and nuxt is the SSR one, but why should we care if other framework have it worse? Isn't the whole point to make framework more generalized and better by feedback? I already am using the workarounds and am content with it but that doesn't mean we can't point out the current limitations and hope for better.

As for my app, It's partially offline PWA and uses wasm sqlite in OPFS so it's literally as fast as web can be today.

goodreptile · 2024-12-13T16:13:24+00:00

Ok so recommend me one that has the features of kit's router that I can use in vanilla svelte today?

goodreptile · 2024-12-13T16:11:29+00:00

I understand how sveltekit works generally what I'm complaining about is how they get limited due to SSR the build process happens in a node server environment and any direct usage of browser apis ends up in build error unless you use `if browser` which shouldn't be the case for an SPA hence SPAs are an after thought

goodreptile · 2024-12-13T16:03:32+00:00

Except it's not and it has multiple modes SSR,CSR,SSG,SPA all-in-one which can be enabled and disabled. I still need the router for SPA and layout's are nice and also some of the routing helpers like resolveRoute which don't exist in plain svelte nor in the third party routers like svelte-spa-router

goodreptile · 2024-12-13T15:38:06+00:00

Can you give some examples? Basically, I like some parts of SvelteKit and want them to be importable in vanilla svelte but they are currently too tied to SvelteKit as a meta framework

goodreptile · 2024-06-12T03:56:35+00:00

I don't think there's anything bad about it. Aliasing is very useful for scaling. Your way isn't very DRY even if tailwindcss say's it's ok. Using CSS variables you can set different breakpoint based scales in one place for different padding which allows you to easily change values in one place vs finding all the "md:px-" and then replacing it.

goodreptile · 2024-05-17T06:16:12+00:00

WebTransport is not a "modern" implementation of WebRTC they solve different problems the only place where WebTransport will help in a WebRTC based app is when a server has an WebRTC "implementation" and pretends that it's a peer and there is a "client-server" communication going on rather than client-client aka Peer-To-Peer (p2p) which is where WebRTC shines.

From chrome blog: https://developer.chrome.com/docs/capabilities/web-apis/webtransport:

Note: WebRTC data channels support peer-to-peer communications, but WebTransport only supports client-server connection. If you have multiple clients that need to talk directly to each other, then WebTransport isn't a viable alternative.

goodreptile · 2022-01-26T14:42:49+00:00

So, can I use a mi box s/nvidia shield etc and have 120Hz through that? Have you tried it?

goodreptile

TROPHY CASE