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 & Building

Quick start:

npm install
npm run dev

See the test locations for "IMAGE_API_SERVER" or "PARTNER_API_SERVER" below, or use http://localhost:3000 for local endorser.ch

Build the test & production app

npm run serve

Lint and fix files

npm run lint

Run all UI tests

Look below for the "test-all" instructions.

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.

• Commit everything (since the commit hash is used the app).

• Put the commit hash in the changelog (which will help you remember to bump the version later).

• Tag with the new version, online or git tag 0.3.55 && git push origin 0.3.55.

• For test, build the app (because test server is not yet set up to build):

TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_APP_SERVER=https://test.timesafari.app VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HWE8FWHQ1YGP7GFZYYPS272F VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app VITE_DEFAULT_PARTNER_API_SERVER=https://test-partner-api.endorser.ch VITE_PASSKEYS_ENABLED=true npm run build

... and transfer to the test server:

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

(Let's replace that with a .env.development or .env.staging file.)

(Note: 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.)

• For prod, get on the server and run the correct build:

  ... and log onto the server:

  • pkgx +npm sh

  • cd crowd-funder-for-time-pwa && git checkout master && git pull && git checkout 0.3.55 && npm install && npm run build && cd -

  (The plain npm run build uses the .env.production file.)

• Back up the time-safari/dist folder & deploy: mv time-safari/dist time-safari-dist-prev.0 && mv crowd-funder-for-time-pwa/dist time-safari/

• 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.

Tests

See TESTING.md for detailed test instructions.

Icons

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

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