TimeSafari.app - Crowd-Funder for Time - PWA

Project setup

We have pkgx.dev set up in package.json, so you can use dev to set up the dev environment.

npm install

Compiles and hot-reloads for development

npm run serve

Lints and fixes files

npm run lint

Compiles and minifies for production

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

npm run build

npx prettier --write ./sw_scripts/

to make sure the service worker scripts are in proper form

... then copy the contents of the sw_scripts folder to the dist folder - except additional_scripts.js.

Tests

Register new user on test server

On the test server, User #0 has rights to register others, so you can start playing one of two ways:

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

• Alternatively, register someone else under User #0 automatically:

  • In the src/views/AccountViewView.vue file, uncomment the lines referring to "testServerRegisterUser".

  • Visit the /account page.

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 'vapid' URL in App.vue, and install apps 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

• Clear the browser cache for localhost for a new user.
  • See that it's using the test API.
  • On each page, verify the messaging.
  • On the home page, see the feed without names, and see a message prompting to generate an ID.
  • On the discovery page, check that they can see projects, and set a search area to see projects nearby.
• As User #0 in another browser on the test API, add a give & a project. (See User #0 details above.)
  • 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 on the contacts page, add User #0 as a contact.
  • On the home page, see the feed that shows User #0 with a name.
• Generate an ID.
  • On the home page, check that it now prompts them to get registered.
  • On the account page, check that they see messages on limits.
• Register the ID from User #0.
  • As the new user on the home page, check that they can now record a gift.
  • On the contacts page, check that they cannot register someone else yet.
• Walk through the functions on each page.

Scenarios

• Create a new identity as prompted. Go to "Your Identity" screen and copy the ID to the clipboard.

• Go back to /start and import test User did:ethr:0x000Ee5654b9742f6Fe18ea970e32b97ee2247B51 with this 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.)

• Go to "Your Contacts" screen and add the ID you copied to the clipboard, and hit "+" to add them.

• Click on the "Registration Unknown" button and register that person to be able to make claims as them.

Clear/Reset data & restart

• Clear cache for localhost.
• Unregister service worker (in Chrome, go to chrome://serviceworker-internals/; in Firefox, go to about:serviceworkers or about:debugging).
• Clear notification permission (in Chrome, go to chrome://settings/content/notifications; in Firefox, go to about:preferences and search).

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.

Kudos

Gifts make the world go 'round!

• 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