Skip to main content

Mobile Project Structure

Overview​

This documentation describes the standard structure of projects developed by the company, following an organized TypeScript architecture with clear separation of responsibilities.

It's important to note that this document reflects the most up-to-date version of the template, however older projects follow a very similar structure with minor organizational differences.

Directory Structure​

📁 src/​

Root directory of the application source code.

📁 app/​

Contains the main application resources:

  • 📁 assets/ - Static resources (images, icons, fonts)
  • 📁 forms/ - Components and logic related to forms
  • 📁 managers/ - Management classes and services
  • 📁 styles/ - Project styling related files (theme, colors, variants)
  • 📁 stylesheets/ - Component style configuration files
  • api.ts - API configurations
  • constants.ts - Application constants
  • deepLinks.ts - Deep links configuration
  • i18n.ts - Internationalization and translations
  • logger.ts - Logging system
  • navigation.ts - Navigation configuration
  • Settings.ts - Application settings
  • testers.ts - Testing utilities
  • index.ts - Main export file

📁 components/​

Reusable application components:

  • 📁 auth/ - Authentication components
  • 📁 camera/ - Camera-related components
  • 📁 chat/ - Chat/messaging components
  • 📁 examples/ - Example components
  • 📁 layout/ - Layout components
  • 📁 modals/ - Modal components
  • 📁 shared/ - Shared components
  • index.ts - Component exports

📁 hooks/​

Custom project hooks for reusable logic.

📁 scenes/​

Main application screens/pages:

  • 📁 Auth/ - Authentication screens
  • 📁 Chat/ - Chat screens
  • 📁 ComponentExamples/ - Component examples
  • 📁 CRUD/ - CRUD operation screens
  • 📁 Profile/ - User profile screens
  • Camera.tsx - Camera screen
  • NotFoundPage.tsx - 404 page
  • Playground.tsx - Testing environment
  • Navigation.tsx - Screen navigation configuration
  • index.tsx - Main file

📁 services/​

Application services:

  • 📁 analytics/ - Analytics services
  • 📁 api/ - API services
  • 📁 localNotifications/ - Local notifications
  • 📁 notifications/ - Notification system
  • index.ts - Service exports

📁 stores/​

Application state management.

📁 types/​

TypeScript type definitions for type safety.

📁 utils/​

Utilities and helper functions:

initialize.ts - Initialization functions​

Root.tsx - Application root component​

Organization Patterns​

1. Separation by Functionality​

  • Each main module has its own directory
  • Components are grouped by usage context

2. Index Files​

  • Each main directory has an index.ts to facilitate imports
  • Centralized exports

3. TypeScript Typing​

  • Dedicated types/ directory for type definitions
  • .tsx files for React components
  • .ts files for pure logic

Naming Conventions​

  • Directories: PascalCase for components/scenes, camelCase for utilities
  • Files:
    • React Components: PascalCase (e.g., Camera.tsx)
    • Utilities and configurations: camelCase (e.g., navigation.ts)
    • Configuration files: camelCase with appropriate extensions

Development Flow​

  1. Components are developed in components/ and organized by context
  2. Main screens are placed in scenes/ and utilize the components
  3. Services in services/ encapsulate business logic and communication
  4. Types are defined in types/ to ensure type safety
  5. Utilities in utils/ for reusable helper functions

This documentation should be updated as the project structure evolves.