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

• 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 site. (In Chrome, go to chrome://settings/cookies and "all site data and permissions"; in Firefox, go to about:preferences and search for cache.)
• 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).
• Clear Cache Storage (in Chrome, in dev tools under Application; in Firefox, in dev tools under Storage).

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