Overview
Akuntabel (akʊnˈtabəl) is a web3 goal accountability application built on Ethereum. Users can create personal goals, set stakes, invite judges, and track progress through milestones. The app uses blockchain to keep goal-setting transparent and records immutable.
Features
- Goal Creation: Create new goals with descriptions, stakes, and invite judges for approval.
- Milestone Tracking: Break goals into milestones and mark them as achieved.
- Judge Approval: Once all milestones are completed, judges can approve the goal.
- Funds Release: Upon goal completion and approval, staked funds are automatically released to the user.
- Community Accountability: Judges help hold users accountable for achieving their goals.
- Ethereum Integration: Interaction with Ethereum blockchain for transactions and smart contracts.
- Responsive UI: Interface that adapts to different screen sizes.
- Wallet Connection: Wallet connection using RainbowKit.
Tech Stack
- React & Next.js: For the frontend, with server-side rendering.
- TypeScript: For type safety.
- Solidity: For smart contracts that manage goals, stakes, and approvals on Ethereum.
- Hardhat: For compiling, deploying, and testing smart contracts.
- Tailwind CSS & DaisyUI: For styling.
- RainbowKit: For wallet connection.
- Wagmi & Viem: For Ethereum interactions and frontend state management.
Smart Contract Architecture
The Akuntabel smart contract has these main components:
- Goal Struct: Stores goal details including user, description, stake, judges, milestones, and approval status.
- Milestone Tracking: Allows users to mark milestones as achieved and tracks overall goal completion.
- Judge Approval System: Manages the process of judges approving completed goals.
- Funds Management: Handles staking of funds and their release upon goal completion and approval.
Frontend Architecture
The frontend is structured around Next.js pages and React components:
- Home Dashboard: Shows user's goals and provides quick access to create new goals.
- Goal Creation Form: Input for goal details, stakes, and inviting judges.
- Goal Details Page: Shows information about a specific goal, including milestones and approval status.
- Milestone Tracking: Mark milestones as completed and track overall progress.
Lessons Learned
- Web3 UX Design: Building a usable interface for blockchain interactions was harder than expected — wallet connection flows, transaction confirmations, and error states all need careful handling.
- Smart Contract Security: Handling user funds on-chain requires careful attention to access control and edge cases.
- State Management in Web3: Keeping frontend state in sync with on-chain state took extra work, especially around transaction confirmations.
Screenshots
