Project Configuration

The project configuration for the aidoit4u-mobile-app is managed through a series of dedicated files at the root of the repository. These files define everything from the application's identity and branding to the build process, styling, and development scripts. The setup leverages the Expo framework, providing a robust foundation for a React Native application, which is then extended with tools like NativeWind for styling, tRPC for API communication, and Drizzle for database interactions.

This document provides a detailed breakdown of each major configuration area, explaining the purpose and content of the key files. The configuration is designed to be modular, allowing developers to easily manage different aspects of the application's behavior and appearance across multiple platforms (iOS, Android, and Web).

Application Identity & Metadata

The core identity, branding, and platform-specific metadata of the application are defined in app.config.ts. This file exports an Expo configuration object that controls fundamental aspects of the app.

Sources: app.config.ts

Key Properties

The configuration is driven by an env object which centralizes branding and identification details. A notable feature is the programmatic generation of the bundle ID and URL scheme from a base string and a timestamp, ensuring uniqueness.

Sources: app.config.ts:8-28

Expo Plugins

The application utilizes several Expo plugins to integrate native functionality. These are configured within the plugins array in app.config.ts.

// app.config.ts:60-84
plugins: [
  "expo-router",
  [
    "expo-audio",
    {
      microphonePermission: "Allow $(PRODUCT_NAME) to access your microphone.",
    },
  ],
  [
    "expo-video",
    {
      supportsBackgroundPlayback: true,
      supportsPictureInPicture: true,
    },
  ],
  "expo-splash-screen",
  "expo-build-properties",
],

Sources: app.config.ts:60-84

Build & Bundling

The project's build and bundling process is handled by a combination of Metro, Babel, and TypeScript, configured to work with Expo and NativeWind.

Metro Bundler

Metro is the JavaScript bundler for React Native. The configuration in metro.config.js integrates NativeWind for Just-In-Time (JIT) compilation of Tailwind CSS classes into React Native stylesheets.

The forceWriteFileSystem: true option is enabled to resolve styling issues on iOS during development by writing CSS to the file system instead of using virtual modules.

// metro.config.js:6-10
module.exports = withNativeWind(config, {
  input: "./global.css",
  // This fixes iOS styling issues in development mode
  forceWriteFileSystem: true,
});

Sources: metro.config.js:6-10

Babel Transpiler

Babel is used to transpile modern JavaScript and JSX into a format compatible with the runtime environment. The babel.config.js file configures presets for Expo and NativeWind, and includes the react-native-worklets/plugin to enable the use of worklets.

// babel.config.js:6-9
return {
  presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
  plugins,
};

Sources: babel.config.js:6-9

The following diagram illustrates the relationship between the main build configuration files.

Sources: babel.config.js, metro.config.js, tailwind.config.js

Styling & Theming

Styling is managed by NativeWind, which allows the use of Tailwind CSS classes directly in React Native components.

Tailwind CSS Configuration

tailwind.config.js is the central file for styling configuration. It defines:

• Dark Mode: Enabled via the class strategy.
• Content Scanning: Specifies which files to scan for Tailwind classes.
• Theme Extension: Extends the default theme with custom colors defined in theme.config.js.
• Custom Variants: Adds light and dark variants for explicit theme-based styling.

The color scheme defined in design.md is implemented through this configuration, providing a consistent look and feel for both light and dark modes.

Sources: tailwind.config.js, design.md:10-20

The configuration dynamically creates CSS variables for each color, allowing them to be used in the application.

// tailwind.config.js:5-13
const tailwindColors = Object.fromEntries(
  Object.entries(themeColors).map(([name, swatch]) => [
    name,
    {
      DEFAULT: `var(--color-${name})`,
      light: swatch.light,
      dark: swatch.dark,
    },
  ]),
);

Sources: tailwind.config.js:5-13

Scripts & Dependencies

The package.json file serves as the manifest for the project, defining its scripts, dependencies, and other metadata.

Project Scripts

A set of npm scripts is provided to streamline common development tasks.

Sources: package.json:5-17

Key Dependencies

The project relies on a modern stack for both frontend and backend development.

Sources: package.json:19-58

Internationalization (i18n)

The application supports multiple languages through a structured translation system defined in lib/translations.ts.

Language Configuration

• Supported Languages: English (EN), Spanish (ES), and German (DE).
• Structure: A main translations object contains nested objects for each language, which in turn hold key-value pairs for all translatable strings.
• Utility Function: A getTranslation function retrieves the correct string for the active language, falling back to the key itself if a translation is missing.

// lib/translations.ts:1-3
export type Language = "ES" | "EN" | "DE";

export const translations = {
  ES: {
    home: "Inicio",
    // ...
  },
  EN: {
    home: "Home",
    // ...
  },
  DE: {
    home: "Startseite",
    // ...
  }
};

Sources: lib/translations.ts:1-344

Utility Scripts

The project includes utility scripts to aid in development, such as resetting the project to a clean state.

Project Reset Script

The scripts/reset-project.js script provides a way to reset the application to a blank template. It prompts the user whether to back up existing directories (app, components, etc.) into an app-example folder or delete them permanently. It then creates a new minimal app directory with basic index.tsx and _layout.tsx files.

This flow is illustrated below:

Sources: scripts/reset-project.js