Code Structure

Relevant source files

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

• app/_layout.tsx
• app/(tabs)/index.tsx
• app/(tabs)/analyze.tsx
• app/(tabs)/generate.tsx
• app/(tabs)/documents.tsx
• server/_core/index.ts
• server/_core/llm.ts
• server/_core/oauth.ts
• server/storage.ts
• lib/_core/api.ts
• lib/_core/manus-runtime.ts
• lib/_core/theme.ts
• lib/translations.ts
• drizzle/meta/0000_snapshot.json
• package.json
• tailwind.config.js
• todo.md
• design.md

This document provides a technical overview of the code structure for the Strategic Legal Analyzer AI mobile app. The project is a monorepo containing a React Native (Expo) mobile application for the frontend and an Express.js server for the backend. This structure facilitates code sharing and streamlined development workflows.

The architecture is designed for a client-server model where the mobile app communicates with the backend for data processing, AI features, and user authentication. Key technologies include Expo Router for navigation, NativeWind for styling, tRPC for API communication, and Drizzle ORM for database interactions.

Monorepo Directory Structure

The project is organized into several top-level directories, each with a distinct responsibility. This separation of concerns is crucial for maintaining a clean and scalable codebase.

The following diagram illustrates the high-level directory structure.

This diagram shows the main directories at the root of the project.
Sources: package.json, app/ , server/ , lib/_core/ , drizzle/meta/0000_snapshot.json

Directory	Description
app/	Contains the frontend React Native (Expo) application code, including screens, components, and navigation logic.
server/	Contains the backend Express.js server code, including API endpoints, database logic, and AI service integrations.
lib/	Holds shared code used exclusively by the frontend application, such as API clients, context providers, and utility functions.
drizzle/	Manages database schema definitions and migration files for Drizzle ORM.
scripts/	Includes utility scripts for project management, such as reset-project.js.
package.json	Defines project dependencies, scripts, and monorepo configuration.

Sources: app/ , server/ , lib/_core/ , drizzle/meta/0000_snapshot.json, scripts/reset-project.js, package.json

Frontend Architecture (app & lib)

The frontend is a React Native application built with Expo. It uses Expo Router for file-based navigation and NativeWind for styling.

Navigation

Navigation is managed by Expo Router, which uses the directory structure within app/ to define routes. The primary navigation is a tab bar defined in app/(tabs)/.

This diagram shows the file-based routing structure for the main tab navigation.
Sources: app/_layout.tsx:43-46, app/(tabs)/index.tsx, app/(tabs)/documents.tsx, app/(tabs)/analyze.tsx, app/(tabs)/generate.tsx

The root layout file app/_layout.tsx is responsible for setting up global providers for the entire application. This includes:

• ThemeProvider: Manages light/dark mode.
• LanguageProvider: Handles internationalization (i18n).
• QueryClientProvider: For React Query, used for data fetching and caching.
• trpc.Provider: The tRPC client for type-safe API communication with the backend.
• SafeAreaProvider: Manages safe area insets for different devices.

Sources: app/_layout.tsx:68-81

State Management & Data Fetching

• React Query (@tanstack/react-query): Used for server state management, caching, and background data synchronization. The client is configured in app/_layout.tsx to disable refetchOnWindowFocus and retry failed requests once.
• tRPC (@trpc/client): Provides a type-safe API layer between the client and server. The tRPC client is created in lib/trpc.ts (inferred) and provided to the app in app/_layout.tsx.
• React Context: Used for global UI state like the current theme (ThemeProvider) and language (LanguageProvider).

Sources: app/_layout.tsx:55-67, lib/_core/api.ts

UI and Styling

• NativeWind: A utility-first styling solution that uses Tailwind CSS concepts for React Native.
• tailwind.config.js: Defines the color palette, fonts, and other design tokens. It pulls colors from theme.config.js and sets up light and dark variants.
• lib/_core/theme.ts: Programmatically builds the theme color palettes (SchemeColors) for both light and dark modes from theme.config.js. This provides a structured way to access theme colors in JavaScript.
• Internationalization: The app supports English, Spanish, and German. Translations are stored in a single object in lib/translations.ts and accessed via the useLanguage hook and getTranslation function.

