Development Architecture
1. System Architecture and Technology Stack
The platform is built as a three-tier monorepo, architected for high security and multi-tenant scalability. It decouples administrative election creation from member-facing interaction, supported by a dedicated secure backend service.
| Component | Technology | Version / Detail |
| Framework | React | 18.2.0 |
| Language | TypeScript | 5.2.2 |
| Build Tool | Vite | 5.0.8 |
| Package Manager | Yarn | Required for environment parity |
| Environment | Node.js | v16+ |
| Blockchain SDK | Vocdoni SDK | 0.9.1 (Strictly locked) |
| DAO Governance | Aragon OSx | Token Voting v1.2 |
| Core Dependencies | ethers | 5.7.2 |
| UI Library | Chakra UI | 2.8.2 |
Architect’s Note on Versioning: Vocdoni SDK version 0.9.1 is an absolute requirement. This specific version resolved critical Vite bundling issues that caused instability in earlier browser builds. All production clients must utilize the EnvOptions.PROD configuration.
——————————————————————————–
2. Secure Metadata and Storage Strategy
The architecture employs a hybrid storage strategy to balance the immutability of the blockchain with the performance requirements of large datasets.
Three-Tier Storage Locations
- Vocdoni Blockchain (Primary Storage): Stores core immutable metadata, such as organization name and election parameters. This ensures the “truth” of the election remains tamper-proof.
- IPFS/Pinata (Supplementary Data): Handles high-volume data categorized into three streams: Census Storage (voter lists), Discussion Storage (member comments), and Amendment Storage (detailed change requests).
- Local Memory/State: Manages runtime-specific data, including real-time UI updates, user-specific eligibility, and temporary vote status.
Secure Pinata Integration
Architect’s Note: The architecture eliminates key vulnerabilities by shielding all IPFS operations:
- Backend Shielding: All Pinata API keys are stored exclusively as server-side environment variables on the
pinata-backend. - API Decoupling: The frontend never communicates with Pinata directly. It calls secure backend endpoints (e.g.,
/api/store-census) which handles the pinning. - CORS Enforcement: The backend strictly enforces Cross-Origin Resource Sharing, limiting access only to authorized customer subdomains.
3. Aragon DAO integration (Optional)
- Metadata Formatting: To ensure “perfect visibility” within the Aragon OSx App dashboard, the bridge utilizes CID v1 and Flat JSON formatting.
- Audit Trail: The payload includes the full deliberative history, vote counts, amendment text, and the original Vocdoni Election ID for cryptographic auditability on Polygon.
4. Maintenance and Troubleshooting
- Problem: “Execution Failed: Proposal must pass.”
- Solution: Verify the Vocdoni election period has ended and at least one vote was cast. The bridge will not execute a null or active result.
- Problem: “CORS Errors” on new customer subdomains.
- Solution: Ensure the domain (including
https://) is in the HerokuALLOWED_ORIGINSvar and the Heroku app has been restarted.
- Solution: Ensure the domain (including
- Problem: “No Aragon DAO found.”
- Solution: Check
customer-config.tsto ensure thearagonDaoAddressis not null and matches the correct network ID.
- Solution: Check
- Problem: “Domain Not Working” / DNS Issues.
- Solution: Verify CNAME records in GoDaddy match the Vercel-provided values exactly. Use a DNS checker to confirm propagation.
- Problem: “Chair Account Not Working.”
- Solution: Verify the wallet address in
customer-config.ts. Remember: addresses are case-sensitive in some SDK contexts.
- Solution: Verify the wallet address in
- Problem: “Stuck/Pending MetaMask Transaction.”
- Solution: The Polygon network often requires higher gas. Use the “Speed Up” feature to set gas prices to 80-100 Gwei.
——————————————————————————–
5. Production Deployment Checklist
- [ ] All Vocdoni SDK clients set to
EnvOptions.PROD. - [ ] API keys removed from frontend and confirmed in
pinata-backendenvironment. - [ ]
ALLOWED_ORIGINSin Heroku updated withhttps://prefix for all new domains. - [ ] Heroku app restarted after configuration updates.
- [ ] Chair wallet funded with native POL on Polygon Mainnet.
- [ ] Vercel deployment branch set to
production-main. - [ ] Aragon Token Voting plugin permissions (
CREATE_PROPOSAL_PERMISSION) granted to Chair wallet. - [ ] Metadata verified as CID v1 in Pinata test run.
- [ ] HTTPS protocol verified for all API communication.
6. Scalability and Decentralized Indexing
To support 100+ customers without the bottleneck of a central database, RRD uses a decentralized indexing strategy via Pinata Metadata Tags.
The Discovery Workflow:
- Tagging: During pinning, the backend attaches key-value tags:
organizationName,electionId, andtype. - Querying: The frontend calls
/api/find-organization-proposals/:organizationName. - Filtering: The backend queries the Pinata API using the
metadata[keyvalues]filter, returning all pins associated with that organization. - Resolution: The app extracts the election IDs from the tags and fetches the final “truth” directly from the Vocdoni blockchain.