FocoQuest

A gamified productivity app where users upload iPhone Screen Time screenshots daily to track and improve their app usage habits. Users earn points based on their app usage patterns, maintain streaks, compete on leaderboards, and unlock emojis with coins.

Features

• 🔐 Email/password authentication with Supabase
• 📸 Daily screenshot upload (mandatory once per day)
• 🤖 OpenAI-powered image analysis (GPT-4o)
• 🏆 Scoring system (0-10000 points) based on app usage patterns
• 🔥 Streak tracking (consecutive daily uploads)
• 📊 Weekly points graph visualization
• 🏅 Leaderboards (Overall, Weekly, Today)
• 🪙 Coins system (earned as 10% of points, rounded up)
• 🛍️ Emoji Store (purchase emojis with coins)
• ✨ Custom emojis displayed in leaderboard
• 🌙 Dark mode with purple-to-blue gradient theme

Getting Started

1. Install Dependencies

npm install

2. Set Up Supabase

1. Create a Supabase project at supabase.com
2. Run the migration scripts in order:
   • Go to SQL Editor in your Supabase dashboard
   • Run migrations/001_initial_schema.sql (creates users and submissions tables)
   • Run migrations/003_add_coins_and_emoji.sql (adds coins and selected_emoji columns)
   • Run migrations/004_add_user_emojis_table.sql (creates user_emojis table for owned emojis)

See migrations/README.md for detailed migration instructions.

Note: Images are sent directly to OpenAI for analysis and are not stored, so no storage bucket is needed.

3. Set Up Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
OPENAI_API_KEY=your_openai_api_key
NEXT_PUBLIC_SITE_URL=http://localhost:3000

4. Run the Development Server

npm run dev

Open http://localhost:3000 with your browser.

Pages

• Landing Page (/) - Welcome page with app information and navigation to sign in/sign up
• Sign In (/auth/signin) - User authentication
• Sign Up (/auth/signup) - Create new account
• Dashboard (/dashboard) - Main app interface with three tabs:
  • Me: Personal stats (points, coins, streak, today's score), weekly points graph
  • Leaderboard: Rankings (Overall, Weekly, Today) with user emojis
  • Store: Purchase emojis with coins, select/unselect owned emojis

Tech Stack

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• Supabase (Database & Authentication)
• OpenAI API (Image Analysis)
• React 18

How It Works

1. Daily Upload: Users must upload a screenshot of their iPhone Screen Time screen once per day
2. AI Analysis: OpenAI GPT-4o analyzes the screenshot to:
   • Categorize apps as "good", "bad", or "neutral"
   • Calculate a score (0-10000) based on:
     • Reduced usage of "bad" apps (social media, entertainment, etc.)
     • Overall reduced screen time
     • Balanced usage patterns
3. Scoring & Rewards:
   • Points (0-10000): Added to total points
   • Coins: Earned as 10% of points (rounded up), used to purchase emojis
   • Streak: Increments if uploaded yesterday, resets to 0 otherwise
4. Leaderboards: Users compete on Overall, Weekly, and Today leaderboards
5. Emoji Store: Users can purchase emojis with coins and select one to display next to their name in leaderboards

Database Schema

See migrations/ directory for all migration scripts.

Tables

• users:

  • id (UUID, primary key)
  • email (TEXT)
  • points (INTEGER) - Total points earned
  • coins (INTEGER) - Currency for purchasing emojis
  • streak (INTEGER) - Consecutive daily uploads
  • last_upload_date (DATE) - Last upload date for streak calculation
  • selected_emoji (TEXT, nullable) - Currently selected emoji for leaderboard
  • created_at, updated_at (TIMESTAMP)

• submissions:

  • id (UUID, primary key)
  • user_id (UUID, foreign key to users)
  • image_url (TEXT) - Empty string (images not stored)
  • score (INTEGER) - Score from 0-10000
  • date (DATE) - Submission date
  • created_at (TIMESTAMP)

• user_emojis:

  • id (UUID, primary key)
  • user_id (UUID, foreign key to users)
  • emoji (TEXT) - Emoji character
  • purchased_at (TIMESTAMP)
  • Unique constraint on (user_id, emoji)

Key Features

• Row Level Security (RLS): Enabled on all tables for data protection
• Automatic User Creation: Trigger creates user profile on signup
• Streak Calculation: Function calculates streak based on consecutive uploads