How to Build a Crowdfunding Dapp with React, Solidity, and Tailwind (series)
Tags: blockchain, react, solidity, tailwindcss
Published: 2023-03-22 17:46:22


<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/1*faJfNwSKCU8bX7Tz-eapLg.png" data-image-id="1*faJfNwSKCU8bX7Tz-eapLg.png" data-width="2880" data-height="1414" /></figure>
<p class="graf graf--p">Crowdfunding has become a popular way for entrepreneurs to raise funds for their projects without resorting to traditional financing methods.</p>
<p class="graf graf--p">With the rise of blockchain technology, crowdfunding can now be done through decentralized applications (dapps) built on the Ethereum network.</p>
<p class="graf graf--p">This article will guide you through building a crowdfunding dapp with React, Solidity, and Tailwind.</p>

<h3 class="graf graf--h3">Prerequisites</h3>
<p class="graf graf--p">Before we dive into the process, you need to have the following tools installed on your system:</p>

<ul class="postList">
 	<li class="graf graf--li">Node.js and npm (or yarn)</li>
 	<li class="graf graf--li">Git</li>
 	<li class="graf graf--li">Vscode</li>
</ul>
<h3 class="graf graf--h3">Step 1: Clone the Starter Kit Repo</h3>
<p class="graf graf--p">The first step is to clone the Tailwind Ethereum starter kit repository. You can do this by running the following command in your terminal:</p>

<pre class="graf graf--pre graf--preV2" spellcheck="false" data-code-block-mode="1" data-code-block-lang="bash"><span class="pre--content">git <span class="hljs-built_in">clone</span> https://github.com/Scofield-Idehen/tailwind_ethers_starter_kit.git</span></pre>
<p class="graf graf--p">Add Genesis.json File</p>
<p class="graf graf--p">The next step is to add the <strong class="markup--strong markup--p-strong">Genesis.json</strong> file to the cloned repository. This file contains the configuration for the Ethereum network you will be using.</p>
<p class="graf graf--p">You can get the <strong class="markup--strong markup--p-strong">Genesis.json</strong> file from this repository: <a class="markup--anchor markup--p-anchor" href="https://github.com/Scofield-Idehen/genesis" target="_blank" rel="noreferrer nofollow noopener" data-href="https://github.com/Scofield-Idehen/genesis">https://github.com/Scofield-Idehen/genesis</a>. Download the file and place it in the root directory of your cloned repository.</p>

<h3 class="graf graf--h3">Install Dependencies</h3>
<p class="graf graf--p">After adding the <strong class="markup--strong markup--p-strong">Genesis.json</strong> file, navigate to the cloned repository’s directory in your terminal and run the following command:</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">yarn install</code></p>
<p class="graf graf--p">This command installs all the necessary dependencies required to run the project.</p>

<h3 class="graf graf--h3">Start the Project</h3>
<p class="graf graf--p">To start the project, run the following command:</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">yarn start</code></p>
<p class="graf graf--p">This command starts the project in your default browser.</p>

<h3 class="graf graf--h3">Create the Header Component</h3>
<p class="graf graf--p">We will start by creating the header component for our dapp. Create a new folder called <strong class="markup--strong markup--p-strong">components</strong> in the <strong class="markup--strong markup--p-strong">src</strong> folder. Inside the <strong class="markup--strong markup--p-strong">components</strong> folder, create a new file called <strong class="markup--strong markup--p-strong">Header.jsx</strong>. Add the following code to the file:</p>

<pre class="graf graf--pre graf--preV2" spellcheck="false" data-code-block-mode="1" data-code-block-lang="javascript"><span class="pre--content">
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TbBusinessplan</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-icons/tb'</span>

<span class="hljs-keyword">const</span> <span class="hljs-title function_">Header</span> = () =&gt; {
  <span class="hljs-keyword">return</span> (
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">header</span> 
        <span class="hljs-attr">className</span>=<span class="hljs-string">"flex justify-between items-center p-5 bg-white text-gray-500 hover:text-gray-700 
        shadow-lg fixed top-0 right-0 left-0
        "</span>&gt;</span>

            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span> <span class="hljs-attr">className</span>=<span class="hljs-string">' flex justify-start items-center text-xl text-black space-x-1'</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">TbBusinessplan</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>
                    Scofield
                <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
               
            <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'button'</span>
                <span class="hljs-attr">className</span>=<span class="hljs-string">' inline-block px-6 py-2.5 bg-green-500 text-white font-medium text-xs leading-tight uppercase
                rounded-full showdow-md hover:bg-green-600 '</span>
                &gt;</span>
                    Connect Wallet
                <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            
    <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span></span>

  )
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">Header</span></span></pre>
<p class="graf graf--p">The <strong class="markup--strong markup--p-strong">Header</strong> component contains a header element with a logo and a button for connecting a wallet. We also used the Tailwind CSS library to style the header.</p>

<h3 class="graf graf--h3">Add the Header Component to App.jsx</h3>
<p class="graf graf--p">After creating the <strong class="markup--strong markup--p-strong">Header</strong> component, the next step is to add it to the <strong class="markup--strong markup--p-strong">App.jsx</strong> file. Open the <strong class="markup--strong markup--p-strong">App.jsx</strong> file and add the following code:</p>

<pre class="graf graf--pre graf--preV2" spellcheck="false" data-code-block-mode="1" data-code-block-lang="javascript"><span class="pre--content">
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Header</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"./components/Header"</span>

<span class="hljs-keyword">const</span> <span class="hljs-title function_">App</span> = () =&gt; {
  <span class="hljs-keyword">return</span> (
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"min-h-screen"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">Header</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  )
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">App</span></span></pre>
<p class="graf graf--p">This code imports the <strong class="markup--strong markup--p-strong">Header</strong> component and renders it in the <strong class="markup--strong markup--p-strong">App</strong> component.</p>
<p class="graf graf--p">Finally, if this is done properly, you should have something like this.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*8UQquLR0Gdt3n1tp.png" data-image-id="0*8UQquLR0Gdt3n1tp.png" data-width="2600" data-height="1277" /></figure>
<p class="graf graf--p">In our next session, I will show how to create a new session for crowdfunders to fund projects.</p>

<h3 class="graf graf--h3">Resource</h3>
<ul class="postList">
 	<li class="graf graf--li"><a class="markup--anchor markup--li-anchor" href="https://github.com/Daltonic/genesis" target="_blank" rel="noopener" data-href="https://github.com/Daltonic/genesis">Datonic </a></li>
 	<li class="graf graf--li"><a class="markup--anchor markup--li-anchor" href="http://blog.learnhub.africa" target="_blank" rel="noopener" data-href="http://blog.learnhub.africa">LearnHub</a></li>
</ul>