NTU x Base Web 3 Hackathon - Finalist
Track habits, set goals, achieve together.
Achiev3r is a comprehensive habit tracking and goal achievement app built on Base with MiniKit integration. It combines daily habit tracking, goal setting with optional staking, community engagement, and blockchain-based achievements.
- Daily Log Section:
- Food intake tracking
- Exercise duration and type
- Sleep hours
- Energy level slider (1-10)
- Charts & Summary:
- Energy vs Time of Day visualization
- Food categories per week breakdown
- Save & Track: On-chain logging capabilities
- Step 1: Define Goal
- Category selection (Fitness, Study, Sleep, Wellness, Nutrition, Productivity)
- Description and timeline
- Start/end dates
- Step 2: Visibility
- Private or public community sharing
- Step 3: Optional Staking
- USDC stake amount input
- Base Pay integration for transactions
- Step 4: Confirmation
- Goal summary review
- Community publication
- Shared goals showcase
- User avatars and basenames
- Progress bars and status indicators
- Support and participation features
- Filter by status (All, Ongoing, Achieved, Failed)
- Timeline view with milestones
- Progress check-ins and evidence submission
- On-chain progress updates
- Community feed integration
- Trophy and badge visuals
- Prize claiming (stake + profit withdrawal)
- NFT badge minting via OnchainKit
- Farcaster social sharing via MiniKit
- Achievement statistics and motivation
- Frontend: Next.js 15, React 18, TypeScript
- Styling: Tailwind CSS with custom theme
- Blockchain: Base network integration
- Authentication: MiniKit (Farcaster) + OnchainKit (Wallet)
- Data Management: React Query + Upstash Redis
- State Management: React hooks + local state
@coinbase/onchainkit- Wallet connections and blockchain interactions@farcaster/frame-sdk- Farcaster integration@tanstack/react-query- Data fetching and cachingviem+wagmi- Ethereum interactions@upstash/redis- Data persistence
app/
├── components/
│ ├── LandingScreen.tsx # Home screen with main actions
│ ├── Dashboard.tsx # Daily habit tracking
│ ├── GoalCreation.tsx # Multi-step goal creation
│ ├── CommunityFeed.tsx # Community goals showcase
│ ├── GoalProgress.tsx # Progress tracking & milestones
│ ├── AchievementScreen.tsx # Goal completion celebration
│ └── DemoComponents.tsx # Reusable UI components
├── page.tsx # Main app with screen routing
├── layout.tsx # App layout and metadata
└── providers.tsx # MiniKit provider setup
- Node.js 18+
- Yarn or npm
- Base network wallet (for staking features)
-
Clone the repository
git clone <repository-url> cd achiev3r
-
Install dependencies
yarn install # or npm install -
Environment Setup Create a
.env.localfile with:NEXT_PUBLIC_ONCHAINKIT_API_KEY=your_api_key NEXT_PUBLIC_URL=your_app_url NEXT_PUBLIC_APP_HERO_IMAGE=your_hero_image_url NEXT_PUBLIC_SPLASH_IMAGE=your_splash_image_url NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR=#ffffff NEXT_PUBLIC_ICON_URL=your_icon_url
-
Run the development server
yarn dev # or npm run dev -
Open your browser Navigate to http://localhost:3000
The app is configured to work with MiniKit for Farcaster integration and OnchainKit for wallet connections. Ensure your API keys and configuration are properly set in the environment variables.
The app is configured to work on Base network. For production, ensure you have the correct RPC endpoints and contract addresses configured.
- Start Tracking: Begin with daily habit logging
- Set Goals: Create personal or community goals
- Track Progress: Update milestones and evidence
- Achieve & Celebrate: Complete goals and claim rewards
- Community Engagement: Support and participate in shared goals
- All components are fully typed with TypeScript
- Modular architecture for easy feature additions
- Mock data included for demonstration
- TODO comments indicate blockchain integration points