This webapp is a visual timer to help you remember to do things throughout the day: eating, laundry, appointments.
Each timer has a progress bar that counts down until time runs out, then the whole row turns red and stares you in the face until you click Done. The progress bar is 60 minutes wide.
After that, done items are hidden (unless you want to see them).
- Create a workspace. Name it anything you want.
- Sign in and create an identity.
- Now you can add timers.
- Your data will be saved in your browser. If you want your data to sync to other devices, add pub server(s) in the Workspace Settings. You can use this one:
https://earthstar-demo-pub-v6-a.glitch.me/or run your own (see earthstar-pub)
Add multiple pub servers if you want redundancy. They have no authority; they just help keep your data online. Ask your friends to run some too, or put one on a raspberry pi under your desk.
Earthstar is a distributed system for collaborating on data with your friends. Kind of like SSB or Dat, but simpler and more multi-user.
There is no big global Earthstar network. Each workspace and pub are a mini disconnected island, sort of like a Discord or Slack or shared folder.
You can invite other people to your Buntimer by sending them an invitation (from Workspace Settings). They can collaborate with you and changes are synced in real time.
Anyone who knows your workspace address, and which pub(s) you use, can see and edit your data.
You can delete your data. There's a Data Deletion section at the end of Workspace Settings, or you can just delete your individual timers one by one Earthstar is not an append-only system -- deleted data actually goes away. Normal documents leave a bit of metadata behind (author, path, and timestamp, but not content). However this app uses ephemeral documents which delete themselves completely after 7 days, leaving nothing.
This app is based on create-react-app and uses React-earthstar for integration between Earthstar and React, though it's not too hard to just do it manually.
The interesting code is all in `buntimer.tsx'; the rest is CSS and layout stuff.
Earthstar doesn't merge changes to a single document, it just lets the most recent change win.
Usually we split objects into lots of small documents to make it easier for changes to coexist without clobbering each other.
In this app, each timer is stored in a single Earthstar document, as JSON, though it has several properties (name, time, isDone). This means any change to a timer will clobber other simultaneous changes (e.g. you can't have two people changing different parts of a timer at the same time). The use case is mainly personal so this is fine.
We use ephemeral documents that last 7 days to avoid clutter building up. Normally you will only want to see today's tasks anyway.
Document paths look like:
/buntimer-v1/timers/common/${id}!.json
TODO:
- Click absolute time to edit (currently you can only click the relative time)
- Hide tasks from yesterday and older
- Buttons to view previous days' tasks
- Hide Earthbar behind a hamburger button
- Pulse the color of red bars once a minute
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.