{"id":28040,"date":"2022-03-23T22:59:34","date_gmt":"2022-03-23T22:59:34","guid":{"rendered":"http:\/\/Working-with-User-Profiles-on-a-Blockchain"},"modified":"2022-03-23T22:59:34","modified_gmt":"2022-03-23T22:59:34","slug":"working-with-user-profiles-on-a-blockchain","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/","title":{"rendered":"Working with User Profiles on a Blockchain"},"content":{"rendered":"

There might be a situation where you want to be able to store user profiles on an Ethereum blockchain so that you can make sure to track every update that\u2019s made. This might be to ensure that NFTs are always associated with the proper creator. It could also be to make sure that sensitive data is stored more securely than in a regular database.<\/p>\n

That\u2019s why we\u2019ll be making a Dapp (distributed app) that\u2019s hosted on an Ethereum network. We\u2019ll get the most sensitive information from the blockchain and we\u2019ll also have data in a regular database. All of this will be nicely bundled into a Redwood app.<\/p>\n

Setting things up for the project<\/h2>\n

Working with blockchain can seem a little tricky at first. That\u2019s why we\u2019ll get a few things in place first. If you don\u2019t have Ganache installed, go ahead and download that here<\/a>. This will give you access to a local Ethereum network you can use to deploy smart contracts.<\/p>\n

You\u2019ll also need a local Postgres instance since that\u2019s the regular database we\u2019ll work with. You can download that for free<\/a> if you don\u2019t already have it.<\/p>\n

The last thing we need to set up is the project itself. Since we\u2019ll be working with Redwood, we can generate the files and folders we need for both the front-end and back-end with the following command.<\/p>\n

$ yarn create redwood-app --typescript user-profile-dapp\n<\/code><\/span><\/pre>\n
This bootstraps a fully functional full-stack app that we can modify to fit our Dapp. The two main directories we\u2019ll be working with are api<\/code> and web<\/code> which contain the code and folder structure for the back-end and front-end, respectively. With all of the setup finished, let\u2019s start writing our back-end code.<\/p>\n
Working on the back-end<\/h2>\n
The first thing we\u2019ll do is define the models for our regular database. In api > db<\/code>, open the schema.prisma<\/code> file. This is where we handle all of the database changes we need to make. Start by updating the provider<\/code> to postgresql<\/code> from sqlite<\/code>.<\/p>\n
Then open your .env<\/code> file in the root of the project. You\u2019ll see a commented-out reference to the DATABASE_URL<\/code> variable. Go ahead and uncomment this and update it to match your connection string to Postgres. It might look something like this.<\/p>\n
DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/user_profiles<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now if you go back to the schema.prisma<\/code> file, you\u2019ll see where this value is used to connect to the database. The last thing we need to do in this file is add our profile model. There\u2019s an example user model there and you can delete this and add the following code.<\/p>\n
model Profile {\n  id                String<\/span>   @id @default<\/span>(uuid())\n  updatedAt         DateTime\n  email             String<\/span>\n  blockchainAddress String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all we need for the database model. We can run a migration to get this table in the database now. To do that, run this command.<\/p>\n
$ yarn rw prisma migrate dev\n<\/code><\/span><\/pre>\n
This will establish a connection to the database, prompt you for a migration name, then add your changes to the database. That\u2019s all for the database. Now we\u2019re going to show off one of Redwood\u2019s commands to generate the types and resolvers for the GraphQL server we\u2019ll use.<\/p>\n
Working with GraphQL<\/h3>\n
In order to create and update user profiles in the regular database, we\u2019ll run this command to generate some code for us.<\/p>\n
$ yarn rw g sdl --crud profile\n<\/code><\/span><\/pre>\n
This will add a new file inside api > src > graphql<\/code> that has all of the types to support our CRUD functionality. It also generates the resolvers to actually make database updates.<\/p>\n
You can find the resolvers in api > src > services > profiles<\/code>. There are a couple of files related to testing in that directory, but if you open profiles.ts<\/code>, you\u2019ll see all of the resolvers.<\/p>\n
That wraps up everything on the back-end! Now we\u2019re going to shift focus to the front-end, where we\u2019ll write a smart contract and start interacting with a blockchain.<\/p>\n
Writing the smart contract<\/h2>\n
Before we start coding the user interface, we do need to get that smart contract in place. To do this, let\u2019s install Truffle<\/a> in the web<\/code> directory. This will let us interact with our local blockchain directly in the terminal. You can install it with the following command.<\/p>\n
$ yarn add truffle web3\n<\/code><\/span><\/pre>\n
If that doesn\u2019t work for you, try the following command:<\/p>\n
$ npm install -g truffle\n<\/code><\/span><\/pre>\n
Sometimes there are issues with using Truffle if it\u2019s not installed globally, but that might be dependent on your local setup.<\/p>\n
Now that we have Truffle, let\u2019s start making our smart contract by running the following command in the web<\/code> directory.<\/p>\n
$ truffle init\n<\/code><\/span><\/pre>\n
This will create a new directory called contracts<\/code> and you\u2019ll see an initial smart contract file written in Solidity. We\u2019ll add another smart contract in this directory called Profile.sol<\/code>. This is how we\u2019ll handle adding records to the blockchain.<\/p>\n
Every Solidity file starts with the version you want to use. We\u2019ll add this line to the top of the code.<\/p>\n
pragma<\/span> solidity<\/span> ^0.5<\/span>.0<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Now we want to start writing the contract. Add the following code below the version declaration.<\/p>\n
contract<\/span> Profile<\/span> {\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
We can start defining some of the values we\u2019ll be working with. Inside of the contract, add the following code.<\/p>\n
uint256 public<\/span> userCount = 0<\/span>;\n\nstruct User {\n  uint256 id;\n  string name;\n  string role;\n  string profileImg;\n  bool isRegistered;\n}\n\nmapping(uint256 => User) public<\/span> usersById;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Solidity is an interesting mix of JavaScript\/C++ syntax. The first variable we have is an integer that\u2019s publically accessible called userCount<\/code>. This will help us track how many users we have and it\u2019ll act as the index for their profile information.<\/p>\n
Next, we have a struct that defines the User<\/code> and their profile info. A struct is similar to an interface or a type in TypeScript.<\/p>\n
The next variable we have is a mapping. Mappings are like objects in JavaScript. We have a public mapping(object) called usersById<\/code> and it has a key-value pair of an integer and a User<\/code> object that looks something like this:<\/p>\n
{\n  1<\/span>: {\n    id<\/span>: 1<\/span>,\n    name<\/span>: 'Spencer'<\/span>,\n    role<\/span>: 'admin'<\/span>,\n    profileImg<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1624811825\/beach-360_p6u08j.jpg'<\/span>,\n    isRegistered<\/span>: true<\/span>\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With the variable definitions in place, we can add our constructor function. This will get executed exactly one time during the life of the smart contract when it\u2019s initially deployed to the blockchain. Add this code below the mapping.<\/p>\n
constructor<\/span>() public {\n  createUser(\n    'Spencer'<\/span>,\n    'admin'<\/span>,\n    'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1624811825\/beach-360_p6u08j.jpg'<\/span>,\n    true<\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re adding a new user profile to the blockchain as soon as we add this smart contract. That way we have some initial data to interact with. This is also where you can set the owner info for a smart contract to allow access to different functions, but that\u2019s a more advanced topic.<\/p>\n
For now we can add the createUser<\/code> function that is being referenced in the constructor. Right below the constructor call, add this:<\/p>\n
function<\/span> createUser<\/span>(\n  string memory _name,\n  string memory _role,\n  string memory _profileImg,\n  bool _isRegistered\n<\/span>) public<\/span> <\/span>{\n  userCount++;\n\n  usersById[userCount] = User(\n    userCount,\n    _name,\n    _role,\n    _profileImg,\n    _isRegistered\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
It\u2019s very similar to a TypeScript function with a few differences. We want to be able to call this function from our front-end, so it will be public. Then we define the types for the function inputs. Inside the function, we\u2019re incrementing the userCount<\/code> by 1.<\/p>\n
Then we\u2019re using the new userCount<\/code> value as the id for the new user profile. This function is going to let us add new user profiles from the front-end we\u2019re about to build.<\/p>\n
That\u2019s all for the smart contract! Now we just need to deploy it.<\/p>\n
Writing the migration<\/h3>\n
Let\u2019s write a quick migration script for our new smart contract. In the web > migrations<\/code> folder, add a new file called 2_deploy_profile_contracts.js<\/code>. Open that file and add the following code:<\/p>\n
const<\/span> Profile = artifacts.require(\".\/Profile.sol\"<\/span>);\n\nmodule<\/span>.exports = function<\/span>(deployer<\/span>) <\/span>{\n  deployer.deploy(Profile);\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we write migrations to deploy smart contract changes to the EVM. Now we need to actually run the deploy.<\/p>\n
Deploying the smart contract<\/h3>\n
In your terminal, go to the web<\/code> directory and run:<\/p>\n
$ truffle migrate\n<\/code><\/span><\/pre>\n
This will connect to the local EVM you have running with Ganache. If you haven\u2019t opened Ganache, go ahead and do that and choose the \u201cQuickStart\u201d option.<\/p>\n
You should see a couple of printouts in the terminal and the only thing you need to get is the contract address<\/code> of the deploy we wrote. It\u2019ll look something like this: 0xe3173637950221539F40d7F54a431880786142BD<\/code>.<\/p>\n
Now we can switch over to the front-end!<\/p>\n
Setting the smart contract configs<\/h2>\n
We need to set up a file to hold our configs to connect the smart contract we just deployed. Inside web > src<\/code>, create a new file called config.tsx<\/code>. Then add the following code:<\/p>\n
export<\/span> const<\/span> PROFILE_ADDRESS = '0xe3173637950221539F40d7F54a431880786142BD'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is the contract address you got from the terminal after deploying the smart contract. Now we need to add the ABI (application binary interface) for the smart contract so that we can interact with the public functions and variables. You can find the ABI for the contract in web > build > Profile.json<\/code>. Go ahead and copy that abi<\/code> from that JSON file and paste it in the config.tsx<\/code> below the PROFILE_ADDRESS<\/code>.<\/p>\n
export<\/span> const<\/span> PROFILE_ABI: any = [\n  {\n    \"constant\"<\/span>: true<\/span>,\n    \"inputs\"<\/span>: [],\n    \"name\"<\/span>: \"userCount\"<\/span>,\n    \"outputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      }\n    ],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"view\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0x07973ccf\"<\/span>\n  },\n  {\n    \"constant\"<\/span>: true<\/span>,\n    \"inputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      }\n    ],\n    \"name\"<\/span>: \"usersById\"<\/span>,\n    \"outputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"id\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"name\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"role\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"profileImg\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"isRegistered\"<\/span>,\n        \"type\"<\/span>: \"bool\"<\/span>\n      }\n    ],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"view\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0x426b5382\"<\/span>\n  },\n  {\n    \"inputs\"<\/span>: [],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"nonpayable\"<\/span>,\n    \"type\"<\/span>: \"constructor\"<\/span>,\n    \"signature\"<\/span>: \"constructor\"<\/span>\n  },\n  {\n    \"constant\"<\/span>: false<\/span>,\n    \"inputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"_name\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"_role\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"_profileImg\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"_isRegistered\"<\/span>,\n        \"type\"<\/span>: \"bool\"<\/span>\n      }\n    ],\n    \"name\"<\/span>: \"createUser\"<\/span>,\n    \"outputs\"<\/span>: [],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"nonpayable\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0xe4f3ad95\"<\/span>\n  }\n]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all for the setup. We can finally create the user interface for this Dapp!<\/p>\n
Making the user interface<\/h2>\n
In your terminal, go to the root of your project and run this command:<\/p>\n
$ yarn rw g page Profile\n<\/code><\/span><\/pre>\n
This will generate a few new files for us and update the Routes.tsx<\/code> with a new \/profile<\/code> route. This is the route users can see their profiles on. If you go to web > src > pages > ProfilePage<\/code>, you\u2019ll see all the new files. You can take a look at the test file and the Storybook story, but our focus is on ProfilePage.tsx<\/code>.<\/p>\n
Open this file and clear everything out. We\u2019ll start fresh.<\/p>\n
Adding imports and type definitions<\/h3>\n
We\u2019ll start by adding the packages we need to import and a type definition for the profile data. At the top of the file, add the following:<\/p>\n
import<\/span> { useState, useEffect } from<\/span> 'react'<\/span>\nimport<\/span> { useMutation } from<\/span> '@redwoodjs\/web'<\/span>\nimport<\/span> Web3 from<\/span> 'web3'<\/span>\nimport<\/span> { PROFILE_ABI, PROFILE_ADDRESS } from<\/span> '..\/..\/config'<\/span>\n\ninterface UserProps {\n  name<\/span>: string;\n  role: string;\n  profileImg: string;\n  isRegistered: boolean;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll add the call definition to our GraphQL server.<\/p>\n
Note:<\/em> It\u2019s common to see decentralized apps still using some kind of centralization. Right now, there aren\u2019t many apps that are truly decentralized.<\/p>\n
const<\/span> CREATE_PROFILE_MUTATION = gql`\n  mutation CreateProfileMutation($input: CreateProfileInput!) {\n    createProfile(input: $input) {\n      id\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This gives us a way to access the database from the front-end. All that\u2019s left now is to fill in the component.<\/p>\n
Filling in the ProfilePage component<\/h2>\n
We\u2019ll start by declaring and exporting the component. After the GraphQL definition, add this code:<\/p>\n
const<\/span> ProfilePage = ()<\/span> =><\/span> {\n\n}\n\nexport<\/span> default<\/span> ProfilePage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we\u2019ll add the states we need right inside this component with this code:<\/p>\n
const<\/span> [createProfile] = useMutation(CREATE_PROFILE_MUTATION)\n\nconst<\/span> [account, setAccount] = useState<string>(''<\/span>)\nconst<\/span> [profile, setProfile] = useState<any>()\nconst<\/span> [user, setUser] = useState<UserProps>()\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we\u2019re going to connect to the blockchain as soon as the app has loaded in the browser. We\u2019ll do that by calling a function in a useEffect<\/code> hook like this:<\/p>\n
useEffect(()<\/span> =><\/span> {\n  loadData()\n}, [])\n\nconst<\/span> loadData = async<\/span> () => {\n  const<\/span> web3 = new<\/span> Web3('http:\/\/localhost:7545'<\/span>)\n\n  const<\/span> accounts = await<\/span> web3.eth?.getAccounts()\n  setAccount(accounts[0<\/span>])\n\n  const<\/span> profile = new<\/span> web3.eth.Contract(PROFILE_ABI, PROFILE_ADDRESS)\n  setProfile(profile)\n\n  const<\/span> user = await<\/span> profile.methods.usersById(3<\/span>).call()\n  setUser(user)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The loadData<\/code> function is how we get all of the information we need to interact with the blockchain. We make a new instance of Web3 that connects to the local EVM running in Ganache. Then we get the account id of the current user. We get access to the smart contract we deployed by using the address and ABI we go from our deploy.<\/p>\n
Lastly, we specify an id and get the user profile info directly from the blockchain. Since we\u2019ll be able to add new profiles to the blockchain and the database, we\u2019ll have a form to let users enter their info. That means we\u2019ll need a function to handle the form submission. We\u2019ll add this code now, right below the loadData<\/code> function.<\/p>\n
const<\/span> handleSubmit = async<\/span> (event) => {\n  event.preventDefault()\n\n  const<\/span> { email, name, role, profileImg, isRegistered } = event.target.elements\n\n  const<\/span> input = { email<\/span>: email.value, updatedAt<\/span>: new<\/span> Date<\/span>().toISOString(), blockchainAddress<\/span>: account }\n\n  createProfile({\n    variables<\/span>: { input },\n  })\n\n  await<\/span> profile.methods.createUser(name.value, role.value, profileImg.value, isRegistered.value).send({ from<\/span>: account, gas<\/span>: 4712388<\/span> })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This keeps the page from reloading while it pulls the data from the form and makes an input for the database and then calls the GraphQL resolver. Then we add the new profile to the blockchain with the createUser<\/code> method from the smart contract.<\/p>\n
The last thing we need to do is render the HTML that will show in the browser. We\u2019ll do this in the return statement for the component. So add this final snippet of code below the handleSubmit<\/code> function.<\/p>\n
return<\/span> (\n  <div<\/span>><\/span>\n    <h1<\/span>><\/span>Profile Page<\/h1<\/span>><\/span>\n    Profile account id: {account}\n    {user &&\n      <div<\/span>><\/span>\n        <p<\/span>><\/span>{user.name}<\/p<\/span>><\/span>\n        <input<\/span> type<\/span>=\"checkbox\"<\/span> checked<\/span>={user.isRegistered}<\/span> \/><\/span>\n        <p<\/span>><\/span>{user.role}<\/p<\/span>><\/span>\n        <img<\/span> src<\/span>={user.profileImg}<\/span> width<\/span>=\"360\"<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n    }\n    <h2<\/span>><\/span>Add user profile to the chain<\/h2<\/span>><\/span>\n    <form<\/span> onSubmit<\/span>={handleSubmit}<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>='name'<\/span>><\/span>Name:<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>='name'<\/span> type<\/span>='text'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>='email'<\/span>><\/span>Email:<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>='email'<\/span> type<\/span>='email'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>='role'<\/span>><\/span>Role:<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>='role'<\/span> type<\/span>='text'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>='profileImg'<\/span>><\/span>Profile Pic:<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>='profileImg'<\/span> type<\/span>='text'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>='isRegistered'<\/span>><\/span>Registered:<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>='isRegistered'<\/span> type<\/span>='checkbox'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <button<\/span> type<\/span>='submit'<\/span>><\/span>Submit<\/button<\/span>><\/span>\n    <\/form<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This shows the data we retrieve from the blockchain if we have a user<\/code> defined. It also shows the form that we use to add new profiles to the blockchain and our database.<\/p>\n
Here\u2019s what it might look like in your browser.<\/p>\n
\"image<\/p>\n
We\u2019re finally done with our Dapp!<\/p>\n
Finished code<\/h2>\n
If you want to take a look at the fully functioning front-end and back-end, you can clone the repo from the user-profile-dapp<\/code> folder in this repo<\/a>. Or you can check out the front-end in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Note:<\/em> The Code Sandbox won\u2019t show anything unless you set up your own config file. This one is connecting to a local EVM.<\/p>\n
Conclusion<\/h2>\n
This is a great time to start learning how to work with blockchain and Web3 since it\u2019s on the rise. It might be a niche technology, but it solves an interesting problem. Learning how to write smart contracts and build Dapps around them is a useful skill if you\u2019re looking at where you might like to go with your career!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28041,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371],"class_list":["post-28040","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nWorking with User Profiles on a Blockchain<\/title>\n<meta name=\"description\" content=\"Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with User Profiles on a Blockchain\" \/>\n<meta property=\"og:description\" content=\"Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:59:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"3840\" \/>\n\t<meta property=\"og:image:height\" content=\"2160\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Working with User Profiles on a Blockchain\",\"datePublished\":\"2022-03-23T22:59:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/\",\"name\":\"Working with User Profiles on a Blockchain\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:59:34+00:00\",\"description\":\"Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA\",\"width\":3840,\"height\":2160},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working with User Profiles on a Blockchain\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Working with User Profiles on a Blockchain","description":"Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/","og_locale":"en_US","og_type":"article","og_title":"Working with User Profiles on a Blockchain","og_description":"Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:59:34+00:00","og_image":[{"width":3840,"height":2160,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/"},"author":{"name":"","@id":""},"headline":"Working with User Profiles on a Blockchain","datePublished":"2022-03-23T22:59:34+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/","name":"Working with User Profiles on a Blockchain","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA","datePublished":"2022-03-23T22:59:34+00:00","description":"Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA","width":3840,"height":2160},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/working-with-user-profiles-on-a-blockchain\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Working with User Profiles on a Blockchain"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925586\/Web_Assets\/blog\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4\/d1692fcea425d28476ccc2a5e9d3136119b74235-3840x2160-1_2804112ae4.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28040"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28040\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28041"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}