Adding a favorites list to the Truffle Pet Shop tutorial via Blockstack

in #blockstack6 years ago

Simple Pet Shop

Truffle is framework for building decentralized web apps on the ethereum network. For developers they provide a tutorial explaining how to build such an app. It is a simple shop page where users can adopt a pet.

After installing truffle you get the truffle skeleton with truffle unbox pet-shop. Then fill in the gaps, deploy the contracts and you have a running app on the ethereum network. However, the web app looks the same for everybody. What if the user would like to think about adopting for a while and discuss with friends? A good shop page should let users add pets to their 'favorites' list.

Favorites List

As pet shop owner, I don't want to deal with personal, maybe sensitive data therefore the decentralized Blockstack identity and storage framework can be used. This allows the user to store and load their favorites list at their preferred storage provider. Imagine that all stores support the same format, then you can have one favorite list with your items highlighted in any shop you are visiting on the new decentralized web across your devices.

For the sake of the tutorial, we only add a like button to the web page by including the blockstack.js file to index.html, adding a bit of login UI and functions to store and load the favorite pets. You can find the code and some instruction on a local test setup on bitbucket.

The result looks like this:
personalizedview.png

The app works with or without blockstack installed and is fully decentralized, only static content is served from the host, the rest is retrieved from smart contracts and the user's storage provider.

Feel free to improve the code and reach out if you have any questions.