Core Concepts

Architecture

We follow a clean architecture pattern to ensure maintainability and testability.

Router Navigation

We use Expo Router for file-based navigation, which provides a familiar Next.js-like routing experience.

Deep Linking

Configured for both custom scheme (myapp-scheme://) and universal links.

State Management

The app uses a combination of Zustand for client state and React Query for server state.

Client State (Zustand)

Local and global client state (Theme, UI preferences) is managed with Zustand stores.

import { useTheme } from '@/constants/theme-context';

function MyComponent() {
  const { themeStyle, setThemeStyle } = useTheme();
}

Server State (React Query)

API data fetching, caching, and synchronization is handled by React Query.

import { useQuery } from '@tanstack/react-query';

function MyComponent() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user'],
    queryFn: fetchUser,
  });
}

Data Layer

TypeScript Types

We use TypeScript for type safety across the entire application.

Network & Cache

• Axios/Fetch: For network requests.
• React Query: Intelligent caching strategies for offline support and performance.