Sobrixity - Sobriety Tracking & Wellness App

A comprehensive React Native application built with Expo Router for tracking sobriety milestones, managing wellness goals, and supporting recovery journeys. Sobrixity combines beautiful design with powerful features to help users maintain their sobriety and build healthy habits.

🌟 Features

Core Functionality

• Sobriety Tracking: Real-time calculation of days, weeks, months, and years sober
• Daily Check-ins: Morning and evening mood/wellness tracking
• Goal Management: Set, track, and complete personal recovery goals
• Progress Analytics: Visual charts and statistics of your journey
• Wellness Resources: Mindfulness activities, breathing exercises, and motivational content
• Emergency Support: Quick access to crisis hotlines and support contacts

User Experience

• Beautiful UI: Modern design with smooth animations and micro-interactions
• Dark/Light Theme: Automatic theme switching with user preference storage
• Responsive Design: Optimized for all screen sizes and orientations
• Offline Support: Core features work without internet connection
• Secure Authentication: Email/password authentication with Supabase

🛠 Tech Stack

Frontend

• React Native (0.79.4) - Cross-platform mobile development
• Expo (SDK 53) - Development platform and tooling
• Expo Router (5.1.0) - File-based routing system
• TypeScript - Type-safe development
• React Native Reanimated (3.17.4) - High-performance animations
• Lucide React Native - Beautiful icon library

Backend & Database

• Supabase - Backend-as-a-Service with PostgreSQL
• Row Level Security (RLS) - Secure data access
• Real-time subscriptions - Live data updates

UI & Styling

• React Native StyleSheet - Native styling approach
• Linear Gradients - Beautiful gradient backgrounds
• Custom Animations - Smooth micro-interactions
• Particle Background - Dynamic visual effects

Charts & Analytics

• Victory Native - Data visualization and analytics charts

📁 Project Architecture

The project follows a modular, scalable architecture with clear separation of concerns:

sobrixity/
├── app/                                    # Expo Router pages (max 200 lines per file)
│   ├── _layout.tsx                        # Root layout with providers
│   ├── welcome.tsx                        # Welcome/landing page
│   ├── +not-found.tsx                     # 404 page
│   ├── (auth)/                            # Authentication flow
│   │   ├── _layout.tsx                   # Auth layout
│   │   ├── signin.tsx                    # Sign in screen
│   │   ├── signup.tsx                    # Sign up screen
│   │   └── onboarding/                   # Onboarding flow
│   │       ├── index.tsx                 # Main onboarding controller
│   │       └── components/               # Step components
│   │           ├── WelcomeStep.tsx
│   │           ├── SobrietyDateStep.tsx
│   │           ├── AddictionTypeStep.tsx
│   │           ├── CheckInPreferencesStep.tsx
│   │           ├── NotificationSettingsStep.tsx
│   │           ├── FinancialTrackingStep.tsx
│   │           ├── SupportNetworkStep.tsx
│   │           └── CompletionStep.tsx
│   └── (tabs)/                            # Main app tabs
│       ├── _layout.tsx                   # Tab navigation
│       ├── index.tsx                     # Dashboard/Home
│       ├── goals/                        # Goal management
│       │   ├── index.tsx                 # Goals list and main functionality
│       │   └── components/               # Goal-specific components
│       │       ├── GoalCard.tsx
│       │       └── GoalFormModal.tsx
│       ├── progress/                     # Analytics & charts
│       │   └── index.tsx
│       ├── wellness/                     # Wellness resources
│       │   └── index.tsx
│       └── profile/                      # User profile
│           └── index.tsx
├── components/                            # Reusable UI components
│   ├── AnimatedCard.tsx                  # Animated card component
│   ├── CheckInButtons.tsx                # Daily check-in interface
│   ├── HeroCard.tsx                      # Main dashboard card
│   ├── StatsGrid.tsx                     # Statistics display
│   ├── OnboardingProgress.tsx            # Progress indicator
│   ├── common/                           # Common utilities
│   │   └── AccessibilityWrapper.tsx     # Accessibility helper
│   ├── forms/                            # Form components
│   │   └── DatePicker.tsx               # Custom date picker
│   └── particles/                        # Visual effects
│       └── ParticleBackground.tsx       # Animated background
├── services/                             # API and data services
│   ├── supabaseClient.ts                # Supabase client configuration
│   ├── auth.ts                          # Authentication services
│   ├── profiles.ts                      # Profile management
│   ├── goals.ts                         # Goals management
│   ├── checkins.ts                      # Check-ins management
│   ├── financial.ts                     # Financial tracking
│   └── mindfulness.ts                   # Mindfulness sessions
├── contexts/                             # React contexts
│   ├── AuthContext.tsx                  # Authentication state
│   └── ThemeContext.tsx                 # Theme management
├── hooks/                               # Custom hooks
│   └── useFrameworkReady.ts            # Framework initialization
├── types/                               # TypeScript definitions
│   ├── app.ts                          # App-specific types
│   ├── database.ts                     # Database schema types
│   └── onboarding.ts                   # Onboarding types
├── utils/                              # Utility functions
│   └── onboarding.ts                   # Onboarding utilities
├── constants/                          # App constants
│   └── theme.ts                        # Theme definitions
└── assets/                            # Static assets
    └── images/                        # App icons and images

