<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Edwin Anajemba</title>
    <description>The latest articles on Forem by Edwin Anajemba (@isommie).</description>
    <link>https://forem.com/isommie</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F665206%2F7da42bc8-fa78-4693-87ce-6cc139240932.jpg</url>
      <title>Forem: Edwin Anajemba</title>
      <link>https://forem.com/isommie</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/isommie"/>
    <language>en</language>
    <item>
      <title>Using Thirdweb and Hardhat to create and deploy a dApp on the Goerli testnet.</title>
      <dc:creator>Edwin Anajemba</dc:creator>
      <pubDate>Fri, 13 Jan 2023 09:10:31 +0000</pubDate>
      <link>https://forem.com/isommie/using-thirdweb-and-hardhat-to-create-and-deploy-a-dapp-on-the-goerli-testnet-2hh0</link>
      <guid>https://forem.com/isommie/using-thirdweb-and-hardhat-to-create-and-deploy-a-dapp-on-the-goerli-testnet-2hh0</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Technologies&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Thirdweb: A tool for creating, deploying, and managing dApps on the Ethereum blockchain&lt;/li&gt;
&lt;li&gt;Hardhat: A development environment for Ethereum smart contract development&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Steps&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;First, we need to create a new contract using Thirdweb. Run this command in your terminal: &lt;strong&gt;&lt;code&gt;npx thirdweb@latest create --contract&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Next, we need to install the dotenv package to manage our environment variables. Run this command: &lt;strong&gt;&lt;code&gt;npm install dotenv&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;We will also need to get our private key from MetaMask and the endpoint from &lt;strong&gt;&lt;a href="https://www.ankr.com/rpc/eth/eth_goerli/"&gt;https://www.ankr.com/rpc/eth/eth_goerli/&lt;/a&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;In the hardhat.config.js file, add the following code to connect to the Goerli testnet and use your private key:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;defaultNetwork&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;goerli&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="nx"&gt;networks&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nl"&gt;hardhat&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt;
&lt;span class="nx"&gt;goerli&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nl"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;[https://rpc.ankr.com/eth_goerli](https://rpc.ankr.com/eth_goerli)&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="nx"&gt;accounts&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="nx"&gt;x$&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt; &lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PRIVATE_KEY&lt;/span&gt;&lt;span class="p"&gt;}]&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Now we can deploy our contract by running the command &lt;strong&gt;&lt;code&gt;npm run deploy&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Once the deployment is successful, you will see a link to deploy your contracts on Thirdweb. Open the link and follow the instructions to deploy your contract.&lt;/li&gt;
&lt;li&gt;For the client-side of the application, we will create a new app using Thirdweb. Run this command: &lt;strong&gt;&lt;code&gt;npx thirdweb@latest create --app&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Select the app name, EVM, and JavaScript as the preferred stack.&lt;/li&gt;
&lt;li&gt;Now we will install React Router DOM and check our build so far by running &lt;strong&gt;&lt;code&gt;npm install react-router-dom&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;npm run dev&lt;/code&gt;&lt;/strong&gt; respectively.&lt;/li&gt;
&lt;li&gt;Next, delete the src folder and create a new one. Inside the new src folder, create an index.js file and an App.js file.&lt;/li&gt;
&lt;li&gt;Use the React functional component file (RAFCE) snippet to create the App component.&lt;/li&gt;
&lt;li&gt;Convert the index.js file to main.jsx and App.js to App.jsx&lt;/li&gt;
&lt;li&gt;To add styling, we will install and configure Tailwind CSS with Vite. Run these commands:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;install&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;D&lt;/span&gt; &lt;span class="nx"&gt;tailwindcss&lt;/span&gt; &lt;span class="nx"&gt;postcss&lt;/span&gt; &lt;span class="nx"&gt;autoprefixer&lt;/span&gt;
&lt;span class="nx"&gt;npx&lt;/span&gt; &lt;span class="nx"&gt;tailwindcss&lt;/span&gt; &lt;span class="nx"&gt;init&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;In the tailwind.config.cjs file, add the desired theme, and extend the font family and box shadow.&lt;/li&gt;
&lt;li&gt;In the postcss.config.js file, add the tailwindcss and autoprefixer plugins.&lt;/li&gt;
&lt;li&gt;In the index.css file, import the tailwindcss base, components, and utilities.&lt;/li&gt;
&lt;li&gt;Finally, run &lt;strong&gt;&lt;code&gt;npm run dev&lt;/code&gt;&lt;/strong&gt; in the terminal and your dApp should be up and running.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's it! You have successfully created and deployed a dApp using Thirdweb and Hardhat. With this setup, you can easily create, deploy and test your dApps on the Goerli testnet. Remember that this is just a basic setup and can be further customized to suit your specific needs. Happy coding!&lt;/p&gt;

