A mobile app that helps users visualize the monetary cost of time spent scrolling on distracting apps.

Scroll-Cost helps users understand the true value of their time by converting scrolling minutes into monetary value based on their hourly wage. By making this cost explicit, the app encourages mindful usage and promotes better digital well-being.

• Monetary Visualization: Convert scrolling time to monetary value based on hourly wage
• Real-time Tracking: See the cost of your scrolling as it happens
• Usage Analytics: Review daily, weekly, and monthly usage patterns
• Budget Setting: Set time or cost-based daily budgets
• Gentle Nudges: Receive notifications when you exceed your budget
• Cloud Sync: Securely sync your data across devices
• Usage Insights: Get personalized insights about your scrolling habits
• Privacy-focused: Control what data is shared and synced

The app follows a layered architecture:

1. UI Layer

   • Screens & Components
   • Navigation
   • Common UI Elements

2. Business Logic Layer

   • Services for core functionality
   • Custom Hooks for UI logic
   • Context Providers for state management

3. Data Layer

   • Storage Services for local persistence
   • Android Native Modules for usage tracking
   • Supabase API for cloud synchronization

The backend uses Supabase for:

1. Authentication

   • Email/password authentication
   • Magic link authentication
   • Token management

2. Database

   • PostgreSQL with RLS (Row Level Security)
   • Well-defined schema with proper indexes
   • Real-time subscription capabilities

3. Edge Functions

   • Data synchronization
   • Push notifications
   • Scheduled tasks
   • User insights generation

4. Storage

   • For future features (e.g., backup/restore)

• Framework: React Native with Expo
• State Management: React Context API
• Storage: Expo SecureStore, AsyncStorage
• Navigation: React Navigation
• Charts: React Native Chart Kit
• Notifications: Expo Notifications
• Android Usage Tracking: Custom Native Module
• Network & Connectivity: Expo Network

• Database: PostgreSQL (via Supabase)
• Authentication: Supabase Auth
• API: Supabase RESTful API
• Serverless Functions: Supabase Edge Functions
• Storage: Supabase Storage
• Scheduled Jobs: Supabase Cron Jobs

scroll-cost/
├── .github/                # GitHub workflows and configurations
├── assets/                 # App icons and images
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── analytics/      # Data visualization components
│   │   ├── common/         # Shared UI elements
│   │   ├── dashboard/      # Dashboard-specific components
│   │   ├── onboarding/     # Onboarding flow components
│   │   └── settings/       # Settings-related components
│   ├── config/             # App configuration 
│   ├── contexts/           # React Context providers
│   ├── hooks/              # Custom React hooks
│   ├── navigation/         # Navigation configuration
│   ├── screens/            # App screens
│   │   ├── auth/           # Authentication screens
│   │   └── ...             # Other screen categories
│   ├── services/           # Business logic services
│   │   ├── supabase/       # Supabase integration
│   │   └── ...             # Other services
│   ├── types/              # TypeScript type definitions
│   └── utils/              # Utility functions
├── supabase/               # Supabase configuration
│   ├── functions/          # Edge Functions
│   └── migrations/         # Database migrations
└── android/                # Android-specific native code

• Node.js
• Expo CLI (npm install -g expo-cli)
• Supabase CLI (for backend development)
• Android Studio (for Android development)
• Xcode (for iOS development)

1. Clone the repository:

   git clone https://github.com/jkatigb/scroll-cost.git
   cd scroll-cost

2. Install dependencies:

   npm install

3. Copy the environment template and add your values:

   cp .env.example .env

4. Start the development server:

   npm start

1. Create a new Supabase project

2. Apply migrations:

   supabase db push

3. Deploy edge functions:

   supabase functions deploy

4. Set up scheduled jobs:

   supabase functions schedule create --cron "0 9 * * *" --function-name daily-summary
   supabase functions schedule create --cron "0 3 * * *" --function-name usage-insights

# Configure your build
eas build:configure

# Build for Android
eas build --platform android --profile production

# Build for iOS
eas build --platform ios --profile production

# Submit to stores
eas submit --platform all --profile production

• Android: Uses the UsageStatsManager API through a custom native module
• iOS: Implements manual tracking with a user-friendly interface due to iOS limitations

The app uses a simple formula to calculate the cost of scrolling:

sessionCost = (hourlyWage / 60) * sessionDurationMinutes

The app uses a hybrid approach:

• Local storage for offline access and privacy
• Optional cloud synchronization for cross-device usage
• Conflict resolution with "last write wins" strategy

• Threshold alerts when budget is approaching
• Daily summaries of usage
• Personalized insights
• Budget exceeded warnings

The app integrates with Supabase for:

1. User Authentication

   • Email/password login
   • Magic link authentication
   • Password reset flow

2. Data Synchronization

   • Bidirectional sync of usage data
   • Real-time updates (when online)
   • Offline support with local storage

3. Edge Functions

   • sync-user-data: Handles multi-entity synchronization
   • send-notifications: Manages push notification delivery
   • daily-summary: Sends daily usage summaries
   • usage-insights: Generates personalized user insights

Contributions are welcome! Please read our Contributing Guidelines for details.

This project is licensed under the MIT License.

• Inspired by the concept of "attention economy"
• Built with React Native and Expo
• Backend powered by Supabase