🧠 Solace AI Mobile

Your Empathetic Digital Confidant — A React Native mental health application with AI therapy, mood tracking, mindfulness, and community support.

✨ Key Features

Feature	Description
🤖 AI Therapy Chat	Natural language conversations with emotional intelligence
📊 Mood Tracking	Track daily moods with analytics and trend insights
🧘 Mindfulness	Guided meditation and breathing exercises
📝 Journaling	Secure mental health journal with mood tagging
🆘 Crisis Support	Emergency resources and crisis hotline integration
👥 Community	Moderated support groups and peer connection
📈 Assessments	Evidence-based mental health screening
🎨 Customizable Themes	5 therapeutic color palettes + light/dark modes + web responsive design
♿ Accessibility	Full screen reader support and keyboard navigation
📱 Cross-Platform	iOS, Android, and Web support

🚀 Quick Start

Prerequisites

Node.js v16+ | npm v8+ | Git
Expo CLI: npm install -g expo-cli
Optional: Xcode (iOS) | Android Studio (Android)

Installation & Running

# Clone the repository
git clone https://github.com/Rayyan9477/Solace-AI-Mobile.git
cd Solace-AI-Mobile

# Install dependencies
npm run setup

# Start development server
npm start

# Run on platform (from Expo CLI):
# Press 'a' for Android | 'i' for iOS | 'w' for web

Alternative Commands

npm run web                    # Web development
npm run dev                    # Main app + theme preview (concurrent)
npm run android               # Android build
npm run ios                   # iOS build

📚 Documentation

Document	Purpose
PROJECT.md	Comprehensive project guide with structure & architecture
ARCHITECTURE.md	Detailed system design and patterns
DESIGN_GUIDE.md	Design system, UI components, and guidelines
CONTRIBUTING.md	Development standards and contribution workflow
CLAUDE.md	AI development assistant reference

🏗️ Architecture Overview

Feature-Based Structure

src/
├── app/                    # App configuration (navigation, store, providers)
├── features/               # Feature modules (mood, chat, auth, etc.)
├── shared/                 # Reusable components & utilities (Atomic Design)
└── ...

Key Technologies

State Management: Redux Toolkit + Redux Persist
Navigation: React Navigation v6
UI Components: React Native Paper + Custom Atomic Design
Theme System: UnifiedThemeProvider (Light/Dark modes)
Testing: Jest + React Testing Library + Playwright
Type Safety: TypeScript

Import Aliases

// Clean absolute imports
import { Button } from '@components/atoms/Button';
import { useTheme } from '@theme/ThemeProvider';
import { formatDate } from '@utils/dateUtils';

🧪 Testing

# Run all tests
npm test                          # Jest watch mode
npm run test:ci                   # CI with coverage

# E2E tests (Playwright)
npm run test:playwright           # Run all E2E tests
npm run test:playwright:debug     # Debug mode
npm run test:playwright:report    # View HTML report

# Code quality
npm run lint                      # Check linting
npm run lint:fix                  # Auto-fix issues

Test Status: 519/548 tests passing (94.7%) ✅

💻 Development Workflow

Code Standards

✅ Functional components with React Hooks
✅ TypeScript for type safety
✅ Absolute imports with aliases
✅ Atomic Design pattern for UI components
✅ Proper error boundaries
✅ Comprehensive accessibility attributes

Development Commands

npm start              # Expo development server
npm run dev           # Main app + theme preview
npm run lint:fix      # Fix linting issues
npm run theme-preview # Theme preview only

📊 Project Statistics

Metric	Value
Components	50+ reusable components
Features	10+ major features
Test Coverage	85%+ code coverage
Test Suites	30 test suites
TypeScript Files	80+ .ts/.tsx files
Documentation	Comprehensive (5+ guides)

🎨 Design System

Themes

Light Mode: Clean, energizing colors for daytime use
Dark Mode: Therapeutic brown palette for evening use
Accessible: High contrast options and reduced motion support
Web Responsive: Adaptive layouts for desktop, tablet, and mobile

Color Palettes

Choose from 5 therapeutic color presets designed for mental wellness:

