TimeSafari.app - Crowd-Funder for Time - PWA

Time Safari allows people to ease into collaboration: start with expressions of gratitude and expand to crowd-fund with time & money, then record and see the impact of contributions.

Roadmap

See project.task.yaml for current priorities. (Numbers at the beginning of lines are estimated hours. See taskyaml.org for details.)

Setup

We like pkgx: sh <(curl https://pkgx.sh) +npm sh

npm install

Compile and hot-reloads for development

npm run dev

Build the test & production app

npm run serve

Lint and fix files

npm run lint

Compile and minify for test & production

• If there are DB changes: before updating the test server, open browser(s) with current version to test DB migrations.

• npx prettier --write ./sw_scripts/

• Update the ClickUp tasks & CHANGELOG.md & the version in package.json, run npm install.

• Record what version is currently on production.

• Run the correct build:

  • Staging

# (Let's replace this with a .env.development or .env.staging file.)
# The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app PASSKEYS_ENABLED=yep npm run build

• Production

# This picks up values from .env.production
npm run build

• Get on the server and back up 3 DBs and the time-safari folder.

• rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari

• Commit changes. Record the new hash in the changelog. Edit package.json to increment version & add "-beta", npm install, and commit. Also record what version is on production.

• Tag with the new version.

Tests

Automated

At the test server: npx playwright test

At the locally running server: ... after cloning and setting up https://github.com/trentlarson/endorser-ch and running test/test.sh ... and after you npx playwright install chrome ... then run these:

# In the endorser-ch directory:
NODE_ENV=test-local npm run dev

# Here:
npx playwright test -c playwright.config-local.ts

``

Register new user on test server

On the test server, User #0 has rights to register others, so you can start playing by importing that user and registering others. Import the keys for the test User did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F by importing this seed phrase: rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage (Other test users are found here.)

Create multiple identifiers

Under the "Your Identity" screen, click "Advanced", click "Switch Identity / No Identity", then "Add Another Identity...".

Create keys with alternate tools

This page is a tool to create a JWT from a locally-generated keypair.

Web-push

For your own web-push tests, change the push server URL in Advanced settings on the account page, and install Time Safari & push server on the same domain.

Icons

To add an icon, add to main.ts and reference with fa element and icon attribute with the hyphenated name.

Manual walk-through test

• Backup seed & data & get a CSV dump from Endorser Mobile.
• If there were any DB changes, check that you're on the old version and reload the page and ensure you can still act and haven't lost data (ie. contacts, identities).
• Use a mobile user as well as a desktop user.
• Check that the version is updated.
  • Clear the browser data & add identity & import Time Safari contacts and then CSV contacts.
• Make sure that it's using the test API (under Identity in 'Advanced').
• Clear the browser data again. (See "Reset" below.)
  • Go to the account page before visiting the home page to see that there is no ID.
  • On the home page:
    • Check that it generated an ID.
    • Check the feed without names.
    • Copy the contact URL.
  • On each page, verify the messaging, and that they cannot take action.
  • On the discovery page, check that they can see projects, and set a search area to see projects nearby.
  • On the contacts page, check that they can add a contact even without their own ID.
• Install the PWA.
• As User 0 in another browser on the test API, add a give & a project.
  • Note that some combinations of desktop with mobile emulation stretch the image.
  • Import User 0 with seed: rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage
  • Add new user as a contact (which allows them to see User 0).
  • With the new user on the home page, see the feed that shows User 0 in network but without the name.
• As the new user, import contacts & identifiers.
• As the new user on the contacts page, add User 0 as a contact.
  • On the home page, see the feed that shows User 0 with a name.
• Switch back to the generated identifier.
  • On the account page, check that they see messages on limits.
• As User 0, register the ID.
• As the new user on the home page, check that they can now record a gift, and record an offer & delivery.
• On the contacts page, check that they cannot register someone else yet.
• Walk through the functions on each page.
• Set and run notifications.
• Export & import, both seed and contacts & settings.
• Choose location on the search map.
• Offer, deliver a give, and confirm. Create a third user and test connections.
• On mobile, share an image with the app.
• Switch to "no identifier" to see that things look OK without any ID.

Clear/Reset data & restart

• Clear cache for site. (In Chrome, go to chrome://settings/cookies and "all site data and permissions"; in Firefox, go to about:preferences and search for "cache" then "Manage Data", and also manually remove the IndexedDB data if the DBs still show.)
• Clear notification permission. (In Chrome, go to chrome://settings/content/notifications; in Firefox, go to about:preferences and search for "notifications".)
• Unregister service worker. (In Chrome, go to chrome://serviceworker-internals; in Firefox, go to about:serviceworkers.)
• Clear Cache Storage manually, possibly deleting the DB. (In Chrome, in dev tools under Application; in Firefox, in dev tools under Storage.)

(If you find more, add them to the HelpNotificationsView.vue file.)

Troubleshooting

• A problem with GET http://localhost:8080/web-push/vapid means the py-push-server is not running (and notifications won't work for a local app without special routing from the browser's web push service provider, anyway).

• Red errors everywhere with a console message like this: Error: An ID is chosen but there are no keys for it so it cannot be used to talk with the service ... has happened on account switching when the current account was erased (or maybe replaced -- once I had a duplicate and I don't know how).

• The error DEXIE ENCRYPT ADDON: Could not decrypt message! or Encryption key has changed means that the encryption key is wrong, sometimes seen after clearing storage for testing; you can make it happen by clearing localStorage. Maybe only part of the storage was cleared out. Unless you got a copy of that password, you'll have to erase storage and reload the identifier.

Other

Reference Material

• Notifications can be type of toast (self-dismiss), info, success, warning, and danger. They are done via notiwind and set up in App.vue.

• Customize Vue configuration.

• If you are deploying in a subdirectory, add it to publicPath in vue.config.js, eg: publicPath: "/app/time-tracker/",

Kudos

Gifts make the world go 'round!

• WebStorm by JetBrains for the free open-source license
• Máximo Fernández for the 3D code and explanatory post
• Many tools & libraries such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
• Bush 3D model
• Forest floor image
• Time Safari logo assisted by DALL-E in ChatGPT
• DiceBear and Avataaars for human-looking identicons
• Some gratitude prompts thanks to Develop Good Habits