Architecture and Setup - PlugImt/transat-app GitHub Wiki

Architecture & Setup

🏗️ Project Architecture

Transat 2.0 is built using modern React Native technologies with a focus on performance, maintainability, and developer experience.

Technology Stack

  • Framework: React Native 0.79.2 with React 19.0.0
  • Build Tool: Expo SDK 53 with EAS Build
  • Routing: Expo Router 5.0
  • Styling: NativeWind 4.1 (Tailwind CSS for React Native)
  • State Management: Jotai 2.12
  • Data Fetching: TanStack Query (React Query) 5.66
  • Internationalization: i18next + react-i18next
  • UI Components: Custom components with nativecn-ui
  • Animations: React Native Reanimated 3.17 + Lottie
  • Forms: React Hook Form 7.54 with Zod validation
  • HTTP Client: Axios 1.7.9
  • Development Tools: TypeScript, Biome (linting & formatting)
  • Monitoring: Sentry for error tracking

📁 Project Structure

Transat_2.0/
├── src/
│   ├── app/                    # Expo Router app directory
│   │   ├── navigation/         # Navigation components
│   │   ├── screens/           # Screen components
│   │   │   ├── account/       # Account management screens
│   │   │   ├── auth/          # Authentication screens
│   │   │   ├── games/         # Games and entertainment
│   │   │   └── services/      # Campus services screens
│   │   ├── _layout.tsx        # Root layout
│   │   ├── index.tsx          # Entry point
│   │   └── global.css         # Global styles
│   ├── components/            # Reusable UI components
│   │   ├── animations/        # Animation components
│   │   ├── auth/             # Authentication-specific components
│   │   ├── common/           # Generic reusable components
│   │   ├── custom/           # Custom app-specific components
│   │   │   ├── card/         # Card components
│   │   │   └── widget/       # Home screen widgets
│   │   ├── navigation/       # Navigation-related components
│   │   └── Skeleton/         # Loading skeleton components
│   ├── contexts/             # React contexts
│   ├── hooks/                # Custom React hooks
│   │   ├── account/          # Account management hooks
│   │   └── auth/             # Authentication hooks
│   ├── lib/                  # Utility libraries and configurations
│   ├── navigation/           # Navigation configuration
│   ├── services/             # External services integration
│   │   ├── notifications/    # Push notifications
│   │   └── storage/          # Local storage management
│   ├── themes/               # Theme configuration
│   ├── types/                # TypeScript type definitions
│   └── i18n.ts              # Internationalization setup
├── assets/                   # Static assets
│   ├── animations/           # Lottie animations
│   ├── fonts/               # Custom fonts
│   ├── images/              # Images and icons
│   │   └── Logos/           # Logo assets
│   └── sounds/              # Audio files
├── locales/                 # Translation files
│   ├── en/                  # English translations
│   ├── fr/                  # French translations
│   ├── es/                  # Spanish translations
│   ├── de/                  # German translations
│   ├── pt/                  # Portuguese translations
│   └── zh/                  # Chinese translations
└── [config files]          # Configuration files

🛠️ Development Environment Setup

Prerequisites

  1. Node.js (v18 or later)
  2. npm or yarn
  3. Git
  4. Expo CLI (v6 or later)
  5. Expo Go app on your mobile device (for development)

Installation Steps

  1. Clone the repository
git clone https://github.com/PlugImt/Transat.git
cd Transat
  1. Install dependencies
npm install --legacy-peer-deps
  1. Environment Setup
# Copy environment file
cp .env.example .env

# Configure your environment variables
# Edit .env with your specific configuration
  1. Start the development server
npx expo start --tunnel --clear

Key Configuration Files

package.json Scripts

  • start: Start development server with dev client
  • android: Run on Android device/emulator
  • ios: Run on iOS device/simulator
  • web: Run on web browser
  • test: Run Jest tests
  • lint: Run Biome linting
  • format: Format code with Biome

app.json Configuration

  • App Name: Transat 2.0
  • Bundle ID: fr.resel.transat (iOS), com.yohann69.transat2_0 (Android)
  • Expo Router: Enabled with typed routes
  • Plugins: Notifications, Image Picker, Sentry, Localization

Build Configuration (eas.json)

{
  "cli": {
    "version": ">= 6.1.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

🔧 Dependencies Overview

Core Dependencies

  • expo: Core Expo SDK functionality
  • react-native: React Native framework
  • expo-router: File-based routing system
  • @tanstack/react-query: Server state management
  • jotai: Atomic state management
  • react-hook-form: Form handling
  • zod: Schema validation

UI & Styling

  • nativewind: Tailwind CSS for React Native
  • nativecn-ui: UI component library
  • react-native-reanimated: Advanced animations
  • lottie-react-native: Lottie animations
  • lucide-react-native: Icon library

Platform Features

  • expo-notifications: Push notifications
  • expo-image-picker: Image selection
  • expo-localization: Internationalization
  • expo-haptics: Haptic feedback
  • expo-av: Audio/Video playback

Development Tools

  • @biomejs/biome: Linting and formatting
  • typescript: Type checking
  • @sentry/react-native: Error monitoring

🎯 Architecture Patterns

State Management Strategy

  1. Server State: TanStack Query for API data
  2. Client State: Jotai atoms for UI state
  3. Form State: React Hook Form for form management
  4. Navigation State: Expo Router built-in state

Component Architecture

  • Atomic Design: Components organized by complexity
  • Compound Components: Complex UI patterns
  • Render Props: Flexible component composition
  • Custom Hooks: Reusable logic extraction

Data Flow

API ← TanStack Query ← Components ← Jotai Atoms
                   ↓
              Local Storage ← AsyncStorage

🚀 Getting Started Checklist

  • Install Node.js and npm
  • Clone the repository
  • Install dependencies
  • Copy and configure .env file
  • Install Expo Go on mobile device
  • Start development server
  • Scan QR code with Expo Go
  • Verify app loads successfully

Next Steps: Once your environment is set up, explore the User Interface & Design documentation to understand the component system.