🏗 Architectural Principles

1. Modular File Organization

• Single Responsibility: Each file focuses on one specific functionality
• Size Limits: Files are kept under 200 lines for maintainability
• Clear Separation: Components, services, and utilities are clearly separated

2. Component Architecture

• Atomic Design: Small, reusable components that can be composed
• Feature-Based: Components grouped by functionality (forms, particles, etc.)
• Prop Interfaces: Strong typing for all component props

3. Service Layer

• API Abstraction: All external API calls are abstracted into service functions
• Data Management: Centralized data fetching and caching logic
• Error Handling: Consistent error handling across all services

4. Type Safety

• Database Types: Auto-generated types from Supabase schema
• Component Props: Strongly typed component interfaces
• API Responses: Typed service responses

5. State Management

• Context API: Global state management for auth and theme
• Local State: Component-level state for UI interactions
• Async Storage: Persistent storage for user preferences

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI
• iOS Simulator (for iOS development)
• Android Studio (for Android development)

Installation

1. Clone the repository

   git clone <repository-url>
   cd sobrixity

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Update .env with your Supabase credentials:

   EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
   EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   

4. Start the development server

   npm run dev

Running on Different Platforms

Web Development

npm run dev
# Press 'w' to open in web browser

iOS Simulator (macOS only)

npm run dev
# Press 'i' to open iOS simulator

Android Emulator

npm run dev
# Press 'a' to open Android emulator

Physical Device

1. Install Expo Go app on your device
2. Scan the QR code from the terminal
3. The app will load on your device

🗄 Database Setup

Supabase Configuration

1. Create a Supabase project at supabase.com

2. Run the database migrations (SQL scripts in /supabase/migrations/)

3. Set up Row Level Security policies for data protection

Database Schema

The app uses the following main tables:

• profiles - User profile information
• check_ins - Daily mood and wellness check-ins
• goals - User-defined recovery goals
• financial_tracking - Money saved tracking
• mindfulness_sessions - Wellness activity tracking

🎨 Design System

Color Palette

