Architecture Overview

Relevant source files

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

• package.json
• app/_layout.tsx
• server/_core/oauth.ts
• drizzle/meta/0000_snapshot.json
• app/(tabs)/index.tsx
• lib/_core/api.ts
• server/_core/llm.ts
• lib/translations.ts

The aidoit4u-mobile-app is a full-stack application built with a modern, type-safe technology stack. It consists of a React Native mobile frontend powered by Expo and a Node.js backend using Express. The architecture is designed for rapid development, featuring a monorepo-like structure where both client and server code reside. Key technologies include Expo for the mobile client, Express and tRPC for the backend API, Drizzle ORM for database interaction, and NativeWind for styling.

This document provides a high-level overview of the system's architecture, covering the frontend, backend, database, and the communication layer that connects them. The application's core purpose is to provide AI-powered legal document analysis and generation.

Technology Stack

The project utilizes a range of modern technologies for both frontend and backend development. The core dependencies are defined in package.json.

Category	Technology	Description
Frontend	React Native, Expo	Core framework for building the cross-platform mobile application.
	Expo Router	File-system based routing for navigation within the app.
	NativeWind	Tailwind CSS for React Native, enabling utility-first styling.
	TanStack Query (React Query)	Data fetching and server state management.
	tRPC Client	Provides end-to-end type-safe API calls from the client to the server.
Backend	Node.js, Express	The runtime environment and web server framework.
	tRPC Server	Enables the creation of a fully type-safe API layer without code generation.
	tsx	Used for running the TypeScript-based server in development with hot-reloading.
Database	MySQL	The SQL database dialect used, as specified in the Drizzle snapshot.
	Drizzle ORM	A TypeScript ORM for interacting with the database in a type-safe manner.
External	Manus Forge API	An external service used for Large Language Model (LLM) invocations and cloud storage.

Sources: package.json, drizzle/meta/0000_snapshot.json:3, server/_core/llm.ts:184, server/storage.ts:6

High-Level Architecture

The application follows a client-server model. The Expo app communicates with the Express backend via a tRPC API. The backend handles business logic, authentication, database operations, and interactions with external services like the AI/LLM provider.

This diagram illustrates the main components and their interactions.

Frontend Architecture

The frontend is an Expo-managed React Native application. Its structure is centered around file-based routing and a clear separation of concerns for UI, state, and services.

Routing and Layout

Navigation is handled by Expo Router. The main application structure is defined in app/_layout.tsx, which sets up global providers and a Stack navigator. The primary user-facing screens are organized as a tab navigator within the (tabs) directory group.

• app/_layout.tsx: The root layout, responsible for initializing providers like QueryClientProvider, trpc.Provider, LanguageProvider, and ThemeProvider. It also configures the root Stack navigator.
• app/(tabs)/_layout.tsx: (Inferred) Defines the tab-based navigation for Home, Documents, and Settings.
• app/(tabs)/index.tsx: The Home screen.
• app/(tabs)/analyze.tsx: The Document Analysis screen.
• app/(tabs)/generate.tsx: The Document Generation screen.

Sources: app/_layout.tsx:18, 77-80, app/(tabs)/index.tsx:12

State Management and Data Fetching

Client-side state management and data fetching are handled by a combination of React state, React Context, and TanStack Query (React Query) integrated with tRPC.

• tRPC & React Query: The trpc.Provider and QueryClientProvider are set up in app/_layout.tsx. This allows components to make type-safe API calls to the backend using hooks provided by @trpc/react-query.
• Language Context: A custom LanguageProvider manages the application's internationalization (i18n) state, allowing users to switch between English, Spanish, and German. The translations are stored in a single object.
• Authentication State: The useAuth hook manages the user's authentication status by interacting with AsyncStorage (on native) and API endpoints.

This diagram shows how providers are nested in the root layout.

Backend Architecture

The backend is a Node.js server built with Express, enhanced with tRPC for creating a type-safe API layer.

API Layer (Express & tRPC)

The server uses Express to handle HTTP requests. tRPC is mounted on top of Express to define API procedures.

• Server Entrypoint: The dev:server script in package.json points to server/_core/index.ts as the entry point, which sets up the Express app and tRPC router.
• API Routers: The main application router is defined in server/routers.ts, which would typically combine smaller, feature-specific routers.
• Type Safety: tRPC allows the frontend to call backend functions directly with full TypeScript type safety, eliminating the need for separate API specification files.

Sources: package.json:6, server/_core/oauth.ts:80

Authentication (OAuth)

Authentication is handled via an OAuth 2.0 flow. The server provides endpoints to handle the OAuth callback, exchange the authorization code for a session token, and manage the user session.

The following endpoints are key to the authentication system:

Method	Endpoint	Description
GET	/api/oauth/callback	Handles the OAuth callback from the provider for web clients, sets a session cookie, and redirects.
GET	/api/oauth/mobile	Handles the OAuth callback for mobile clients, returning a session token and user data as JSON.
GET	/api/auth/me	Returns the currently authenticated user's information, authenticated via cookie (web) or Bearer token (native).
POST	/api/auth/logout	Clears the session cookie to log the user out.
POST	/api/auth/session	Establishes a session cookie from a Bearer token, used for iframe previews.

Sources: server/_core/oauth.ts:80, 107, 137, 144, 156

The mobile authentication flow involves the client opening a web browser for login, receiving a code, and exchanging it with the backend for a session token.

Database Schema

The application uses a MySQL database, with Drizzle ORM managing the schema and queries. The primary table is users.

This Entity-Relationship diagram shows the structure of the users table.

The table stores essential user information, including a unique openId from the authentication provider, personal details, and timestamps for tracking activity.

LLM Integration

The backend integrates with the Manus Forge API to perform Large Language Model (LLM) operations. The invokeLLM function in server/_core/llm.ts is a wrapper that constructs and sends requests to the /v1/chat/completions endpoint.

• Function: invokeLLM(params: InvokeParams)
• Payload: Constructs a JSON payload including the model (gemini-2.5-flash), messages, and other parameters.
• Authentication: It authenticates with the Forge API using a Bearer token from the FORGE_API_KEY environment variable.

Sources: server/_core/llm.ts:258-305