Overview
Akuntabel (akʊnˈtabəl) is a web3 goal accountability application built on Ethereum. It allows users to create personal goals, set stakes, invite judges, and track progress through milestones. The app leverages blockchain technology to ensure transparency and immutability in goal-setting and achievement processes.
Features
- Goal Creation: Users can create new goals with descriptions, stakes, and invite judges for approval.
- Milestone Tracking: Goals can be broken down into milestones, which users mark 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: Seamless interaction with Ethereum blockchain for transactions and smart contract interactions.
- Responsive UI: A user-friendly interface that adapts to different screen sizes.
- Wallet Connection: Easy wallet connection using RainbowKit for a smooth Web3 experience.
Tech Stack
- React & Next.js: For building a performant frontend with server-side rendering capabilities.
- TypeScript: Ensuring type safety and improving developer experience.
- Solidity: For writing smart contracts that manage goals, stakes, and approvals on the Ethereum blockchain.
- Hardhat: Ethereum development environment for compiling, deploying, and testing smart contracts.
- Tailwind CSS & DaisyUI: For rapid UI development with a consistent design system.
- RainbowKit: Providing an easy-to-use wallet connection interface.
- Wagmi & Viem: For seamless Ethereum interactions and state management in the frontend.
Smart Contract Architecture
The Akuntabel smart contract is built with the following key 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: Displays user's goals and provides quick access to create new goals.
- Goal Creation Form: Allows users to input goal details, set stakes, and invite judges.
- Goal Details Page: Shows comprehensive information about a specific goal, including milestones and approval status.
- Milestone Tracking: Enables users to mark milestones as completed and tracks overall progress.
Lessons Learned
Developing Akuntabel provided valuable insights into:
- Web3 UX Design: Creating a user-friendly interface for blockchain interactions.
- Smart Contract Security: Implementing secure patterns for handling user funds and permissions.
- State Management in Web3: Efficiently managing and updating blockchain state in the frontend.
- Ethereum Integration: Seamlessly connecting frontend applications with Ethereum smart contracts.
- Responsive Design: Building a mobile-friendly interface for Web3 applications.
Screenshots
