Mobile Stack

The Vulcan mobile app is built with React Native and Expo, providing a native experience on iOS and Android.

Core Technologies

Technology	Purpose
React Native	Cross-platform mobile application framework for building native iOS and Android apps
Expo	Development platform and managed workflow for React Native with extensive APIs
Expo Router	File-based routing system for navigation with deep linking support

UI Components

Technology	Purpose
React Native Paper	Material Design component library for React Native with theming support

API Integration

Technology	Purpose
OpenAPI Generator	Auto-generates type-safe API client from OpenAPI/Swagger specification
GraphQL Code Generator	Generates TypeScript types and TanStack Query hooks from GraphQL schema
graphql-request	Lightweight GraphQL client for making API requests

Configuration & Monitoring

Technology	Purpose
expo-constants	Environment variable management and app configuration
Datadog	Application performance monitoring, error tracking, and logging

Testing

Technology	Purpose
Jest	JavaScript testing framework for unit and integration tests
React Native Testing Library	Component testing utilities focused on user behavior

Code Quality

Technology	Purpose
ESLint	JavaScript/TypeScript linting and code quality enforcement
Prettier	Opinionated code formatter for consistent code style
commitlint	Enforce Conventional Commits format for commit messages
SonarQube	Static code analysis for code quality and security

Mobile-First Design Principles

Purpose-Built, Not Reduced

The mobile app is a purpose-built tool for field workers, not a reduced version of the desktop app:

• Full functionality available offline
• Voice input as primary alternative to typing
• Large touch targets for use with gloves
• GPS and camera integration

Offline-First Architecture

┌─────────────────────────────────────────────────┐
│                    Mobile App                    │
│  ┌───────────────────────────────────────────┐  │
│  │              TanStack Query                │  │
│  │  ┌─────────────┐   ┌──────────────────┐   │  │
│  │  │   Cache     │ ← │  Persistence     │   │  │
│  │  │  (memory)   │ → │  (AsyncStorage)  │   │  │
│  │  └─────────────┘   └──────────────────┘   │  │
│  └───────────────────────────────────────────┘  │
│                        ↕                         │
│  ┌───────────────────────────────────────────┐  │
│  │              Mutation Queue                │  │
│  │   [pending mutations when offline]         │  │
│  └───────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘
                       ↕
                 [When Online]
                       ↕
┌─────────────────────────────────────────────────┐
│                   Backend APIs                   │
└─────────────────────────────────────────────────┘

Navigation Structure

Tab Navigation (Main)

(tabs)/
├── index.tsx      → Dashboard
├── projects.tsx   → Projects list
├── leads.tsx      → CRM/Leads
└── profile.tsx    → User profile

Stack Navigation (Drill-down)

quote/
├── [id].tsx       → Quote details
└── create.tsx     → New quote wizard

project/
└── [id].tsx       → Project details

Build Commands

# Development
npx expo start           # Start dev server
npx expo run:ios         # Run on iOS simulator
npx expo run:android     # Run on Android emulator

# Testing
npm run test             # Run Jest tests
npm run lint             # Run ESLint
npm run type-check       # TypeScript check

# Building
eas build --profile development --platform ios
eas build --profile preview --platform all
eas build --profile production --platform all

# Submitting
eas submit --platform ios
eas submit --platform android

Key Conventions

Important

• Use React Native Paper for all UI components
• Expo Router uses file-based routing - don't mix with React Navigation directly
• Test on both iOS and Android - behavior can differ
• Be careful with native modules - prefer Expo SDK when possible
• EAS Build is required for native code - can't use Expo Go for everything