# DESTRY Mobile App

A comprehensive life management and productivity mobile application built with React Native and Expo.

## Overview

DESTRY is a mobile companion app for the DESTRY web platform - a Life Operating System that helps users manage tasks, track goals, build habits, and maintain life balance.

## Features Implemented

### ✅ Authentication System
- **Login Screen** - Email and password authentication
- **Registration Screen** - Create new user accounts
- **Password Reset** - Request password reset functionality
- **JWT Token Management** - Secure token storage using Expo SecureStore
- **Auto-redirect** - Automatic navigation based on authentication state

### ✅ App Navigation
- **Bottom Tab Navigation** - 5 main sections:
  - **Home** - Dashboard with overview
  - **Tasks** - Task management (placeholder)
  - **Life** - Goals, Habits, Life Balance hub
  - **Plan** - Planning and time management (placeholder)
  - **More** - Additional features and settings

### ✅ Dashboard (Home Screen)
- **User Greeting** - Personalized welcome message
- **Stats Overview** - Quick view of:
  - Tasks count
  - Habits progress
  - Active goals count
- **Critical Alerts Banner** - Displays important notifications
- **Today's Tasks** - List of tasks for the current day
- **Habits Today** - Habit tracking with completion status
- **Quick Actions** - Fast access to common actions:
  - Add Task
  - Check Habit
  - Focus Session
  - Journal Entry

### ✅ Settings & Profile
- Profile access from dashboard
- Sign out functionality
- Settings placeholder screen

