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

Amazing

Thanks for this project. Would be amazing when you finished all. Example logout, search and etc.

Thank you. this is awesome!

Thanks😍🙏

great, thanks

Perfect, thank u

love your work Thank you!

I appreciate your effort for going through all these hoops for us!

Greatly appreciated Adrian :)

Thank you!

Awesome! deeply appreciated

thanks

where can I find the solidity smart contract? (sorry if my question looks a little bit stupid ^^)

thanks

@annejungers go to web3 folder navigate to contracts folder inside the folder you will find CrouwFunding.sol file that is it.
i hope this help

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

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