Mobile App Architecture

Overview

The mobile app is built as a hybrid application using React with Capacitor for native deployment.


┌─────────────────────────────────────────────────────────────┐
│                     React Application                        │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                    Components                           │ │
│  │   Pages → Organisms → Molecules → Atoms                 │ │
│  └────────────────────────────────────────────────────────┘ │
│                            │                                 │
│  ┌────────────┐  ┌────────────────┐  ┌─────────────────┐   │
│  │   Zustand  │  │  React Router  │  │  React Context  │   │
│  │   (State)  │  │   (Routing)    │  │   (Providers)   │   │
│  └────────────┘  └────────────────┘  └─────────────────┘   │
│                            │                                 │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    URQL Client                       │   │
│  │           (GraphQL Queries & Mutations)              │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                             │
              ┌──────────────┴──────────────┐
              │                              │
              ▼                              ▼
┌─────────────────────────┐    ┌─────────────────────────┐
│      Capacitor          │    │     Backend GraphQL     │
│   (Native Bridge)       │    │         API             │
└─────────────────────────┘    └─────────────────────────┘
              │
    ┌─────────┴─────────┐
    │                   │
    ▼                   ▼
┌──────────┐      ┌──────────┐
│  iOS     │      │ Android  │
└──────────┘      └──────────┘

Directory Structure


src/
├── components/
│   ├── atoms/           # Basic UI elements
│   │   ├── Button/
│   │   ├── Input/
│   │   └── ...
│   ├── molecules/       # Composite components
│   │   ├── Card/
│   │   ├── ListItem/
│   │   └── ...
│   ├── organisms/       # Complex features
│   │   ├── Chart/
│   │   ├── OrderPanel/
│   │   └── ...
│   └── pages/           # Screen components
│       ├── Home/
│       ├── LiveChallenge/
│       └── ...
│
├── config/
│   ├── routes/          # Route definitions
│   ├── theme/           # MUI theme
│   ├── zustand/         # State stores
│   ├── urql-client/     # GraphQL client
│   ├── jwt-manager/     # JWT handling
│   └── constants/       # App constants
│
├── gql-codegen/         # Generated GraphQL
│   ├── generated.ts     # Generated types
│   ├── queries/         # Query documents
│   └── mutations/       # Mutation documents
│
├── providers/
│   ├── urql/            # URQL provider
│   ├── theme/           # Theme provider
│   ├── router/          # Router provider
│   └── context/         # Custom contexts
│
├── types/
│   ├── models/          # Data models
│   └── props/           # Component props
│
├── App.tsx              # App root
└── main.tsx             # Entry point

State Management

Zustand Stores

Located in src/config/zustand/:


// User store
const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  clearUser: () => set({ user: null }),
}));
 
// Match store
const useMatchStore = create((set) => ({
  currentMatch: null,
  positions: [],
  setMatch: (match) => set({ currentMatch: match }),
  addPosition: (pos) => set((s) => ({
    positions: [...s.positions, pos]
  })),
}));

React Context

For provider-based state:

UserProfileReadyContext: Profile completion status
Theme context
Notification context

GraphQL Layer

Code Generation

GraphQL types are auto-generated:


yarn graphql:codegen

Config in codegen.ts:

Schema introspection
TypeScript types
URQL hooks

Query Organization


gql-codegen/
├── queries/
│   ├── achievements/    # Achievement queries
│   ├── assets/          # Asset/market queries
│   ├── games/           # Game queries
│   ├── match/           # Match queries
│   ├── profile/         # User queries
│   └── tradePanel/      # Trading queries
└── mutations/           # All mutations

URQL Client

Located in src/config/urql-client/:


const client = createClient({
  url: import.meta.env.VITE_GRAPHQL_URI,
  exchanges: [
    dedupExchange,
    cacheExchange,
    retryExchange({}),
    authExchange({...}),
    fetchExchange,
    subscriptionExchange({...}),
  ],
});

Routing

React Router Setup


<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/challenges" element={<Challenges />} />
    <Route path="/match/live/:id" element={<LiveChallenge />} />
    {/* ... */}
  </Routes>
</BrowserRouter>

Protected Routes

Auth check via JWT manager before accessing protected routes.

Native Integration

Capacitor

Native functionality through Capacitor plugins:


import { Capacitor } from '@capacitor/core';
 
// Platform check
if (Capacitor.isNativePlatform()) {
  // Native-specific code
}

Native Projects

android/ - Android Studio project
ios/ - Xcode project

UI/UX

Theming

MUI theme in src/config/theme/:

Custom color palette
Typography scale
Component overrides
Dark mode support

Ionic Components

Ionic UI components for native feel:

IonPage
IonContent
IonRefresher
IonLoading

Animations

GSAP for complex animations:

Page transitions
Chart animations
Win celebrations

Charts

Lightweight Charts

Trading charts using TradingView’s lightweight-charts:


import { createChart } from 'lightweight-charts';
 
const chart = createChart(container, {
  width: 400,
  height: 300,
});
 
const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData(data);

Testing

Vitest

Unit testing setup:


yarn test

Storybook

Component development:


yarn storybook

Build & Deploy

Web Build


yarn build
# Output: dist/

Android Build


yarn build:android
# Output: android/app/build/outputs/apk/

iOS Build


yarn build:ios
# Opens Xcode for archive