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

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

Lints and fixes files

npm run lint

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 to be a new user.
  • On each page, verify the messaging.
  • On the home page, see message prompting to generate an ID.
• As User #0 in another browser, add a give record. (See User #0 details above.)
  • With the new user on the home page, see the feed that shows users without names.
• As the new user on the contacts page, add a contact.
  • On the discovery page, check that they can see projects.
  • Choose a search area and see items show nearby.
• 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. Also that they see a hint on the user name in the feed (since user #0 is visible to them).
  • On the contacts page, check that they cannot register someone else yet.
• As the new user, add User #0 to contacts.
  • On the home page, see the name of user #0 info in the feed.
• 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 data & restart

Clear the browser cache for localhost.

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