Welcome to BlockCity Hub 🚀
This is a complete Web3 dApp built during the BlockCity Workshop.
It connects to 4 Smart Contracts deployed on Sepolia Testnet:
- 🏛 City Foundation (Base Contract)
- 💰 Treasury (ERC-20 Token)
- 🪪 Identity (NFT Badges)
- 🗳 Council (On-chain Voting / DAO)
BLOCKCITY/
│
├── index.html
│
├── assets/
│ ├── css/
│ │ └── styles.css
│ │
│ └── js/
│ ├── app.js
│ │
│ ├── config/
│ │ └── contracts.js
│ │
│ ├── core/
│ │ ├── connect.js
│ │ ├── helpers.js
│ │ ├── loader.js
│ │ └── state.js
│ │
│ └── rooms/
│ ├── room1.foundation.js
│ ├── room2.treasury.js
│ ├── room3.identity.js
│ └── room4.council.js
Download: https://code.visualstudio.com/
In VS Code:
- Go to Extensions
- Search for Live Server
- Install it
Download: https://metamask.io/
- Create a wallet
- Save your Secret Recovery Phrase safely
In MetaMask:
- Click Network dropdown
- Enable "Show test networks"
- Select Sepolia
Use a faucet:
Paste your wallet address and request ETH.
You need Sepolia ETH to:
- Mint tokens
- Create proposals
- Vote
- Mint NFTs
Open the BLOCKCITY folder in VS Code.
Right-click index.html.
Click "Open with Live Server"
Do NOT open with file://
Modules require a local server.
Open:
assets/js/config/contracts.js
Replace:
0xYOUR_ROOM1_ADDRESS_HERE
0xYOUR_ROOM2_ADDRESS_HERE
0xYOUR_ROOM3_ADDRESS_HERE
0xYOUR_ROOM4_ADDRESS_HERE
With your actual deployed contract addresses from Remix.
This project uses modular structure:
Contains contract addresses and ABIs.
Contains:
- Wallet connection
- Global state
- Shared helper functions
- Data loader
Each smart contract has its own JS file.
Room files contain:
- Read functions
- Write functions
- UI interaction logic
Main entry file that connects everything together.
- View platform name
- Update city name
- Mint tokens
- Reward users
- View balance
- Mint badge NFT
- Lookup owner
- View metadata URI
- Create proposal
- Vote YES / NO
- Check results
- Execute proposal
Make sure:
- You are using Live Server
- styles.css exists in
assets/css/ - No red errors in DevTools console (F12)
Make sure:
- MetaMask extension installed
- Using Chrome or Brave
- MetaMask unlocked
Get more Sepolia ETH from faucet.
Make sure:
- You pasted correct contract addresses
- Contracts are deployed on Sepolia
- MetaMask is connected to Sepolia
- Add a new function in Solidity (Remix)
- Recompile
- Copy updated ABI
- Paste ABI into contracts.js
- Add new function in corresponding room file
- Add button in HTML
No other changes required.
You can deploy this to:
Just drag the folder and deploy.
Anyone with MetaMask can use your dApp.
- HTML
- CSS
- JavaScript (ES Modules)
- Ethers.js v6
- MetaMask
- Sepolia Testnet
No frameworks. No backend. Fully client-side Web3 dApp.
By completing this project, you understand:
- How frontend connects to smart contracts
- How to use Ethers.js
- How to structure Web3 projects
- How to deploy dApps
- How DAOs work
- How NFTs work
- How ERC-20 tokens work
This is not just a workshop demo.
This is real Web3 architecture.
You can expand this into:
- A marketplace
- A DAO governance system
- A token economy
- A student certificate system
- A voting app
- A startup MVP
Build boldly 🚀
---
# ✅ What This README Covers
✔ Folder structure
✔ Beginner setup
✔ MetaMask setup
✔ Sepolia faucet
✔ Live Server instructions
✔ Common errors
✔ Deployment
✔ Architecture explanation
✔ Expansion guide