• Primary: Purple (#8B5CF6) - Main brand color
• Secondary: Cyan (#06B6D4) - Accent color
• Success: Green (#22C55E) - Positive actions
• Warning: Amber (#F59E0B) - Caution states
• Error: Red (#EF4444) - Error states

Typography

• Font Family: Inter (Google Fonts)
• Weights: Regular (400), Medium (500), SemiBold (600), Bold (700)

Spacing System

• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px
• xxl: 48px

🔧 Development Guidelines

File Organization Rules

1. Component Files (max 200 lines)

   • Single component per file
   • Related components grouped in subdirectories
   • Clear, descriptive naming

2. Service Files (max 200 lines)

   • One service per domain (auth, profiles, goals, etc.)
   • Consistent API patterns
   • Proper error handling

3. Page Files (max 200 lines)

   • Main page logic only
   • Complex components extracted to separate files
   • Clean separation of concerns

Code Style

• Use TypeScript for all new code
• Follow React Native best practices
• Use functional components with hooks
• Implement proper error handling
• Write descriptive commit messages

Component Guidelines

• Keep components focused and reusable
• Use proper TypeScript interfaces
• Implement loading and error states
• Follow the established design system

Animation Guidelines

• Use React Native Reanimated for animations
• Keep animations smooth (60fps)
• Provide meaningful feedback to user actions
• Consider accessibility in animations

📱 Platform Considerations

Web Platform

• Primary development platform
• Full feature compatibility
• Responsive design implementation
• Progressive Web App capabilities

Mobile Platforms

• Native performance optimizations
• Platform-specific UI adaptations
• Gesture handling with react-native-gesture-handler
• Proper keyboard handling

🧪 Testing Strategy

File-Level Testing

• Unit tests for utility functions
• Component testing with React Native Testing Library
• Service layer testing for API calls
• Integration tests for critical user flows

Manual Testing

• Cross-platform compatibility testing
• Performance testing on various devices
• Accessibility testing
• User experience validation

📦 Building & Deployment

Web Build

npm run build:web

Mobile Builds

# Development build
npx expo build:android
npx expo build:ios

# Production build
npx expo build:android --release-channel production
npx expo build:ios --release-channel production

Deployment Options

• Web: Netlify, Vercel, or any static hosting
• Mobile: App Store (iOS) and Google Play Store (Android)
• Over-the-air updates: Expo Updates for instant deployments

🔐 Security

Data Protection

• Row Level Security (RLS) on all database tables
• Secure authentication with Supabase Auth
• Environment variables for sensitive data
• Input validation and sanitization

Privacy

• Minimal data collection
• User consent for data usage
• Secure data transmission (HTTPS)
• Regular security audits

🤝 Contributing

Development Workflow

1. Fork the repository
2. Create a feature branch
3. Follow file organization guidelines
4. Keep files under 200 lines
5. Write/update tests
6. Submit a pull request

Code Review Process

• All changes require review
• Automated testing must pass
• File size limits enforced
• Architecture compliance check
• Performance impact assessment

📊 Performance Optimization

File Size Management

• Automatic Refactoring: Files approaching 200 lines are automatically split
• Lazy Loading: Components loaded on demand
• Tree Shaking: Unused code eliminated during build
• Bundle Analysis: Regular monitoring of bundle size

Runtime Performance

• React Native Reanimated: High-performance animations
• Memoization: Prevent unnecessary re-renders
• Image Optimization: Proper image loading and caching
• Memory Management: Efficient state management

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

Getting Help

• Check the documentation first
• Search existing issues on GitHub
• Create a new issue with detailed information
• Join our community Discord server

Emergency Resources

The app includes built-in emergency contacts:

• Crisis Hotline: 988 (National Suicide Prevention Lifeline)
• Substance Abuse Hotline: 1-800-662-4357 (SAMHSA National Helpline)

🙏 Acknowledgments

• Expo Team - Amazing development platform
• Supabase Team - Excellent backend-as-a-service
• React Native Community - Continuous innovation
• Recovery Community - Inspiration and feedback

📊 Project Status

• Version: 1.0.0
• Status: Active Development
• Architecture: Modular, Scalable
• File Organization: Optimized for Maintainability
• Last Updated: 2025
• Maintainers: Sobrixity Team

🔄 Recent Architectural Improvements

Folder Reorganization (v1.0.0)

• Modular Structure: Implemented clear separation of concerns
• Component Organization: Grouped by functionality (forms, particles, common)
• Service Layer: Centralized API management
• Type Safety: Enhanced TypeScript integration
• File Size Management: Enforced 200-line file limits
• Onboarding Split: Broke monolithic onboarding into manageable components
• Feature Grouping: Organized related functionality together

Benefits of New Structure

• Improved Maintainability: Easier to locate and modify specific functionality
• Enhanced Scalability: Clear patterns for adding new features
• Better Collaboration: Multiple developers can work on different components
• Reduced Complexity: Smaller, focused files are easier to understand
• Performance Optimization: Better tree-shaking and code splitting
• Testing Efficiency: Isolated components are easier to test

---

Built with ❤️ for the recovery community

Sobrixity is more than an app - it's a companion on your journey to wellness and sobriety.