Skip to main content

Structure

source/
├── app/                  # Main application source code
│   ├── api/             # API client and services
│   │   ├── index.ts     # Api singleton with navigator, http, storage
│   │   └── restapi.ts   # REST API client
│   │
│   ├── assets/          # Static resources
│   │   ├── fonts/       # Custom fonts
│   │   ├── images/      # Image assets
│   │   ├── localization/ # Translation files
│   │   └── resource.json # Asset resource mapping
│   │
│   ├── components/      # Reusable UI components (47 components)
│   │   ├── BookingHistory/
│   │   ├── BookingTime/
│   │   ├── BusItem/
│   │   ├── Card/
│   │   ├── DatePicker/
│   │   ├── EventCard/
│   │   ├── FlightItem/
│   │   ├── HotelItem/
│   │   ├── ImageSlider/
│   │   ├── PostItem/
│   │   ├── Rating/
│   │   ├── TextInput/
│   │   ├── TourItem/
│   │   └── ... (and more)
│   │
│   ├── configs/         # Application configuration
│   │   ├── index.ts     # Settings (app version, domain, languages, currencies, themes)
│   │   └── theme.ts     # Theme configurations and color schemes
│   │
│   ├── data/           # Mock/static data for development
│   │   ├── bookingHistory.js
│   │   ├── bus.js
│   │   ├── car.js
│   │   ├── cruise.js
│   │   ├── event.js
│   │   ├── flight.js
│   │   ├── hotel.js
│   │   ├── language.js
│   │   ├── tour.js
│   │   └── ... (and more)
│   │
│   ├── developer/      # Developer tools and utilities
│   │
│   ├── models+types/   # TypeScript type definitions and models
│   │   ├── booking.ts
│   │   ├── bus.ts
│   │   ├── car.ts
│   │   ├── cruise.ts
│   │   ├── event.ts
│   │   ├── flight.ts
│   │   ├── hotel.ts
│   │   ├── tour.ts
│   │   ├── user.ts
│   │   └── ... (and more)
│   │
│   ├── redux/          # State management
│   │   ├── actions/    # Redux action creators
│   │   ├── reducers/   # Redux reducers
│   │   ├── sagas/      # Redux saga middleware for side effects
│   │   ├── selectors/  # Redux selectors
│   │   ├── store/      # Redux store configuration
│   │   └── index.ts    # Redux exports
│   │
│   ├── screens/        # Screen components (89 screens)
│   │   ├── Home/
│   │   ├── Booking/
│   │   ├── Messenger/
│   │   ├── Post/
│   │   ├── Account/
│   │   ├── Authentication/
│   │   ├── SignIn/
│   │   ├── SignUp/
│   │   ├── Hotel/
│   │   ├── HotelDetail/
│   │   ├── Flight/
│   │   ├── FlightSearch/
│   │   ├── Bus/
│   │   ├── BusSearch/
│   │   ├── Tour/
│   │   ├── TourDetail/
│   │   ├── Cruise/
│   │   ├── Event/
│   │   ├── Car/
│   │   ├── Profile/
│   │   ├── Setting/
│   │   └── ... (and more)
│   │
│   ├── utils/          # Utility functions and helpers
│   │   └── index.ts
│   │
│   ├── container.tsx   # Root container with theme, localization, navigation setup
│   ├── main.tsx        # Main tab navigation (Home, Booking, Messenger, Post, Account)
│   └── index.tsx       # App entry with Redux Provider and PersistGate
│
├── index.js            # React Native entry point
├── app.json            # App configuration
├── package.json        # Dependencies and scripts
├── tsconfig.json       # TypeScript configuration
├── babel.config.js     # Babel configuration
├── metro.config.js     # Metro bundler configuration
└── jest.config.js      # Jest test configuration

Application Architecture​

Entry Point Flow​

  1. index.js - Registers the app with React Native's AppRegistry
  2. app/index.tsx - Wraps app with Redux Provider and PersistGate
  3. app/container.tsx - Sets up navigation, theme, and localization
  4. app/main.tsx - Defines bottom tab navigation structure

The app uses @passionui/react-native-foundation for navigation, which provides:

  • NavigationContainer - Root navigation wrapper
  • Navigator - Navigation helper with refs for programmatic navigation
  • BottomTab - Bottom tab navigation component
  • Screen - Screen wrapper component

Main tabs:

  1. Home - Landing and dashboard
  2. Booking - Booking history and management
  3. Messenger - Messages and chat
  4. Post - News and blog posts
  5. Account - User profile and settings

State Management (Redux)​

  • Actions - Define action types and creators
  • Reducers - Handle state updates
  • Sagas - Handle async operations and side effects
  • Selectors - Extract and compute derived state
  • Store - Configure store with middleware (saga, logger, persist)

API Layer​

  • Api singleton provides:
    • navigator - Navigation helper for API-triggered navigation
    • http - REST API client
    • storage - AsyncStorage wrapper for local persistence

Theming & Localization​

  • Theme: Supports light/dark mode with customizable color schemes
  • Fonts: SFProText, Raleway, Poppins, Merriweather, Roboto
  • Languages: English, Vietnamese
  • Currencies: USD, VND, KWR