Build and Deploy a Web3 Crowdfunding Platform (Kickstarter) As Your First Blockchain Application

constants

import { createCampaign, dashboard, logout, payment, profile, withdraw } from '../assets';

export const navlinks = [
  {
    name: 'dashboard',
    imgUrl: dashboard,
    link: '/',
  },
  {
    name: 'campaign',
    imgUrl: createCampaign,
    link: '/create-campaign',
  },
  {
    name: 'payment',
    imgUrl: payment,
    link: '/',
    disabled: true,
  },
  {
    name: 'withdraw',
    imgUrl: withdraw,
    link: '/',
    disabled: true,
  },
  {
    name: 'profile',
    imgUrl: profile,
    link: '/profile',
  },
  {
    name: 'logout',
    imgUrl: logout,
    link: '/',
    disabled: true,
  },
];

index.css

@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

.linear-gradient {
  background: linear-gradient(
    179.14deg,
    rgba(32, 18, 63, 0) -7.14%,
    #000000 87.01%
  );
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.8);
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        epilogue: ['Epilogue', 'sans-serif'],
      },
      boxShadow: {
        secondary: '10px 10px 20px rgba(2, 2, 2, 0.25)',
      },
    },
  },
  plugins: [],
}

utils

export const daysLeft = (deadline) => {
  const difference = new Date(deadline).getTime() - Date.now();
  const remainingDays = difference / (1000 * 3600 * 24);

  return remainingDays.toFixed(0);
};

export const calculateBarPercentage = (goal, raisedAmount) => {
  const percentage = Math.round((raisedAmount * 100) / goal);

  return percentage;
};

export const checkIfImage = (url, callback) => {
  const img = new Image();
  img.src = url;

  if (img.complete) callback(true);

  img.onload = () => callback(true);
  img.onerror = () => callback(false);
};

Great guide on building a Web3 crowdfunding platform! For those venturing into crowdfunding app development, integrating blockchain technology can provide enhanced transparency and security, which are crucial for building trust with users. This approach could significantly boost the effectiveness of your platform.

// SPDX-License-Identifier: UNLICENSED
//CrowdFunding.sol file
pragma solidity ^0.8.9;

contract CrowdFunding {
struct Campaign{
address owner;
string title;
string description;
uint256 target;
uint256 deadline;
uint256 amountCollected;
string image;
address[] donators;
uint256[] donations;
}
mapping(uint256 => Campaign ) public campaigns;
uint256 public numberOfCampaigns = 0;

function createCampaign(address _owner, string memory _title, string memory _description, uint256 _target, uint256 _deadline, string memory _image ) public returns (uint256){

// creating a new campaign
Campaign storage campaign = campaigns[numberOfCampaigns];

//is everything okay?
require(campaign.deadline < block.timestamp, "The deadline should be a date in the future.");

campaign.owner = _owner;
campaign.title = _title;
campaign.description = _description;
campaign.target = _target;
campaign.deadline = _deadline;
campaign.amountCollected = 0;
campaign.image = _image;

numberOfCampaigns++;

numberOfCampaigns - 1;

}

function donateToCampaign(uint256 _id) public payable{

uint256 amount = msg.value;

Campaign storage campaign = campaigns[_id];

campaign.donators.push(msg.sender);

campaign.donations.push(amount);

(bool sent, ) = payable(campaign.owner).call{value:amount}("");

if(sent){
    campaign.amountCollected = campaign.amountCollected + amount;

}

}

function getdonators(uint256 _id) view public returns (address[] memory, uint256[] memory){
return (campaigns[_id].donators, campaigns[_id].donations);
}

function getCampaigns() public view returns (Campaign[] memory) {

Campaign[] memory allCampaigns = new Campaign[](numberOfCampaigns);

for (uint i = 0; i < numberOfCampaigns; i++){
    Campaign storage item = campaigns[i];

    allCampaigns[i] = item;

    return allCampaigns;

}

}

}

randomusert

make sure you have installed dotenv as a package in your package.json file e.g npm i dotenv