Live App: https://focus-farm.vercel.app
FocusFarm is a gamified productivity web app where users earn coins by maintaining attention during webcam-based focus sessions. Users can spend coins to build a pixelated animal farm with animals, houses, and decorations. Over time, the farm grows as a visual representation of productivity and focus.
The goal of FocusFarm is to transform traditional focus timers into an engaging and rewarding experience by combining attention detection with a pixel-style farm game.
Requirements: Node.js 18+
# Install dependencies
npm install
# Start development server
npm run devThen open http://localhost:3000 in your browser.
Production build:
npm run build
npm startNo environment variables are required for the MVP. All data is stored in browser localStorage.
See .env.example for optional future Supabase configuration.
The app is deployed on Vercel with automatic deployments on every push to main.
To deploy your own instance:
- Fork this repo
- Go to vercel.com → New Project → Import your fork
- Vercel auto-detects Next.js — click Deploy
- Every push to
mainwill trigger a new production deployment automatically
CI runs on every PR via GitHub Actions (.github/workflows/ci.yml) — linting and build must pass before merging.
- Webcam-based attention detection
- Focus session timer
- Coin reward system
- Pixel farm homepage
- Shop system to purchase animals and items
- Persistent farm progress
- More animals and decorations
- Farm upgrades
- Streak rewards
- Animations
- Leaderboard
- Sound effects
Open FocusFarm
→ Start Focus Session
→ Webcam detects attention
→ Earn coins
→ Buy animals / farm items
→ Farm grows visually
Frontend
- React / Next.js
AI / Computer Vision
- MediaPipe or TensorFlow.js
Storage
- LocalStorage (MVP)
Optional
- Supabase / Firebase
Developer: Murphy Wei
Project Owner: Joyce Zhou
Development Fee: 30 GIX Bucks
This project will be developed in three major phases with structured progress check-ins.
- Project setup and architecture
- Eye tracking open-source model setup
- Project initialized and running locally
- Tech stack finalized (React / Next.js + CV library)
- Folder structure created
- Base homepage scaffold created
- Webcam access successfully enabled
- Open-source eye/face detection model integrated
- Basic attention detection signal working (focused vs not focused)
- Initial Architecture Pull Request
- Webcam detection demo
- Basic attention detection working
- ✅ App runs locally
- ✅ Webcam detection initializes
- ✅ Face detection returns usable signal
- Focus detection application
- Farm homepage UI
- Reward system
- Focus session start/stop functionality
- Timer working during focus session
- Attention detection connected to focus timer
- Coin reward logic implemented
- Farm homepage UI built
- Coin balance displayed
- Focus session completion feedback
- Working focus session demo
- Coins awarded after session
- Farm homepage UI visible
- User can start focus session
- Timer runs correctly
- Coins awarded after focus session
- Farm homepage displays coin balance
- Farm rendering
- Shop system
- Persistence
- Shop UI implemented
- Purchasable farm items added
- Purchase logic implemented
- Coins deducted after purchase
- Purchased items render on farm
- Farm progress saved locally
- End-to-end workflow working
Full MVP Demo:
Open app
→ Start focus session
→ Earn coins
→ Buy animal
→ Farm grows
→ Refresh page
→ Progress persists
- Shop system works
- Farm updates after purchase
- Data persists after refresh
- MVP demo ready
- Project Setup + Architecture
- Eye Tracking Open Source Model Set Up
- Focus Detection Application
- Farm Homepage UI
- Reward System
- Farm Rendering
- Shop
- Persistence