Palette	Description	Best For
Mindful Brown	Original therapeutic brown (default)	General wellness, evening use
Serene Green	Calming green tones	Anxiety relief, meditation
Warm Orange	Energizing orange/amber	Motivation, morning use
Wisdom Purple	Deep purple tones	Focus, contemplation
Sunshine Yellow	Bright optimistic yellows	Mood elevation, energy boost

Customize your theme: Navigate to Profile → Theme Settings to select your preferred color palette. Changes apply instantly and persist across sessions.

Responsive Design

Mobile First: Optimized touch targets and layouts for phones
Web Optimized: Centered content with max-width constraints (480-800px)
Tablet Support: Adaptive breakpoints for iPad and tablets
Desktop Ready: Professional card-based layouts for large screens

See DESIGN_GUIDE.md for detailed design specifications.

🔧 Technology Stack

Core

React Native - Mobile app framework
Expo - Development platform
React 18.3.1 - UI library
TypeScript - Type safety

State & Routing

Redux Toolkit - State management
Redux Persist - State persistence
React Navigation v6 - Routing

UI & Styling

React Native Paper - Material Design
Reanimated - Smooth animations
Linear Gradient - Gradient effects

Testing

Jest - Test runner
React Testing Library - Component testing
Playwright - E2E testing

🚢 Building & Deployment

Development

npm run setup          # Full setup
npm start             # Start Expo
npm run web           # Web development

Production

npm run lint:fix      # Format code
npm run test:ci       # Run tests
npm run android       # Android build
npm run ios           # iOS build

👥 Contributing

We welcome contributions! Please see CONTRIBUTING.md for:

Code standards and style guide
Commit message conventions
Pull request process
Testing requirements
Documentation guidelines

Quick Contribution Steps

# 1. Create feature branch
git checkout -b feature/your-feature

# 2. Make changes & add tests
npm run lint:fix
npm test

# 3. Push and create pull request
git push origin feature/your-feature

🆘 Crisis Support

If you're in crisis, please reach out:

National Suicide Prevention Lifeline (US): 1-800-273-8255
Crisis Text Line: Text HOME to 741741
International: https://www.iasp.info/resources/Crisis_Centres/

The app includes emergency resources and crisis support features.

📄 License

MIT License - See LICENSE file for details

📞 Support

Issues & Bugs: GitHub Issues
Documentation: See PROJECT.md
Architecture: See ARCHITECTURE.md

Version: 1.0.0 | Last Updated: October 2025 | Maintained by: Rayyan9477

Name		Name	Last commit message	Last commit date
Latest commit History 103 Commits
.claude		.claude
.expo		.expo
docs		docs
src		src
test		test
tests		tests
ui-designs		ui-designs
utils		utils
.env.example		.env.example
.eslintrc.js		.eslintrc.js
.gitattributes		.gitattributes
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
App.tsx		App.tsx
BUG_REPORT.md		BUG_REPORT.md
COMPREHENSIVE_VISUAL_QUALITY_ANALYSIS.md		COMPREHENSIVE_VISUAL_QUALITY_ANALYSIS.md
CONTRIBUTING.md		CONTRIBUTING.md
DESIGN_GUIDE.md		DESIGN_GUIDE.md
DETAILED_IMPLEMENTATION_PLAN.md		DETAILED_IMPLEMENTATION_PLAN.md
Font , Color and Icons .pdf		Font , Color and Icons .pdf
OAUTH_SETUP.md		OAUTH_SETUP.md
PROJECT.md		PROJECT.md
PROJECT_MAP.md		PROJECT_MAP.md
README.md		README.md
SCREEN_INVENTORY.md		SCREEN_INVENTORY.md
Screens.md		Screens.md
UI_DESIGN_REVIEW_REPORT.md		UI_DESIGN_REVIEW_REPORT.md
app.json		app.json
babel.config.js		babel.config.js
extract_screens.py		extract_screens.py
jest.config.js		jest.config.js
jest.setup.js		jest.setup.js
metro.config.js		metro.config.js
package-lock.json		package-lock.json
package.json		package.json
playwright.config.js		playwright.config.js
tsconfig.json		tsconfig.json

Rayyan9477/Solace-AI-Mobile

Folders and files

Latest commit

History

Repository files navigation