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.
Top comments (0)