How to Create a Decentralized Job Board using Solidity, NextJS, and Netlify

In this blog, we’ll walk through the steps to build a decentralized job board using Solidity for the smart contract, Next.js for the frontend, and Netlify for deployment. This project is perfect for developers looking to dive into Web3 and create decentralized applications (dApps).

Live Demo

Check out the live demo here: Web3 Job Board

Introduction

A decentralized job board is a platform where job postings are stored on the blockchain, ensuring transparency, immutability, and no centralized control. This project will teach you how to:

• Set up a Next.js app.
• Write and deploy a Solidity smart contract.
• Connect your frontend to the blockchain.
• Deploy your app to Netlify.

Table of Contents

1. Next.js Setup
2. GitHub Setup
3. Deploy to Netlify
4. Smart Contract Development
5. Frontend Development

1. Next.js Setup

Prerequisites

• Node.js (version 12.22.0 or later).
• Yarn (recommended for package management).

Steps

1. Check your Node.js version:

   node -v

   If you don’t have Node.js installed, download it from nodejs.org.

2. Install Yarn globally:

   npm install -g yarn

3. Create a new Next.js app:

   yarn create next-app YOUR_APP_NAME

4. Start your app locally:

   yarn run dev

   Your app should now be running at http://localhost:3000.

2. GitHub Setup

GitHub is a platform for hosting and managing your code. Here’s how to upload your project:

1. Create a GitHub account at github.com.

2. Initialize a Git repository in your project folder:

   git init

3. Add your files to the repository:

   git add .

4. Commit your changes:

   git commit -m "Initial commit"

5. Rename the default branch to main:

   git branch -M main

6. Connect your local repository to GitHub:

   git remote add origin YOUR_GITHUB_REPOSITORY_LINK

7. Push your code to GitHub:

   git push -u origin main

If you’re asked for a password, use a GitHub Personal Access Token. You can create one here.

3. Deploy to Netlify

Netlify is a platform for deploying web applications. Here’s how to deploy your app:

1. Create a Netlify account at netlify.com.

2. Click on Add new site and select Import an existing project.

3. Connect your GitHub account and choose your repository.

4. Click Deploy site.

Your app will now be live on Netlify!

4. Smart Contract Development

Smart contracts are programs that run on the blockchain. For this project, we’ll create a job board smart contract using Solidity.

Steps

1. Open Remix IDE, a browser-based Solidity editor.

2. Create a new file called JobBoard.sol.

3. Write the following code:

   // SPDX-License-Identifier: GPL-3.0
   pragma solidity >=0.7.0 <0.9.0;
   import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol";
   
   contract JobBoard is Ownable {
       uint256 public JOB_ID = 0; // Primary key
       address ADMIN = msg.sender;
   
       struct Job {
           uint256 jobId;
           string companyName;
           string position;
           string description;
           string employmentType;
           string location;
           string companyWebsiteUrl;
           address employer;
       }
   
       Job[] public jobs;
       mapping (address=>address[]) public applicants;
   
       function addJob(
           string memory _companyName,
           string memory _position,
           string memory _description,
           string memory employmentType,
           string memory _location,
           string memory _companyWebsiteUrl
       ) public payable {
           require(msg.value == 5 * 10**15 );
           Job memory job = Job({
               jobId: JOB_ID,
               companyName: _companyName,
               position: _position,
               description: _description,
               employmentType: employmentType,
               location: _location,
               companyWebsiteUrl: _companyWebsiteUrl,
               employer: msg.sender
           });
           jobs.push(job);
           JOB_ID++;
       }
   
       function allJobs() public view returns(Job[] memory) {
           return jobs;
       }
   
       function deleteJob(uint256 _jobId) public {
           require(
               msg.sender == jobs[_jobId].employer || msg.sender == ADMIN
           );
           if(_jobId >= jobs.length) return;
           for (uint i = _jobId; i<jobs.length-1; i++){
               jobs[i] = jobs[i+1];
               jobs[i].jobId = i;
           }
           delete jobs[jobs.length-1];
           JOB_ID--;
       }
   
       function applyForJob(uint256 _jobid) public {
           applicants[jobs[_jobid].employer].push(msg.sender);
       }
   
       function admin() public view returns(address) {
           return ADMIN;
       }
   
       function withdraw(address payable _adminAddress) public onlyOwner{
           _adminAddress.transfer(address(this).balance);
       }
   
       function totalJobs() public view returns(uint256){
           return jobs.length;
       }
   }

4. Deploy the contract to the Rinkeby Testnet using MetaMask.

5. Save the contract address and ABI for later use.

5. Frontend Development

Install Required Packages

Run the following command to install dependencies:

yarn add react-icons react-toastify dotenv ethers

Code Structure

• utils.js: Utility functions for interacting with MetaMask.
• index.js: Main page to display job listings.
• InputForm.js: Component for posting new jobs.

Connect Frontend to Smart Contract

1. Create an .env.local file and add your contract address:

   NEXT_PUBLIC_JOBBOARD_ADDRESS=YOUR_SMART_CONTRACT_ADDRESS

2. Copy the ABI from Remix and save it as jobBoard.json.

3. Use the ethers.js library to interact with your smart contract.

Conclusion

If you found this guide helpful, let me know! If you have any feedback, I’d love to hear it so I can improve.

Happy coding! 🚀