### ✅ Design System
- **Color Tokens** - Consistent brand colors
  - Primary: Indigo (#6366F1)
  - Priority colors (Critical, High, Normal, Low)
  - Life area colors (Work, Health, Relationships, etc.)
- **Typography** - Defined font sizes and weights
- **Spacing** - 8-point grid system
- **Dark Theme** - Professional dark mode interface

### ✅ State Management
- **Zustand** - Global state management
- **Auth Store** - User authentication state
- **UI Store** - Theme and UI preferences
- **MMKV Storage** - Fast local storage

### ✅ API Integration
- **Axios Client** - HTTP client with interceptors
- **TanStack Query** - Data fetching and caching
- **Auto Token Refresh** - Automatic JWT token handling
- **Error Handling** - Centralized error management

### ✅ Backend API Endpoints
- `POST /api/auth/register` - User registration
- `POST /api/auth/login` - User login
- `GET /api/auth/me` - Get current user
- `POST /api/auth/reset-password` - Password reset request
- `GET /api/dashboard` - Dashboard data

## Technology Stack

### Frontend
- **React Native** 0.81.5
- **Expo** 54.0.33
- **Expo Router** 6.0.22 - File-based routing
- **TypeScript** 5.9.3
- **TanStack Query** 5.96.1 - Data fetching
- **Zustand** 5.0.12 - State management
- **Axios** 1.14.0 - HTTP client
- **React Native MMKV** 4.3.0 - Fast storage
- **React Native Reanimated** 4.3.0 - Animations
- **React Native Gesture Handler** 2.31.0 - Gestures
- **Expo Secure Store** - Secure token storage
- **Expo Haptics** - Haptic feedback
- **Date-fns** 4.1.0 - Date utilities
- **NativeWind** 4.2.3 - Tailwind for React Native

### Backend
- **FastAPI** - Python web framework
- **MongoDB** - Database
- **Motor** - Async MongoDB driver
- **JWT** - Token-based authentication
- **Bcrypt** - Password hashing
- **Pydantic** - Data validation

## Project Structure

```
frontend/
├── app/                      # Expo Router screens
│   ├── (auth)/              # Authentication screens
│   │   ├── login.tsx
│   │   ├── register.tsx
│   │   └── reset-password.tsx
│   ├── (app)/               # Main app screens
│   │   ├── (home)/          # Dashboard
│   │   ├── (tasks)/         # Tasks section
│   │   ├── (life)/          # Life hub (Goals, Habits, Balance)
│   │   ├── (plan)/          # Planning section
│   │   └── (more)/          # More features (Journal, Settings)
│   ├── _layout.tsx          # Root layout
│   └── index.tsx            # App entry point
├── lib/                     # Core utilities
│   ├── api.ts               # API client
│   ├── queryClient.ts       # TanStack Query config
│   └── storage.ts           # MMKV storage wrapper
├── stores/                  # Zustand stores
│   ├── authStore.ts         # Authentication state
│   └── uiStore.ts           # UI preferences
├── tokens/                  # Design tokens
│   ├── colors.ts            # Color palette
│   ├── typography.ts        # Typography system
│   └── spacing.ts           # Spacing system
└── components/              # Reusable components
    ├── ui/                  # UI components
    ├── tasks/               # Task components
    ├── habits/              # Habit components
    └── layout/              # Layout components

backend/
└── server.py               # FastAPI server with all endpoints
```

## Getting Started

### Prerequisites
- Node.js 18+ and Yarn
- Python 3.11+
- MongoDB
- Expo Go app (for mobile testing)

### Installation

1. **Install Frontend Dependencies**
   ```bash
   cd /app/frontend
   yarn install
   ```

2. **Install Backend Dependencies**
   ```bash
   cd /app/backend
   pip install -r requirements.txt
   ```

3. **Environment Variables**
   - Frontend: `/app/frontend/.env`
     - `EXPO_PUBLIC_BACKEND_URL` - Backend API URL
   - Backend: `/app/backend/.env`
     - `MONGO_URL` - MongoDB connection string
     - `DB_NAME` - Database name
     - `JWT_SECRET` - Secret key for JWT tokens

### Running the App

1. **Start Backend**
   ```bash
   sudo supervisorctl restart backend
   ```

2. **Start Frontend**
   ```bash
   sudo supervisorctl restart expo
   ```

3. **Access the App**
   - Web Preview: `https://dcs-mobile.preview.emergentagent.com`
   - Mobile: Scan QR code with Expo Go app

## Testing

### Test Accounts
- See `/app/memory/test_credentials.md` for test user credentials

### Creating a Test User
1. Open the app
2. Click "Sign up" on login screen
3. Enter username, email, and password
4. Registration will auto-login

## API Endpoints

### Authentication
- `POST /api/auth/register` - Register new user
- `POST /api/auth/login` - Login user
- `GET /api/auth/me` - Get current user profile
- `POST /api/auth/reset-password` - Request password reset

### Dashboard
- `GET /api/dashboard` - Get dashboard data (requires authentication)

## Features to be Implemented

According to the full specification, the following features are planned:

### Tasks Management
- Task CRUD operations
- Task priorities and categories
- Due dates and reminders
- Swipe gestures (complete/delete)
- Task filtering and sorting

### Habits Tracking
- Habit creation and management
- Daily check-ins
- Streak tracking
- Habit statistics
- Consistency metrics

### Goals
- Goal CRUD operations
- Sub-goals and milestones
- Progress tracking
- Goal-task linking

### Life Balance
- Life area tracking
- Balance radar chart
- Area performance metrics

### Planning & Time Management
- Time blocks
- Calendar views
- Focus sessions (Pomodoro timer)
- Year plan

### Journal & Notes
- Journal entries with mood tracking
- Notes management
- Tags and search

### Analytics & Insights
- Progress charts
- Habit consistency graphs
- Time distribution analysis
- Performance trends

### Premium Features
- AI-powered insights
- Predictive forecasting
- Advanced analytics
- Automation

### Mobile-Specific Features
- Push notifications
- Biometric authentication
- Haptic feedback
- Today widget
- Siri Shortcuts
- Share extension

## Mobile App Specifications

For the complete mobile app specification, see the uploaded `mobileappz24.md` document which includes:
- 42 total screens
- Complete navigation architecture
- Detailed UI/UX specifications
- Mobile-native patterns
- Offline capabilities
- Push notification setup
- Widget implementation
- Deep linking strategy

## Backend Integration

The mobile app connects to the existing DESTRY backend at `https://dcs.n9u.net/api/` with full feature parity to the web application.

## Contributing

This is a comprehensive mobile app project. To add new features:

1. Add new screens in `/app/(app)/` following the Expo Router file structure
2. Create API endpoints in `/backend/server.py`
3. Add state management in `/stores/` if needed
4. Create reusable components in `/components/`
5. Follow the design system tokens in `/tokens/`

## Design Philosophy

- **Thumb-first layout** - Primary actions in bottom 40% of screen
- **Progressive disclosure** - Core actions reachable in 1 tap
- **Offline-capable** - Core features work offline with sync
- **Native patterns** - Bottom tabs, swipe gestures, haptics
- **Consistent branding** - Same identity as web platform

## License

Private project - All rights reserved

## Support

For issues or questions, contact the development team.
