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

You can see the issue on the terminal

I am facing an issue with deploying my Smart Contract on thirdweb by using command "npx thirdweb deploy".

make sure that the secret key is in .env file

Yes, my secret key is in .env but I did not know how to structure it as the third web is updated.

check thirdweb docs

getting error while changing to sepolia it shows cannot fetch byte code from aaddress , many are facing same issue pls explian

Georli Faucet errored out. Would not take token.

getting error while changing to sepolia it shows cannot fetch byte code from aaddress , many are facing same issue pls explian

I am getting the same error!!

Sorry that Goes litle too far from My experience

my background is not going dark, what could be the problem?

import React from 'react';
import { Route, Routes } from 'react-router-dom';

const App = () => {
return (

Sidebar

<p className="font-xl font-bold">TEST</p>

<div className="flex-1 max-sm: w-full max-w-[1280px] mx-auto sm:pr-5">
 Navbar
</div>

</div>

)
}

export default App

my background is not going dark, what could be the problem?

import React from 'react'; import { Route, Routes } from 'react-router-dom';

const App = () => { return (

Sidebar

<p className="font-xl font-bold">TEST</p>

<div className="flex-1 max-sm: w-full max-w-[1280px] mx-auto sm:pr-5">
 Navbar
</div>

</div>

) }

export default App

Do you have an style for that

I am facing an issue with deploying my Smart Contract on thirdweb by using command "npx thirdweb deploy".

hello can you please send me smart contract source code

I am facing an issue with deploying my Smart Contract on thirdweb by using command "npx thirdweb deploy".

hello can you please send me smart contract source code

Can't do that sorry

my background not going dark what should i do ...i have done everything right until here

i did everything accordingly but still

facing problem

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