</description>
      <category>thirdweb</category>
      <category>hardhat</category>
      <category>goerli</category>
      <category>web3</category>
    </item>
    <item>
      <title>Understanding File Structure for Backend API development using NodeJS, Express, and PostgreSQL</title>
      <dc:creator>Edwin Anajemba</dc:creator>
      <pubDate>Thu, 12 Jan 2023 22:44:53 +0000</pubDate>
      <link>https://forem.com/isommie/understanding-file-structure-for-backend-api-development-using-nodejs-express-and-postgresql-4ifh</link>
      <guid>https://forem.com/isommie/understanding-file-structure-for-backend-api-development-using-nodejs-express-and-postgresql-4ifh</guid>
      <description>&lt;p&gt;Backend API development is an essential part of building modern web and mobile applications. In this article, we will be discussing the file structure for backend API development using Express and PostgreSQL. We will also provide a sample file structure to help you understand how to organize your code effectively.&lt;/p&gt;

&lt;p&gt;Express is a popular web framework for Node.js that allows developers to easily create and manage web servers and handle HTTP requests. PostgreSQL is an open-source, object-relational database management system (ORDBMS) that is commonly used with Express to store and retrieve data.&lt;/p&gt;

&lt;p&gt;When building a backend API using Express and PostgreSQL, it's important to organize your code in a logical and easy-to-understand way. One way to do this is by separating your code into different layers: the routing layer, the controller layer, and the model layer.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The routing layer is responsible for handling HTTP requests and directing them to the appropriate controllers. This layer contains all the routes for your API and is usually defined in a single file called "routes.js".&lt;/li&gt;
&lt;li&gt;The controller layer is responsible for handling the logic of your API. This layer contains the controllers that handle the requests from the routing layer and interact with the model layer. Each controller is usually defined in its own file and is organized into a "controllers" directory.&lt;/li&gt;
&lt;li&gt;The model layer is responsible for interacting with the database. This layer contains the models that define the data structure and perform the database operations. Each model is usually defined in its own file and is organized into a "models" directory.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here's an example of a sample file structure that follows this organization:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;root&lt;/span&gt;
    &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;controllers&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
    &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;models&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;posts&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
    &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;routes&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
    &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;
        &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;database&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
    &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
    &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="kr"&gt;package&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the "controllers" directory contains the controllers for "users" and "posts", the "models" directory contains the models for "users" and "posts", the "routes" directory contains the routing file "api.js", the "config" directory contains the file "database.js" which have the configuration for connecting to PostgreSQL, and the "app.js" file is the entry point of the application where all the dependencies are imported and the server is started. The "package.json" file contains all the dependencies and scripts needed to run the application.&lt;/p&gt;

&lt;p&gt;It is important to note that this is just a sample file structure and it may vary depending on the specific requirements and complexity of the project. Additionally, as the project grows, it is a good practice to keep adding more layers and directories to make the code more modular, maintainable, and scalable.&lt;/p&gt;

&lt;p&gt;In summary, a well-organized file structure is crucial for effective backend API development using Express and PostgreSQL. By dividing your code into different layers such as routing, controller, and model, you can increase the modularity, maintainability, and scalability of your code. The sample file structure outlined in this article serves as a guide but can be tailored to meet the unique needs of your project.&lt;/p&gt;

</description>
      <category>api</category>
      <category>database</category>
      <category>webdev</category>
      <category>node</category>
    </item>
    <item>
      <title>How To Build a dApp in Three Steps</title>
      <dc:creator>Edwin Anajemba</dc:creator>
      <pubDate>Thu, 12 Jan 2023 22:25:42 +0000</pubDate>
      <link>https://forem.com/isommie/how-to-build-a-dapp-in-three-steps-203f</link>
      <guid>https://forem.com/isommie/how-to-build-a-dapp-in-three-steps-203f</guid>
      <description>&lt;p&gt;Decentralized applications, or Dapps, are a new way of creating software that utilizes blockchain technology to provide a more secure and transparent environment for users. Building a dApp can seem daunting, but it can be broken down into three simple steps: creating the smart contract, deploying the smart contract, and creating the frontend application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Requirements
&lt;/h2&gt;

&lt;p&gt;Please ensure you have the following installed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://nodejs.org/"&gt;NodeJS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://metamask.io/"&gt;MetaMask&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Step One: Creating the Smart Contract&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The first step in building a dApp is creating a smart contract. A smart contract is a self-executing contract that contains the rules and regulations of dApp. It is written in a programming language that is compatible with the blockchain platform being used. For example, if building on the Ethereum blockchain, the smart contract will be written in Solidity.&lt;/p&gt;

