https://github.com/abizek/kloc
Shareable stopwatch and timer
https://github.com/abizek/kloc
shared stopwatch timer
Last synced: 7 months ago
JSON representation
Shareable stopwatch and timer
- Host: GitHub
- URL: https://github.com/abizek/kloc
- Owner: abizek
- Created: 2024-03-05T14:14:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-30T13:37:32.000Z (over 1 year ago)
- Last Synced: 2025-06-26T17:06:46.063Z (8 months ago)
- Topics: shared, stopwatch, timer
- Language: TypeScript
- Homepage: https://kloc.pages.dev
- Size: 366 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kloc
Shareable stopwatch and timer. UX _inspired_ by the Samsung clock app.
Check out the app at https://kloc.pages.dev
Check out the [stopwatch](https://stately.ai/registry/editor/350b30e8-7251-4b58-bd6c-670bfee8af31?mode=design&machineId=b50146c3-1632-41cc-bd44-baa31457f6cf) and [timer](https://stately.ai/registry/editor/350b30e8-7251-4b58-bd6c-670bfee8af31?mode=design&machineId=04d2084b-bb49-4e65-b68e-3db3ac7c40ae) state machines on the stately.ai visualizer
> [!NOTE]
> _Timer UX is 🚧 under renovation 🚧_
>
> _New features coming soon ⛏_
>
> _Keep posted!_
## Use Cases
* This is a simple one. You are running a marathon, one person starts the stopwatch at the beginning of the track and another person stops it when the track ends. You could also have people track the time you took to complete different sections with the lap feature
* Track how long it has been since your last vacation / date / any other stuff that you want to do again
* Countdown to next vacation / retirement / any other event that you are looking forward to
* Sharing your stopwatch/timer with your accountability partner for a study session or any accountability-related thing
* Productivity / remote collaboration stuff with your co-worker or team
* Timed activities like classroom quizzes, timed practice sessions or a timed challenge on a game
* Some crazy stuff I haven't thought about
## Development
> Made using [Xstate](https://stately.ai/docs/xstate) for maintaining state, [Partykit](https://www.partykit.io) for sharing the state, [Radix UI](https://www.radix-ui.com) and [Framer Motion](https://www.framer.com/motion).
1. Run `npm i`
2. Run `npm run dev` and the app should be served on `http://localhost:5173` and the partykit server on `http://localhost:1999`
* Run cypress e2e tests with `npm t`. For headed use `npm run cy:open`