Frontend Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• app/_layout.tsx
• app/(tabs)/_layout.tsx
• tailwind.config.js
• lib/trpc.ts
• package.json
• app/(tabs)/index.tsx
• lib/translations.ts
• metro.config.js

The frontend for the aidoit4u-mobile-app is a React Native application built with Expo. It leverages a modern technology stack to provide a cross-platform experience for both iOS and Android, with web support. The architecture prioritizes a declarative UI, type-safe API communication, and a streamlined development experience through file-based routing and utility-first styling.

Key architectural pillars include Expo Router for navigation, NativeWind for styling, and tRPC with React Query for data fetching and state management. The application is structured with a clear separation of concerns, using providers at the root level to inject dependencies like theming, internationalization, and API clients into the component tree.

Core Technologies & Dependencies

The application is built on a foundation of React 19 and React Native, managed within an Expo ecosystem. The following table and diagram outline the primary dependencies and their roles.

Sources: package.json

Library	Version	Role
react	19.1.0	Core UI library
react-native	0.81.5	Framework for building native apps
expo	~54.0.29	Platform and toolset for React Native development
expo-router	~6.0.19	File-based routing for navigation
nativewind	4.2.1	Tailwind CSS for React Native
@trpc/client	11.7.2	tRPC client for type-safe API calls
@tanstack/react-query	5.90.12	Data fetching, caching, and server state management
typescript	~5.9.3	Language for static typing

This diagram illustrates the relationship between the core technologies.

Project Structure & Routing

The application utilizes Expo Router for its navigation, which enables a file-based routing system similar to web frameworks like Next.js. The app directory serves as the root for all routes.

Sources: app/_layout.tsx, app/(tabs)/_layout.tsx

Root Layout (app/_layout.tsx)

The entry point for the application's UI is app/_layout.tsx. This file defines the root layout and is responsible for:

1. Wrapping the App in Providers: It sets up a hierarchy of context providers that make essential services available throughout the component tree.
2. Global Styles: Imports the global CSS file (global.css) to apply base Tailwind styles.
3. Navigation Setup: Uses an Expo Router Stack navigator to manage top-level screens. It hides the native header by default for a custom UI.
4. Safe Area Handling: Implements SafeAreaProvider to handle device notches and other intrusions, with custom logic for web vs. native platforms.

The diagram below shows the provider hierarchy established in the root layout.

Tab Navigation (app/(tabs)/_layout.tsx)

The primary user navigation is a tab bar, configured in app/(tabs)/_layout.tsx. This file uses a directory group (tabs) to create a nested layout without affecting the URL path.

• It uses Tabs from expo-router to create the tab bar.
• Each Tabs.Screen defines a tab, its corresponding component (route), and its appearance (icon, label).
• The labels are dynamically set using the internationalization system.

The defined tabs are:

• Home: (tabs)/index.tsx
• Documents: (tabs)/documents.tsx
• Settings: (tabs)/settings.tsx

The following screens are also nested within the tab navigator, ensuring the tab bar remains visible:

• analyze
• generate
• chat

Sources: app/(tabs)/_layout.tsx:11-47

Styling and Theming

Styling is managed by NativeWind, which brings the power of Tailwind CSS to React Native.

Sources: tailwind.config.js, metro.config.js, global.css

Configuration

• tailwind.config.js: Defines the application's theme, including colors. It scans all relevant project files for Tailwind classes to include in the final build. The configuration extends the base NativeWind preset.
• metro.config.js: The Metro bundler is configured with withNativeWind to process the global.css file and enable NativeWind's functionality. The forceWriteFileSystem: true option is set to resolve styling issues on iOS during development.
• global.css: This file contains the three core @tailwind directives, which inject Tailwind's base, component, and utility styles into the application.

Theming

The application supports both light and dark modes. The ThemeProvider from lib/theme-provider.ts (referenced in app/_layout.tsx) manages the current theme. Colors are defined in theme.config.js and consumed by tailwind.config.js, which sets up CSS variables for each color that automatically adapt to the current theme (light/dark).

Sources: tailwind.config.js:3-13, app/_layout.tsx:14, 101, 111

State Management & Data Fetching

The application uses a combination of tRPC and TanStack React Query for client-server communication and server state management.

Sources: lib/trpc.ts, app/_layout.tsx

tRPC Client Setup

The tRPC client is configured in lib/trpc.ts.

• createTRPCReact creates a set of type-safe React hooks for interacting with the tRPC backend.
• createTRPCClient configures the low-level client, specifying the server URL and using superjson for data transformation to handle types like Date and BigInt.

// lib/trpc.ts
export const trpc = createTRPCReact<AppRouter>();

export function createTRPCClient() {
  return trpc.createClient({
    links: [
      httpBatchLink({
        url: `${getApiBaseUrl()}/trpc`,
        transformer: superjson,
      }),
    ],
  });
}

Sources: lib/trpc.ts:10-23

React Query Integration

React Query is used to manage the lifecycle of server state, including caching, refetching, and optimistic updates.

• In app/_layout.tsx, a QueryClient is instantiated with default options suitable for a mobile environment, such as disabling refetchOnWindowFocus.
• The entire application is wrapped in QueryClientProvider and trpc.Provider, making both the React Query cache and the tRPC client available to all components.

This sequence diagram shows the flow of a data request from a component to the server using tRPC and React Query.

Internationalization (i18n)

The app supports multiple languages (English, Spanish, German) through a custom i18n implementation.

Sources: lib/translations.ts, app/(tabs)/index.tsx, app/_layout.tsx

Core Components

• lib/translations.ts: A single file contains all translation strings, organized by language (EN, ES, DE). It exports the translations object and a getTranslation utility function.
• LanguageProvider: A context provider (lib/language-context.tsx, referenced in _layout.tsx) that holds the current language state and makes it available to the entire app.
• useLanguage Hook: A custom hook that components use to access the current language and the setter function.
• getTranslation Function: A utility that takes a language and a translation key, returning the appropriate string.

Usage

In components like HomeScreen, the useLanguage hook is called to get the current language. A helper function t is then created to simplify calls to getTranslation.

// app/(tabs)/index.tsx
export default function HomeScreen() {
  const { language } = useLanguage();
  const t = (key: string) => getTranslation(language, key as keyof typeof translations.EN);
  // ...
  return (
    <Text>{t("professionalLegalAnalysis" as any)}</Text>
  );
}

Sources: app/(tabs)/index.tsx:14-15, 29, lib/translations.ts:427-429, app/_layout.tsx:80

Conclusion

The frontend architecture of the aidoit4u-mobile-app is robust, modern, and developer-friendly. By combining Expo's managed workflow with powerful libraries like Expo Router, NativeWind, and tRPC, the project achieves a high degree of type safety, code reusability, and a consistent user experience across multiple platforms. The clear structure, centered around file-based routing and a provider-based dependency injection model, creates a scalable and maintainable codebase.