DOCSEARCHbyAlgolia
Submit Docs

UTA Ecosystem

website·Indexed 30 days ago

https://dev.updatetheapp.com/docs

Standardized React Native development patterns and deployment solutions. The ecosystem features a modular, domain-driven architecture using a Feature-Domain Hybrid organizational strategy, TypeScript, TanStack Query for server state, and Zustand for client state management.

Tokens
265.8K
Snippets
874
Records
1.2K
Agent score
49%

What's inside UTA

  2. Overview of Design Token Integration

    Design tokens are the smallest pieces of a visual language (visual atoms) that centralize design decisions into reusable values. They provide a single source of truth for consistency, simplify maintainability by allowing global updates, enable easy theme switching (e.g., light/dark mode), ensure platform unity across iOS and Android, and create a shared vocabulary between designers and developers.

  3. Overview of the UTA Ecosystem

    The UTA ecosystem provides standardized, platform-agnostic React Native development patterns and deployment solutions. Its core philosophy is to eliminate architectural decision fatigue and avoid vendor lock-in, allowing developers to adopt proven patterns regardless of their chosen deployment strategy (e.g., Expo Updates, CodePush, or updatetheapp.com).

  6. Overview of UTA Implementation Guides

    UTA provides practical, step-by-step guides for building React Native applications. Each guide is structured to be immediately actionable, featuring prerequisites, numbered instructions with code examples, production-tested real-world implementations, troubleshooting sections, and links to advanced related topics.

  7. Implement Pure Functional Components in React Native

    Pure functional components are the default pattern for building UI in this architecture. They are predictable, easy to test, and focus on rendering based on props. They should typically be paired with a separate styles file and a types file to maintain a clean separation of concerns.
    // ui/foundation/Button/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, ActivityIndicator } from 'react-native';
import { styles } from './styles';
import type { ButtonProps } from './types';

export const Button: React.FC<ButtonProps> = ({
  title,
  onPress,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  loading = false,
  testID,
  ...rest
}) => {
  const isDisabled = disabled || loading;

  return (
    <TouchableOpacity
      style={[
        styles.button,
        styles[variant],
        styles[size],
        isDisabled && styles.disabled,
      ]}
      onPress={onPress}
      disabled={isDisabled}
      testID={testID}
      {...rest}
    >
      {loading ? (
        <ActivityIndicator color={styles[variant].color} />
      ) : (
        <Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
      )}
    </TouchableOpacity>
  );
};

  8. Guidelines for choosing component state vs global state

    Follow the application's Golden Rule: "Component state belongs in React's built-in hooks, not in Zustand or TanStack Query". Use component state for:

    • Form inputs before submission
    • UI toggles (dropdowns, modals specific to one component)
    • Temporary values during user interaction
    • Animation states
    • Local component configuration
    • Any state that doesn't need to be shared beyond a small component tree.

  9. API Implementation Best Practices (Do's and Don'ts)

    Follow these rules to maintain the architecture's integrity:

    • DO: Use the public/protected object pattern within domain API classes.
    • DON'T: Use the API client directly in components or hooks.
    • DON'T: Use skipAuth flags to toggle authentication on a single client.
    • DON'T: Mix patterns by having some methods in a public object and others as top-level class methods.

  10. Benefits of enforcing coding standards

    Coding standards act as efficiency multipliers by providing the following benefits:

    • Eliminates Decision Fatigue: Developers follow canonical paths instead of spending time deciding on patterns for every import or structure.
    • Accelerates Onboarding: New developers reach basic productivity in days rather than weeks because patterns are documented and predictable.
    • Enables Reliable Automation: Consistent patterns allow tools (like ESLint) to enforce rules and auto-fix code reliably.
    • Scales Code Reviews: Reviews shift focus from style 'bikeshedding' and pattern debates to business logic and architecture.
    • Enables AI-Assisted Development: AI generates more usable code when it can follow documented, predictable naming conventions and file structures.

  11. Implement multiple API services with custom Auth Strategies

    The architecture supports multiple API services by defining an AuthStrategy interface. This allows different clients to use different authentication methods (e.g., Bearer Tokens, API Keys, or OAuth2) while maintaining a consistent client interface.
    // core/shared/api/auth-strategies.ts
export interface AuthStrategy {
  applyAuth(config: AxiosRequestConfig): Promise<AxiosRequestConfig>;
  handleAuthError(error: AxiosError): Promise<any>;
}

export class BearerTokenStrategy implements AuthStrategy {
  async applyAuth(config: AxiosRequestConfig) {
    const token = await tokenService.getAccessToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  }
}

export class ApiKeyStrategy implements AuthStrategy {
  constructor(private apiKey: string) {}
  async applyAuth(config: AxiosRequestConfig) {
    config.headers['X-API-Key'] = this.apiKey;
    return config;
  }
}

// core/shared/api/clients.ts
export const mainApi = {
  public: new PublicApiClient({ baseURL: process.env.MAIN_API_URL }),
  authenticated: new AuthenticatedApiClient(
    { baseURL: process.env.MAIN_API_URL },
    new BearerTokenStrategy(tokenService)
  ),
};

export const paymentApi = new AuthenticatedApiClient(
  { baseURL: process.env.PAYMENT_API_URL },
  new ApiKeyStrategy(process.env.PAYMENT_API_KEY)
);

  12. Implement Multi-Tenant Header Architecture

    Multi-tenant headers allow an API to understand the organizational context of a request for data segmentation and access control. The architecture consists of a Zustand store for state management, a Header Provider to inject headers into requests, and a UI for tenant selection.