CalFit - React Native Cross-Platform App

A modern cross-platform healthcare application built with React Native, powered by Tamagui, Expo, and Next.js.

🔦 About

This monorepo is a foundation for a healthcare application that works seamlessly across web and mobile platforms. It uses Tamagui for UI components, Expo for native mobile development, and Next.js for web deployment.

📱 Tech Stack

• Tamagui: A universal UI kit for React Native and Web with a focus on performance
• Expo: Development platform for making universal native apps
• Next.js : React framework for web applications with app router
• React Native: Framework for building native apps with React
• Solito: For cross-platform navigation
• TanStack Query: Data synchronization for React
• TanStack Form: Performant form validation
• TanStack Table: Table
• i18next: Internationalization framework
• Jotai : Primitive and flexible state management
• zod : Schema validation
• TypeScript (v5.6.2): Static type checking

🗂 Folder Structure

calfit/
├── apps/
│   ├── expo/                 # Native mobile app (iOS & Android)
│   └── next/                 # Web app with Next.js
└── packages/
    ├── app/                  # Shared application logic and features
    ├── assets/               # Shared assets
    ├── config/               # Tamagui configuration
    ├── lib/                  # Shared utilities and business logic
    └── ui/                   # UI components optimized with Tamagui

Key Packages

• apps/expo: Native iOS and Android app using Expo
• apps/next: Web app using Next.js
• packages/app: Cross-platform features and screens
• packages/assets: Shared assets (image, svg,...)
• packages/ui: Shared UI components
• packages/lib: Core functionality (API, state management, i18n)
• packages/config: Tamagui design system configuration

🏁 Getting Started

Prerequisites

• Node.js v22
• Yarn v4.7.0
• For iOS development: macOS with Xcode
• For Android development: Android Studio

Installation

1. Clone the repository
2. Install dependencies:

yarn

Development

Web Development:

# Start Next.js development server
yarn dev

# Or with full build for testing
yarn web

Mobile Development:

# Start Expo development server
yarn native

# Run on iOS simulator
yarn ios

# Run on Android emulator
yarn android

Prebuild for native development:

yarn native:prebuild

Production Builds

Web:

# Build for production
yarn web:prod

# Serve production build
yarn web:prod:serve

Mobile:

# Update development build over-the-air
yarn update:dev

# Update production build over-the-air
yarn update:prod

🆕 Adding Dependencies

Cross-platform JavaScript Dependencies

Install shared JS dependencies in the packages/app directory:

cd packages/app
yarn add [package-name]
cd ../..
yarn

Native Dependencies

Install native dependencies in the apps/expo directory:

cd apps/expo
yarn add [package-name]
cd ../..
yarn

UI Dependencies

For UI components that should be optimized by Tamagui:

cd packages/ui
yarn add [package-name]
cd ../..
yarn

🔄 Updating Dependencies

To check and update dependencies interactively:

yarn upgrade-interactive

To upgrade all Tamagui packages to the latest stable version:

yarn upgrade:tamagui

To upgrade to the canary (preview) version:

yarn upgrade:tamagui:canary

🧪 Testing

# Run tests
yarn test

# Run tests in watch mode
yarn test:watch

🚀 Deployment

Web (Vercel)

1. Connect your repository to Vercel
2. Configure the following settings:
   • Root directory: apps/next
   • Install command: yarn set version stable && yarn install
   • Build command: (leave default)
   • Output directory: (leave default)

Mobile (Expo)

Use EAS (Expo Application Services) for building and deploying:

# Configure EAS
npx eas-cli configure

# Create a preview build
npx eas build --profile preview

# Create a production build
npx eas build --profile production

🧰 Development Tools

• Biome: Modern formatter and linter
• Husky: Git hooks for pre-commit checks
• Vitest: Testing framework for React applications
• TypeScript: Static type checking