How to Build a Crowdfunding Dapp with React, Solidity, and Tailwind (series)

Crowdfunding has become a popular way for entrepreneurs to raise funds for their projects without resorting to traditional financing methods.

With the rise of blockchain technology, crowdfunding can now be done through decentralized applications (dapps) built on the Ethereum network.

This article will guide you through building a crowdfunding dapp with React, Solidity, and Tailwind.

Prerequisites

Before we dive into the process, you need to have the following tools installed on your system:

• Node.js and npm (or yarn)

• Git

• Vscode

Step 1: Clone the Starter Kit Repo

The first step is to clone the Tailwind Ethereum starter kit repository. You can do this by running the following command in your terminal:

git clone https://github.com/Scofield-Idehen/tailwind_ethers_starter_kit.git

Add Genesis.json File

The next step is to add the Genesis.json file to the cloned repository. This file contains the configuration for the Ethereum network you will be using.

You can get the Genesis.json file from this repository: https://github.com/Scofield-Idehen/genesis. Download the file and place it in the root directory of your cloned repository.

Install Dependencies

After adding the Genesis.json file, navigate to the cloned repository’s directory in your terminal and run the following command:

yarn install

This command installs all the necessary dependencies required to run the project.

Start the Project

To start the project, run the following command:

yarn start

This command starts the project in your default browser.

Create the Header Component

We will start by creating the header component for our dapp. Create a new folder called components in the src folder. Inside the components folder, create a new file called Header.jsx. Add the following code to the file:

import { TbBusinessplan } from 'react-icons/tb'

const Header = () => {
  return (
    <header 
        className="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
        ">

            <a href='#' className=' flex justify-start items-center text-xl text-black space-x-1'>
                <TbBusinessplan />
                <span>
                    Scofield
                </span>

            </a>
            <div>
                <button type='button'
                className=' 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 '
                >
                    Connect Wallet
                </button>
            </div>

    </header>

  )
}

export default Header

The Header 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.

Add the Header Component to App.jsx

After creating the Header component, the next step is to add it to the App.jsx file. Open the App.jsx file and add the following code:

import Header from "./components/Header"

const App = () => {
  return (
    <div className="min-h-screen">
      <Header />
    </div>
  )
}

export default App

This code imports the Header component and renders it in the App component.

Finally, if this is done properly, you should have something like this.

In our next session, I will show how to create a new session for crowdfunders to fund projects.

Resource

• Datonic

• LearnHub