This is a test ETH+React.js-based grocery list app.
The backend uses ETH smart contract. There's actually no need for that, but I wanted to do something with solidity on my own and not through tutorials, so what the heck. It was built using Truffle, and tested (besides unit testing) using Metamask which sometimes works, and sometimes does not.
For your convenience I have already deployed a version of the smart contract updated to March 16, 2020. All you need is to hook yourself up with some Ropsten Ether and use the following contract address (see frontend):
0x57E6BAC4A7FA676DF6D825A9A650EA242096DA6C
to deploy with truffle (after installing) use
> truffle devfrom backend folder, and
> deployto deploy the contract. This will give you two outcomes. The first is a mnemonic you can use in metamask when importing a new wallet (after truffle dev) to interact with the contract, and the second is the contract's deployed address, e.g
> contract address: 0x57E6BaC4a7fa676dF6D825A9a650eA242096Da6Cwhich you should use in the first screen of the frontend.
If you are confident enough to deploy outside of truffle dev (perhaps to one of the test networks?) then you probably also know how to interact with the deployed contract.
The frontend was created using create-react-app. Again, no real use for React.js, I just wanted to learn outside of a structured tutorial.
To start the app execute
> npm install
> npm startor
> yarn install
> yarn startThe app will open at
localhost:3000
On the first screen you will be prompted to enter your smart contract's address. I will assume you are using Metamask so you will then be prompted (you might not be because Metamask...) to connect metamask to the smart contract. You can now add products, change quantitys, and remove products. For every action you make you will be prompted to approve the transaction in Metamask. Approve and observe. Note that depending on the network you choose transactions might take some time to be approved. Thus, for example if you add a product it might take a few seconds until it appears on the list. This happens because the transaction needs to be mined and an event must be emitted for the list to be updated. This ensures that the view is completely in sync with data on the blockchain.
This README and app were written by Matan Orland for practice sake. It probably contains bugs/unintended features. You may use anything you want free of charge. Enjoy. For questions email matan dot orland at gmail dot com.