Drafts & Propositions - Web3 DApp

A decentralized voting application built on Ethereum. Create drafts, vote with yeas/nays, and when a draft reaches 5 yeas, it automatically becomes a proposition on-chain.

Features

• Fully decentralized - all data stored on-chain
• MetaMask wallet integration
• Create drafts that live on the blockchain
• Vote with yeas/nays (one vote per address)
• Automatic proposition creation at 5 yeas
• Only authors can delete their own content
• Real-time updates via event listeners

Architecture

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   React App     │────▶│    ethers.js     │────▶│  Smart Contract │
│   (Frontend)    │◀────│    (Web3)        │◀────│   (Blockchain)  │
└─────────────────┘     └──────────────────┘     └─────────────────┘
         │                                                │
         │                                                │
         ▼                                                ▼
   ┌───────────┐                                  ┌──────────────┐
   │  MetaMask │                                  │   Ethereum   │
   │  Wallet   │                                  │   Network    │
   └───────────┘                                  └──────────────┘

Project Structure

post-pin-app/
├── blockchain/
│   ├── contracts/
│   │   └── DraftsAndPropositions.sol
│   ├── scripts/
│   │   └── deploy.js
│   ├── deployments/
│   │   └── [network].json
│   ├── hardhat.config.js
│   ├── package.json
│   └── .env.example
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── CreateDraftForm.jsx
│   │   │   ├── DraftCard.jsx
│   │   │   ├── PropCard.jsx
│   │   │   ├── WalletButton.jsx
│   │   │   └── Toast.jsx
│   │   ├── contracts/
│   │   │   └── DraftsAndPropositions.json (auto-generated)
│   │   ├── Web3Context.jsx
│   │   ├── hooks.js
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── backend/ (optional - legacy)
└── README.md

Quick Start

Prerequisites

• Node.js 18+
• MetaMask browser extension
• Test ETH (for testnets)

1. Setup Blockchain

cd blockchain

# Install dependencies
npm install

# Create environment file
cp .env.example .env
# Edit .env with your private key (for deployment only)

# Start local blockchain
npm run node

2. Deploy Contract (new terminal)

cd blockchain

# Deploy to local network
npm run deploy:local

# OR deploy to Sepolia testnet
npm run deploy:sepolia

# OR deploy to Polygon Amoy testnet
npm run deploy:amoy

This will:

• Deploy the contract
• Save deployment info to deployments/[network].json
• Copy ABI to frontend/src/contracts/

3. Setup Frontend

cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

4. Connect MetaMask

1. Open MetaMask
2. For local development: Add network with RPC URL http://127.0.0.1:8545 and Chain ID 31337
3. Import a test account using private key from Hardhat node output
4. Connect to the app

Smart Contract

Functions

Function	Description
createDraft(content)	Create a new draft
yeaDraft(draftId)	Vote yea on a draft
nayDraft(draftId)	Vote nay on a draft
deleteDraft(draftId)	Delete your draft
yeaProp(propId)	Vote yea on a proposition
nayProp(propId)	Vote nay on a proposition
deleteProp(propId)	Delete your proposition

Events

Event	Description
DraftCreated	Emitted when a draft is created
DraftVoted	Emitted when someone votes on a draft
DraftPromoted	Emitted when a draft becomes a proposition
PropositionCreated	Emitted when a proposition is created
PropositionVoted	Emitted when someone votes on a proposition

Business Logic

1. Drafts start with 0 yeas and 0 nays
2. Each address can only vote once per draft/proposition
3. When a draft reaches 5 yeas, it automatically becomes a Proposition
4. Propositions start with 5 yeas
5. Only the author can delete their drafts/propositions

Supported Networks

Network	Chain ID	Currency
Localhost	31337	ETH
Sepolia Testnet	11155111	SepoliaETH
Polygon Amoy	80002	MATIC

Environment Variables

Blockchain (.env)

PRIVATE_KEY=your_private_key_for_deployment
SEPOLIA_RPC_URL=https://eth-sepolia.g.alchemy.com/v2/your-key
POLYGON_AMOY_RPC_URL=https://rpc-amoy.polygon.technology
ETHERSCAN_API_KEY=your_etherscan_key

Gas Costs (Estimates)

Action	Gas
Create Draft	~150,000
Vote on Draft	~50,000
Vote on Proposition	~50,000
Delete Draft	~30,000

Development Scripts

Blockchain

npm run compile   # Compile contracts
npm run test      # Run tests
npm run node      # Start local blockchain
npm run deploy:local   # Deploy to localhost
npm run deploy:sepolia # Deploy to Sepolia

Frontend

npm run dev      # Start dev server
npm run build    # Production build
npm run preview  # Preview production

Security Considerations

• Private keys should never be committed to version control
• The contract uses simple access control (author-only delete)
• One vote per address is enforced on-chain
• Consider adding additional security features for production

Contributing

1. Fork the repository
2. Create a feature branch
3. Write tests for new features
4. Submit a pull request

License

MIT License