As the world has moved to everything online, I've gotten sick and tired of having to create a new account for every single service I might want to use. At the same time, I hate the idea of logging in with an account of one of the big leechers so that they can profile me even better.
I get that there are some things where it makes sense to have a personal account. But a lot of smaller stuff out there really has no excuse for forcing me to create an account - and I'm so annoyed by it that I mostly just don't even bother trying out something I otherwise would.
I created a keyboard-based local storage based time and to-do tracker 3 years ago.
I was starting out in web dev and wrote it for my own use but moved on to other stuff - don't think I even wrote any media queries. I think the codebase since, but just remembered I had it deployed on an internal site for testing - hackily removed a few things from it from the compiled JS and put it on Github.
I built https://reframe.canine.sh as a tool for managing dashboards of little apps then set it as my new tab page to quickly access a notepad and kanban board
I've been meaning to build something similar for some time and never got the chance to do it. What you built looks really good and does almost everything I had planned.
The main feature missing for me (the one I wanted to build first if I ever started) is a dashboard with all (start/pause) buttons with current tasks ready to be clicked. Let's say I'm working on ticket TICK-123 and also "customer care". Then I would love to have a dashboard with a start/pause button for TICK-123, "customer care" and a "new task" one that behaves like the "Start stopwatch" you have. That way start/pause is one click away and tracking time is less in the way of what I'm currently doing.
Great idea, thank you! Shorthands are on my list. Would it work if you could immediately start a stopwatch + assign a tag, such as “customer care” with a single click?
I preferably don’t want to include projects/folders/tickets, this is what I found cumbersome to deal with in other trackers.
- Have the option to round the times when reporting (for example, at my work we log in 15m increments).
- Have the option to see the combined total grouped by description/tag, e.g. if I'm working on a ticket ABC-123 and I log multiple entries throughout the day, it would be nice to see the total time spent on the ticket without having to manually calculate.
- It could also be useful to add a button to copy the description/tags, for example if you needed to transfer your times to an internal system.
Thank you! So nice to see it's something others were looking into as well. And these are great ideas, I'll add them to the list. Could you specifically clarify on the grouping? I already show time spent by tag - anything you're missing? Thanks again :)
Time tracking 101, you should never allow two time trackers to run at the same time (especially if you are planning on tracking and billing your time on a project funded by the government). Starting a timer should always stop all the others.
Good one - that sounds like great optional behavior. Having said that, I consciously built it this way. I personally use simultaneous stopwatches to track a full day of work and tagged items within that day, such as a specific meeting (each another stopwatch).
The "Personal Time" option subsequently merges the overlapping hours so that on Statistics, I'm looking at time spent in real life (as a person), while still being able to zoom in on specifically tagged items.
Ah - thanks for reporting. Any details on the device you're using? For me it's working fine on iPhone/Mac. In any case, I had to cut some corners with JS for the UI library I'm using. These should be CSS-only animations, period. Thanks.
Congrats on shipping! I'll try it out on my next freelancing project.
I love this approach of local-first webapp, with optional sync afterwards. I've been working on a journaling/note-taking app with a similar approach, but finishing pet projects on limited free time is hard.
Could you share a bit more about the stack and your experience building it? What was challenging?
Yeah this took quite some weekends :) Just hang in there and you'll get a project shipped too!
I'm using Angular (yes, really!), and some date-fns utils for the time-related logic. Other than that, it's all custom except for the Catalyst UI library and Frappe charts. The hardest thing to solve was the event-driven foundation (which I'll use for sync support later).
Initially, I started out with Automerge/Yjs but figured that simple event sourcing would be good enough given there's no collaborative/concurrent use case. The benefit of that is that I can actually explain the logic. Not saying those projects lack documentation (they don't), I'm just not comfortable shipping a CRDT that I can't explain e2e. Might change once I have time to dive in properly.
Similar I'd love to hear anything you can share about how you are persisting the data. I've been working on the web version of the recommendation todo app that I'm building and so far, since I know basically nothing about web development, I'm storing everything in cookies *ducks*.
Any reason why you think it's unreliable? Note my aim is to make it a PWA in the future, meaning it would be installed on your machine and run perfectly fine without an internet connection.
"No signup needed" is the way to go!
As the world has moved to everything online, I've gotten sick and tired of having to create a new account for every single service I might want to use. At the same time, I hate the idea of logging in with an account of one of the big leechers so that they can profile me even better.
I get that there are some things where it makes sense to have a personal account. But a lot of smaller stuff out there really has no excuse for forcing me to create an account - and I'm so annoyed by it that I mostly just don't even bother trying out something I otherwise would.
"Devices and Sync" are "Coming soon"
I assume once that feature is available, account (thus Sign up) would become necessary.
I wish that feature is opt-in, so "No Sign Up" can remain available for those who do not need that feature.
Fully agree, I dislike auth walls as well. It's also great for distribution, so everybody wins.
Well done!
I created a keyboard-based local storage based time and to-do tracker 3 years ago.
I was starting out in web dev and wrote it for my own use but moved on to other stuff - don't think I even wrote any media queries. I think the codebase since, but just remembered I had it deployed on an internal site for testing - hackily removed a few things from it from the compiled JS and put it on Github.
Try it out here: https://trackey-beige.vercel.app/
https://github.com/sateeshsai/trackey (compiled JS from a Svelte 3 codebase I lost to time)
Love stuff that uses local storage!
I built https://reframe.canine.sh as a tool for managing dashboards of little apps then set it as my new tab page to quickly access a notepad and kanban board
This is the one I use: https://reframe.canine.sh/czhu12
This actually seems useful enough that I’d consider replacing my pomodoro timer with it
Aah love to hear that! I think you should be able to iframe it just fine unless you're using an older Safari version.
Reframe is really neat. Is the source out there?
Was a pretty quick hack to learn remix, source is here. Almost all the code is in two files
https://github.com/czhu12/reframe
This web app reminds me of the manifesto https://rosswintle.uk/2024/02/a-manifesto-for-small-static-w... , which I think is a good thing!
I've been meaning to build something similar for some time and never got the chance to do it. What you built looks really good and does almost everything I had planned.
The main feature missing for me (the one I wanted to build first if I ever started) is a dashboard with all (start/pause) buttons with current tasks ready to be clicked. Let's say I'm working on ticket TICK-123 and also "customer care". Then I would love to have a dashboard with a start/pause button for TICK-123, "customer care" and a "new task" one that behaves like the "Start stopwatch" you have. That way start/pause is one click away and tracking time is less in the way of what I'm currently doing.
Great idea, thank you! Shorthands are on my list. Would it work if you could immediately start a stopwatch + assign a tag, such as “customer care” with a single click?
I preferably don’t want to include projects/folders/tickets, this is what I found cumbersome to deal with in other trackers.
yes, especially if this stopwatch-tag combo became visible on the home page after that until I decide to hide/delete them
Very nice, well done! I built something similar (although with far fewer features): https://jameswhoughton.github.io/timetracker/
Some suggestions:
- Have the option to round the times when reporting (for example, at my work we log in 15m increments).
- Have the option to see the combined total grouped by description/tag, e.g. if I'm working on a ticket ABC-123 and I log multiple entries throughout the day, it would be nice to see the total time spent on the ticket without having to manually calculate.
- It could also be useful to add a button to copy the description/tags, for example if you needed to transfer your times to an internal system.
Thank you! So nice to see it's something others were looking into as well. And these are great ideas, I'll add them to the list. Could you specifically clarify on the grouping? I already show time spent by tag - anything you're missing? Thanks again :)
Tags work for more general categories, I was thinking at a more granular level e.g.
--
Time entries
--
Ticket 123 - 0.5hrs
Stand up - 0.25hrs
Ticket 123 - 1.25hrs
--
Total time
--
Ticket 123 - 1.75hrs
Stand up - 0.25hrs
I guess you could achieve this with tags but you would potentially end up with lots of tags to manage!
Time tracking 101, you should never allow two time trackers to run at the same time (especially if you are planning on tracking and billing your time on a project funded by the government). Starting a timer should always stop all the others.
Good one - that sounds like great optional behavior. Having said that, I consciously built it this way. I personally use simultaneous stopwatches to track a full day of work and tagged items within that day, such as a specific meeting (each another stopwatch).
The "Personal Time" option subsequently merges the overlapping hours so that on Statistics, I'm looking at time spent in real life (as a person), while still being able to zoom in on specifically tagged items.
Congrats for shipping!
Unfortunately for me the website is very slow due to the animations. When I hover a button it takes 1 second before the background color changes.
Ah - thanks for reporting. Any details on the device you're using? For me it's working fine on iPhone/Mac. In any case, I had to cut some corners with JS for the UI library I'm using. These should be CSS-only animations, period. Thanks.
Congrats on shipping! I'll try it out on my next freelancing project.
I love this approach of local-first webapp, with optional sync afterwards. I've been working on a journaling/note-taking app with a similar approach, but finishing pet projects on limited free time is hard.
Could you share a bit more about the stack and your experience building it? What was challenging?
Yeah this took quite some weekends :) Just hang in there and you'll get a project shipped too!
I'm using Angular (yes, really!), and some date-fns utils for the time-related logic. Other than that, it's all custom except for the Catalyst UI library and Frappe charts. The hardest thing to solve was the event-driven foundation (which I'll use for sync support later).
Initially, I started out with Automerge/Yjs but figured that simple event sourcing would be good enough given there's no collaborative/concurrent use case. The benefit of that is that I can actually explain the logic. Not saying those projects lack documentation (they don't), I'm just not comfortable shipping a CRDT that I can't explain e2e. Might change once I have time to dive in properly.
Thanks a lot for your answer!
How about the database? You're just using IndexedDB for the persistence? How was the experience of working with it?
Similar I'd love to hear anything you can share about how you are persisting the data. I've been working on the web version of the recommendation todo app that I'm building and so far, since I know basically nothing about web development, I'm storing everything in cookies *ducks*.
I think we should stop relying on unreliable web sites and go back to the roots: https://timewarrior.net/
Any reason why you think it's unreliable? Note my aim is to make it a PWA in the future, meaning it would be installed on your machine and run perfectly fine without an internet connection.
See also Super Productivity.