Getting Started
Relevant source files
The following files were used as context for generating this wiki page:This guide provides a technical overview for setting up and running the "Strategic Legal Analyzer AI" mobile application. The project is a cross-platform mobile app built with Expo and React Native, designed to offer AI-powered legal document analysis, generation, and chat functionalities. It features a client-server architecture with the mobile app as the frontend and an Express.js server as the backend.
The application's core features include analyzing documents for key clauses and risks, generating legal documents from templates, and interacting with an AI assistant. This document covers the project's structure, dependencies, setup process, and development scripts to help developers get started quickly.
Sources: todo.md, design.md, package.json
Project Structure & Key Technologies
The project is a monorepo-like structure containing both the Expo mobile application and a backend server. It leverages a modern stack for cross-platform development.
The following diagram illustrates the key technologies used in this project.
Sources: package.json:17-73, babel.config.js:7
Key Dependencies
| Dependency | Role |
|---|---|
expo | Core framework for building the universal React application. |
react-native | Foundation for building native UIs with React. |
expo-router | File-based routing for the Expo app. |
nativewind | Tailwind CSS for React Native. |
express | Backend web server framework. |
@trpc/server | For building typesafe APIs between the server and client. |
drizzle-orm | TypeScript ORM for database interaction. |
mysql2 | MySQL client for Node.js. |
@tanstack/react-query | Data-fetching and state management library. |
tsx | Used for running the TypeScript-based development server. |
esbuild | For building the production server code. |
Sources: package.json:17-73
Initial Setup & Configuration
Before running the application, you must configure the necessary environment variables. These are crucial for services like authentication (OAuth) and API communication.
Environment Variables
The application uses environment variables defined in constants/oauth.ts. These variables connect the app to backend services.
| Variable | Description | Example File |
|---|---|---|
EXPO_PUBLIC_OAUTH_PORTAL_URL | URL for the main OAuth authentication portal. | constants/oauth.ts:10 |
EXPO_PUBLIC_OAUTH_SERVER_URL | URL for the OAuth server handling token exchange. | constants/oauth.ts:11 |
EXPO_PUBLIC_APP_ID | The unique application identifier for OAuth. | constants/oauth.ts:12 |
EXPO_PUBLIC_API_BASE_URL | The base URL for the backend API server. | constants/oauth.ts:15 |
The backend server also requires environment variables for connecting to services like the database and the LLM provider, as seen in files like server/_core/llm.ts and server/storage.ts.
Sources: constants/oauth.ts:10-15, server/_core/llm.ts:190, server/storage.ts:9
Running the Project
The package.json file contains several scripts for development, building, and testing.
Development
To start the development environment, which includes both the backend server and the Expo Metro bundler, run the following command:
pnpm dev
This command uses concurrently to run two scripts simultaneously:
dev:server: Starts the backend Express server in watch mode usingtsx.dev:metro: Starts the Expo development server for the mobile app.
The following diagram shows the startup flow.
Sources: package.json:6-8
Available Scripts
| Script | Description |
|---|---|
dev | Starts both the backend server and the Expo Metro bundler for development. |
dev:server | Starts the backend API server in watch mode. |
dev:metro | Starts the Expo Metro bundler for the frontend app. |
build | Builds the production-ready backend server code using esbuild. |
start | Starts the production backend server from the dist directory. |
check | Runs the TypeScript compiler to check for type errors. |
lint | Lints the codebase using expo lint. |
format | Formats all files using Prettier. |
test | Runs tests using Vitest. |
db:push | Generates and applies database migrations using drizzle-kit. |
android | Starts the app on a connected Android device or emulator. |
ios | Starts the app on an iOS simulator. |
Sources: package.json:6-16
Project Reset
The repository includes a utility script to reset the project to a clean state. This is useful for developers who want to start from a minimal template rather than the full example application.
To run the script:
node scripts/reset-project.js
The script will prompt the user whether to move the existing application code (app, components, hooks, etc.) to an app-example directory for reference or to delete it permanently. It then creates a new, minimal /app directory with a basic index.tsx and _layout.tsx.
This diagram illustrates the reset process.
Sources: scripts/reset-project.js
Core Application Architecture
The application's entry point and global layout are defined in app/_layout.tsx. This file is responsible for setting up all the necessary context providers that wrap the entire application.
Provider Hierarchy
The root layout wraps all screens with several providers to manage state, theming, language, and API data.
This diagram shows the nesting of providers in the root layout.
LanguageProvider: Manages the application's current language (EN, ES, DE).trpc.Provider&QueryClientProvider: Configure tRPC and TanStack Query for typesafe API communication and server state management.SafeAreaProvider: Handles safe areas for notched devices.ThemeProvider: Manages the application's theme (light/dark mode).Stack: The root navigator fromexpo-router.
Sources: app/_layout.tsx:39-99
Manus Runtime Integration
The application initializes ManusRuntime in the root layout. This module is designed for communication between the Expo web app and a parent container (e.g., an iframe), primarily to signal that the app is ready and to subscribe to safe area insets provided by the parent.
Sources: app/_layout.tsx:24-26, lib/_core/manus-runtime.ts:79-84
Feature Overview
The application is structured around a tab-based navigation system with several key features.
| Feature / Screen | Purpose | Source File |
|---|---|---|
| Home | The main entry point with quick access to core features like "Analyze Document", "Generate Document", and "Chat with AI". | app/(tabs)/index.tsx |
| Analyze Document | Allows users to upload a document (or take a photo) for AI-powered analysis of clauses, risks, and recommendations. | app/(tabs)/analyze.tsx |
| Generate Document | Provides a form-based interface to generate legal documents like contracts, lawsuits, and reports. | app/(tabs)/generate.tsx |
| Documents | A library to view, search, and manage all user-generated or analyzed documents. | app/(tabs)/documents.tsx |
| Settings | Allows users to manage preferences such as language, theme (light/dark mode), and account settings. | design.md:94-104 |
| AI Chat | An interface for having an intelligent conversation about the contents of a legal document. | design.md:78-89 |
Sources: todo.md, design.md, app/(tabs)/index.tsx, app/(tabs)/analyze.tsx, app/(tabs)/generate.tsx, app/(tabs)/documents.tsx