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);
};

// 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