Ethereum and Solidity: Build Dapp with VueJS

Write a Solidity smart contract in Remix, specify compiler version, and implement a storage mapping from addresses to person records with a public set data function that uses the sender.

Finish the contract by adding a public view function getPersonData(address) to fetch name and age from mapping, returning empty string and zero by default, and note explicit storage provider warning.

Deploy your contract in Remix using the JavaScript VM, observe gas costs, and interact with the deployed contract's public mapping functions and its address.

Fill the inputs and submit a transaction to create a new contract entry, noting the function is not payable, then read back the name and age from the mapping.

Redeploy after change shows compiling and redeploying the contract, then reading and writing data to verify users like Mary and John and building a web-connected dapp.

Initialize and configure truffle to build a simple map dapp by creating a folder, generating config and migrations, and setting up a development network with port 9545 and network ID.

Create a migration, import the storage contract artifact, and deploy the storage contract, then run the migration to obtain the contract address.

Set up a Vuex store for a VueJS dapp, defining state, actions, and mutations and wiring web3 to a contract instance.

Initialize web3 by detecting the injected provider, swap to a modern version, connect to the active network, and set up a watcher to update the Vuex store with the current account.

Demonstrate how to show the MetaMask account and the contract count on the front page by using Vuex getters to read state and dispatching actions to refresh the count.

Create two inputs for name and age to update and view each account’s data by wiring them to the store and rendering them on screen.

Create a save button with improved styling, padding, and responsive background transitions between dark and light themes to enhance usability in a dapp.

Persist dapp data across refreshes by querying the contract for current name and age, using the current address, then updating the store and confirming the transaction.