Sources: tailwind.config.js, lib/_core/theme.ts, lib/translations.ts

Iframe Communication (manus-runtime)

The file lib/_core/manus-runtime.ts implements a communication layer for when the Expo web app runs inside an iframe. This is primarily used in a development or preview environment.

• initManusRuntime(): Sends an appDevServerReady message to the parent window.
• subscribeSafeAreaInsets(): Allows the app to receive safe area inset values from the parent container, ensuring the UI adapts correctly when embedded.

Sources: lib/_core/manus-runtime.ts:80-86, app/_layout.tsx:49-53

Backend Architecture (server)

The backend is an Express.js server written in TypeScript. It handles API requests, authentication, database operations, and integration with third-party services like the LLM.

API Endpoints & Authentication

The server exposes a RESTful API. Authentication is handled via OAuth 2.0, supporting both web (cookie-based) and mobile (token-based) clients.

The following sequence diagram illustrates the mobile OAuth flow.

This diagram shows the process of exchanging an OAuth code for a session token.
Sources: server/_core/oauth.ts:108-129, lib/_core/api.ts:121-139

Key authentication endpoints are defined in server/_core/oauth.ts:

Method	Endpoint	Description
GET	/api/oauth/callback	Web OAuth callback. Exchanges code for a token and sets a session cookie.
GET	/api/oauth/mobile	Mobile OAuth callback. Exchanges code for a token and returns a session token (app_session_id) in the JSON response.
POST	/api/auth/logout	Clears the session cookie to log the user out.
GET	/api/auth/me	Retrieves the currently authenticated user's profile, works with both cookie and Bearer token.
POST	/api/auth/session	Establishes a session cookie from a provided Bearer token. Used for iframe previews.

Sources: server/_core/oauth.ts

Database Layer

The project uses Drizzle ORM with a MySQL database to manage user data. The schema is defined in code and synchronized with the database using Drizzle Kit.

User Schema

The users table stores user profile information.

This ER diagram shows the structure of the users table.
Sources: drizzle/meta/0000_snapshot.json:6-75

Column	Type	Description
id	int	Auto-incrementing primary key.
openId	varchar(64)	Unique identifier from the OAuth provider.
name	text	User's full name.
email	varchar(320)	User's email address.
loginMethod	varchar(64)	The method used for login (e.g., 'google').
role	enum	User role, defaults to 'user'.
createdAt	timestamp	Timestamp of user creation.
updatedAt	timestamp	Timestamp of the last update.
lastSignedIn	timestamp	Timestamp of the last sign-in.

Sources: drizzle/meta/0000_snapshot.json:9-66

AI & Storage Integration

• LLM Service (server/_core/llm.ts): This module provides a wrapper function invokeLLM to communicate with a Large Language Model (LLM) service (e.g., Gemini via Manus Forge). It handles message formatting, tool usage, and response parsing. The function constructs a request to the v1/chat/completions endpoint.
• Storage Service (server/storage.ts): This module abstracts file storage operations (storagePut, storageGet). It interacts with a storage proxy, likely for services like S3, by constructing pre-signed URLs for uploads and downloads. It requires BUILT_IN_FORGE_API_URL and BUILT_IN_FORGE_API_KEY environment variables.

Sources: server/_core/llm.ts:241-285, server/storage.ts:10-17, 72-91

Build and Development

The package.json file contains scripts to manage the development and build lifecycle of both the app and the server.

• dev: Runs the backend server and the Expo Metro bundler concurrently for a unified development experience.
• dev:server: Watches for changes and restarts the Express server using tsx.
• dev:metro: Starts the Expo development server for the mobile app.
• db:push: Generates and applies database migrations using drizzle-kit.
• build: Compiles the TypeScript server code into JavaScript for production using esbuild.
• start: Runs the compiled production server.

Sources: package.json:6-12