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.

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: seminar accuse mystery assist delay law thing deal image undo guard initial shallow wrestle list fragile borrow velvet tomorrow awake explain test offer control (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

• Data: Clear the browser cache for localhost.
• Notifications:
  • Under browser settings, look for "notification" and remove this server.
  • Under about:debugging, find the service worker and Unregister.

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