This is a Vite+React WEB3.0 Application using Tailwindcss for PandaCoin using Ethereum Blockchain Network & writing Solidity Smart Contracts and integrating it with Metamask Extension to transfer SepoliaETH globally.
git clone https://github.com/mounishvatti/pandacoinweb3.git
cd pandacoinweb3/client
npm install
Use the npm command:
npm i react-icons
npm install --save ethers
cd pandacoinweb3/smart_contract
npm init
install Hardhat
npm install --save-dev hardhat
If not then download from the link provided below
This project was made using Vite
Follow the link to understand the procedure for working with vite
npm create vite@latest
yarn create vite
pnpm create vite
vue
react
vanilla
etc.
TypeScript
TypeScript + swc
JavaScript
JavaScript + swc
- Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Create a postcss.config.js
in your root directory if it doesn’t exist already. This is where you will configure plugins
- Add tailwindcss and autoprefixer to your postcss.config.js file, or wherever PostCSS is configured in your project.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
- Add the paths to all of your template files in your
tailwind.config.js
file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
- Add the
@tailwind
directives for each of Tailwind’s layers to your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
npm run start
Use the npm command:
npm i react-icons
npm install --save ethers
npm init
npm install --save-dev hardhat
$ npx hardhat init
888 888 888 888 888
888 888 888 888 888
888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888
👷 Welcome to Hardhat v2.19.0 👷
? What do you want to do? …
❯ Create a JavaScript project
Create a TypeScript project
Create an empty hardhat.config.js
Quit
Make sure you checkout the @nomiclabs/hardhat-waffle
as we'll be using it in this project.
Video Lecture by JS Mastery
Build and Deploy a Modern Web 3.0 Blockchain App | Solidity, Smart Contracts, Crypto
by @adrianhajdin