&lt;p&gt;When writing the smart contract, it's important to consider the functionality and security of the dApp. The smart contract should be tested and reviewed by a team of developers to ensure that it is secure and free of errors.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;pragma&lt;/span&gt; &lt;span class="nx"&gt;solidity&lt;/span&gt; &lt;span class="o"&gt;^&lt;/span&gt;&lt;span class="mf"&gt;0.8&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;contract&lt;/span&gt; &lt;span class="nx"&gt;MyDapp&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

&lt;span class="nx"&gt;uint256&lt;/span&gt; &lt;span class="kr"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;incrementCounter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kr"&gt;public&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;getCounter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kr"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;view&lt;/span&gt; &lt;span class="nx"&gt;returns&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;uint256&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is a simple example of a smart contract written in Solidity. It has two functions, "incrementCounter" and "getCounter", which allow users to increment and retrieve the value of a counter variable.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Step Two: Deploying the Smart Contract&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Once the smart contract is written, it needs to be deployed to the blockchain. This is done using a development framework such as Truffle. The smart contract is compiled and then deployed to the blockchain using the "truffle migrate" command. This command will deploy the smart contract to the blockchain, making it accessible to users.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MyDapp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;artifacts&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;MyDapp&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;deployer&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;deployer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;deploy&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;MyDapp&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is an example of a Truffle migration file that is used to deploy the "MyDapp" smart contract to the blockchain. It uses the "artifacts.require" function to import the compiled contract and the "deployer.deploy" function to deploy it to the blockchain.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Step Three: Creating the Frontend Application&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The final step in building a dApp is creating the frontend application. The frontend application is the user interface of the dApp and allows users to interact with the smart contract. It can be built using JavaScript, HTML, and CSS. The frontend communicates with the smart contract through a web3.js library, which allows developers to interact with the blockchain.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;!&lt;/span&gt;&lt;span class="na"&gt;DOCTYPE&lt;/span&gt; &lt;span class="na"&gt;html&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;html&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;head&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;My DApp&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;head&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;body&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;My DApp&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Counter: &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;span&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"counter"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;span&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"increment-button"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Increment Counter&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt; &lt;span class="na"&gt;src&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"[https://cdn.jsdelivr.net/npm/web3@](https://cdn.jsdelivr.net/npm/web3@)1.2.9/dist/web3.min.js"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
// Connect to the blockchain network
if (typeof web3 !== 'undefined') &lt;span class="si"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;web3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Web3&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;web3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;currentProvider&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="si"&gt;}&lt;/span&gt; else &lt;span class="si"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// set the provider you want from Web3.providers&lt;/span&gt;
&lt;span class="nx"&gt;web3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Web3&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Web3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;providers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;HttpProvider&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;**[http://localhost:8545](http://localhost:8545/)**&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
// Set the address of the deployed smart contract
const contractAddress = '0x...';
const contract = new web3.eth.Contract(contractABI, contractAddress);
// Update the counter value on the page
contract.methods.getCounter().call().then(function(counter) &lt;span class="si"&gt;{&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#counter&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="si"&gt;}&lt;/span&gt;);
// Add event listener to the increment button
document.querySelector('#increment-button').addEventListener('click', function() &lt;span class="si"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;contract&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;methods&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;incrementCounter&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="na"&gt;from&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;web3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;eth&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defaultAccount&lt;/span&gt;&lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;contract&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;methods&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getCounter&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;call&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#counter&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="si"&gt;}&lt;/span&gt;);
});
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;body&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;html&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is an example of a simple HTML, CSS, and JavaScript frontend application that interacts with the deployed smart contract. It uses web3.js library to connect to the blockchain network and the address of the deployed contract. It also has a button that when pressed, it will call the "incrementCounter" function of the smart contract, and updates the counter value displayed on the page.&lt;/p&gt;

&lt;p&gt;To summarize, building a dApp involves creating a smart contract, deploying it to the blockchain, and creating a frontend application. It's a process that requires knowledge of blockchain technology, smart contract programming and web development. With the right team and tools, it is possible to create a robust, secure, and user-friendly dApp that can change the way we interact with the internet.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>blockchain</category>
      <category>web3</category>
    </item>
    <item>
      <title>Non-Blockchain Dapps</title>
      <dc:creator>Edwin Anajemba</dc:creator>
      <pubDate>Thu, 12 Jan 2023 20:45:43 +0000</pubDate>
      <link>https://forem.com/isommie/non-blockchain-dapps-86p</link>
      <guid>https://forem.com/isommie/non-blockchain-dapps-86p</guid>
      <description>&lt;p&gt;Decentralized applications (dapps) are software programs that run on a decentralized network, rather than a single central server. While most dapps are built on blockchain technology, there are also non-blockchain dapps that use other types of decentralized systems to function.&lt;/p&gt;

&lt;p&gt;One example of a non-blockchain dapp is a distributed file storage platform like IPFS (InterPlanetary File System). IPFS uses a peer-to-peer network to store and share files, rather than relying on a centralized server. This allows for more robust and secure file storage, as well as faster file transfer speeds.&lt;/p&gt;

&lt;p&gt;Another type of non-blockchain dapp is a decentralized social media platform like Mastodon. Mastodon is an open-source, federated platform that allows users to create their own social media networks. These networks can then be connected to one another, creating a decentralized social media ecosystem. Mastodon uses a peer-to-peer network rather than a centralized server, which provides users with more control over their data and greater privacy.&lt;/p&gt;

&lt;p&gt;There are also non-blockchain dapps using distributed ledger technology (DLT) other than blockchain. For example, Hashgraph is a DLT that uses a directed acyclic graph (DAG) structure rather than a blockchain. This allows for faster and more efficient transactions and can be used in a variety of dapps such as supply chain management and voting systems.&lt;/p&gt;

&lt;p&gt;A non-blockchain dapp that utilizes distributed hash table (DHT) is another type of dapp. DHT is a decentralized system for storing and retrieving data in a peer-to-peer network. This technology can be used for a variety of applications such as peer-to-peer file sharing and distributed databases.&lt;/p&gt;

&lt;p&gt;Non-blockchain dapps also have their own set of advantages and disadvantages. For example, non-blockchain dapps can be faster and more efficient than blockchain dapps, but they also may not be as secure or as decentralized. Additionally, non-blockchain dapps may be more challenging to develop and maintain, as they require specialized knowledge and expertise.&lt;/p&gt;

&lt;p&gt;In conclusion, non-blockchain dapps are an important part of the decentralized web ecosystem. They provide alternative solutions for decentralized file storage, social media, and other applications, and can be faster and more efficient than blockchain dapps. However, they also come with their own set of challenges and limitations. As the technology and the ecosystem continue to evolve, it will be interesting to see how non-blockchain dapps will change and adapt to meet users' needs.&lt;/p&gt;

</description>
      <category>cloudsecurity</category>
      <category>security</category>
      <category>cloud</category>
      <category>career</category>
    </item>
    <item>
      <title>The Problem with Web3 Is… Dapps?</title>
      <dc:creator>Edwin Anajemba</dc:creator>
      <pubDate>Thu, 12 Jan 2023 20:06:56 +0000</pubDate>
      <link>https://forem.com/isommie/the-problem-with-web3-is-dapps-5bpk</link>
      <guid>https://forem.com/isommie/the-problem-with-web3-is-dapps-5bpk</guid>
      <description>&lt;p&gt;Web3, also known as the decentralized web, is a concept that aims to create a more decentralized and open internet. One of the key components of web3 is the use of decentralized applications, or dapps, which are built on blockchain technology.&lt;/p&gt;

&lt;p&gt;Dapps, or decentralized applications, are one of the key components of web3 and have the potential to revolutionize the way we use the internet. Unlike traditional apps, dapps are built on blockchain technology, which allows them to be decentralized and open to anyone. This means that dapps can provide users with more control over their data and greater transparency in how their information is used.&lt;/p&gt;

&lt;p&gt;While dapps have the potential to revolutionize the way we use the internet, they also come with a number of problems. One of the biggest issues is the lack of user adoption. Despite the hype around dapps, most people have never heard of them or have no idea how to use them.&lt;/p&gt;

&lt;p&gt;Another technical challenge is the complexity of building and deploying dapps. Unlike traditional web development, dapp development requires a deep understanding of blockchain technology and smart contract programming. This can make it difficult for developers to create and maintain dapps, which can slow down the development of the ecosystem. However, with the emergence of new development frameworks and toolkits, this is becoming less of a problem.&lt;/p&gt;

&lt;p&gt;Security is also a major concern with dapps. Because they are built on blockchain technology, dapps are decentralized and therefore vulnerable to attacks. Hackers can target dapps and steal users' personal information or money, which can be devastating for both the users and the developers.&lt;/p&gt;

&lt;p&gt;Finally, there is the issue of regulation. Dapps are built on blockchain technology, which is decentralized and therefore difficult to regulate. This means that there is a lack of oversight and protection for users, which can lead to fraud and other criminal activities.&lt;/p&gt;

&lt;p&gt;In conclusion, while dapps have the potential to revolutionize the way we use the internet, they are also facing a number of challenges. User adoption, scalability, security, and regulation are all major issues that need to be addressed before dapps can become mainstream.&lt;/p&gt;

</description>
      <category>microsoft</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
