EduKit | create-edu-dapp

A starter-kit featuring React & NextJS and Vue & NuxtJS, designed for building dApps, and for developing, deploying, testing, and verifying Solidity smart contracts on the Open Campus L3 (EduChain). The starter kit comes pre-configured with six example dApps and includes essential tools and libraries such as create-next-app, Hardhat, Foundry, TypeScript, Tailwind CSS, shadcn-ui, web3.js, Open Campus ID, and more.

EduKit | create-edu-dapp

🎉 Achievements

• 1k+ NPM Downloads

• Appreciated by the Open Campus Team on X

• View the feedback from the developers and community

  

  

  

  

  

  

  

  

  

  

  

  

🚀 Quick Start

Choose your preferred implementation:

• React and NextJS with Hardhat or Foundry
• Vue and NuxtJS with Hardhat or Foundry

📦 Installation

Open up your terminal (or command prompt) and type the following command:

npx create-edu-dapp <your-dapp-name>

# Select Hardhat or Foundry Option

# cd into the directory
cd <your-dapp-name>

Note: If you have used the npx command then you don't have to install manually in any directory.

Hardhat Setup

📜 Smart Contracts

All smart contracts are located inside the backend aka hardhat folder, which can be found in the root directory. To get started, first install the necessary dependencies by running:

# change directory into the backend folder
cd backend

npm install

🔑 Private Key

Ensure you create a .env file in the backend directory. Then paste your Metamask private key in .env with the variable name ACCOUNT_PRIVATE_KEY as follows:

ACCOUNT_PRIVATE_KEY=0x734...

⚙️ Compile

Now, you can write your contracts in ./contracts/ directory, replace Greeter.sol with <your-contracts>.sol file.

# For compiling the smart contracts
npx hardhat compile

After successful compilation, the artifacts directory will be created in ./src with a JSON /contracts/<your-contracts>.sol/<your-contracts>.json containing ABI and Bytecode of your compiled smart contracts.

🧪 Test

To write tests, go to ./test directory and create <your-contracts>.ts, you can test your smart contracts using the following command.

# For testing the smart contracts
npx hardhat test

⛓️ Deploy

Before deploying the smart contracts, ensure that you have added the Open Campus Codex to your MetaMask wallet and that it has sufficient funds. If you do not have testnet $EDU on Open Campus Codex, please follow this faucets guide.

Also, make changes in ./scripts/deploy.ts (replace the greeter contract name with <your-contract-name>).

For deploying the smart contracts to open campus codex network, type the following command:

# For deploying the smart contracts
npx hardhat run scripts/deploy.ts --network educhain-testnet

<your-contract> deployed to: 0x...

Copy and paste the generated contract JSON ABI folder contracts inside the backend/src/contracts directory to the /frontend/ directory.

Copy and paste the deployed contract address in the frontend page directory. For example, if the deployed contract is Greeter.sol, then you have to paste the address in frontend/app/(dapps)/simple-greeting-dapp/page.tsx.

✅ Verify

To verify the deployed smart contract on Open Campus Codex, execute the following command:

# For verifying the smart contracts
npx hardhat verify --network educhain-testnet <deployed-contract-address>

Foundry Setup

📜 Smart Contracts

All smart contracts are located inside the backend aka foundry folder, which can be found in the root directory.

# change directory into the backend folder
cd backend

🔑 Private Key

Ensure you create a .env file in the backend directory. Then paste your Metamask private key in .env with the variable name ACCOUNT_PRIVATE_KEY as follows:

ACCOUNT_PRIVATE_KEY=0x734...

⚙️ Compile

Now, you can write your contracts in ./src/ directory, replace Greeter.sol with <your-contracts>.sol file.

# For compiling the smart contracts
forge compile

After successful compilation, the artifacts directory will be created in ./out with a JSON /<your-contract>/<your-contracts>.json containing ABI and Bytecode of your compiled smart contracts.

🧪 Test

To write tests, go to ./test directory and create <your-contracts>.t.sol, you can test your smart contracts using the following command.

# For testing the smart contracts
forge test

⛓️ Deploy

Before deploying the smart contracts, ensure that you have added the Open Campus Codex to your MetaMask wallet and that it has sufficient funds. If you do not have testnet $EDU on Open Campus Codex, please follow this faucets guide.

Also, make changes in ./script/DeployGreeter.s.sol (replace the deploy greeter contract name with <your-contract-name>).

For deploying the smart contracts to open campus codex network, type the following command:

# For deploying the smart contracts
forge script script/DeployGreeter.s.sol --broadcast --rpc-url https://rpc.open-campus-codex.gelato.digital/ --gas-limit 30000000 --with-gas-price 5gwei --skip-simulation

<your-contract> deployed to: 0x...

Copy and paste the generated contract JSON ABI folder Greeter.sol inside the backend/out/ directory to the /frontend/contracts/ directory.

Copy and paste the deployed contract address in the frontend page directory. For example, if the deployed contract is Greeter.sol, then you have to paste the address in frontend/app/(dapps)/simple-greeting-dapp/page.tsx.

✅ Verify

To verify the deployed smart contract on Open Campus Codex, execute the following command:

# For verifying the smart contracts
forge verify-contract \
  --rpc-url https://rpc.open-campus-codex.gelato.digital \
  --verifier blockscout \
  --verifier-url 'https://edu-chain-testnet.blockscout.com/api/' \
  <deployed-contract-address> \
  [contractFile]:[contractName]

Next.js Client

Start the Next.js app by running the following command in the frontend directory:

# Change directory into the frontend folder 
cd frontend

# Start the development server
npm run dev

(/) create-edu-dapp Before Auth	(state update) create-edu-dapp After Auth
(/user) connect-with-ocid Before Auth	(state update) connect-with-ocid After Auth

➡️ Contributing

We welcome contributions from the community! If you'd like to contribute, please follow the guidelines in our CONTRIBUTING.md file.

⚖️ License

create-edu-dapp is licensed under the MIT License.

⭐️ Support the Project

If you enjoy using EduKit, please show your support by starring the repository and follow EduHub on X for the latest updates and insights.