alokinfilon/trackmate_frontend-

Purpose and Runtime

TrackMate is a React Native mobile travel assistant for destination discovery, trip/bookings tracking, photo-memory collections, and profile/settings management. JavaScript/JSX runs in the React Native runtime, bundled by Metro; native Android and iOS hosts embed the application. Key entry points: index.js, App.jsx, android/app/src/main/java/com/trackmate/MainApplication.kt, and ios/trackMate/AppDelegate.swift.

Application Composition

App.jsx is the top-level composition boundary, expected to install shared providers and navigation. Cross-cutting application state is separated into React contexts for theme, language, authentication, and notifications:

• src/context/AuthContext.js

• src/context/ThemeContext.js

• src/context/LanguageContext.js

• src/context/NotificationContext.js

Theme tokens and translations support dynamic appearance and localized UI at src/theme/theme.js and src/translations/index.js.

Navigation and Session Flow

Navigation is centralized under React Navigation. src/navigation/RootNavigator.jsx governs top-level route selection, including onboarding/authenticated boundaries; src/navigation/MainTabNavigator.jsx owns the primary post-login tab experience. Authentication UI flows through src/screens/login/index.jsx and src/screens/signup/index.jsx, with session/API interaction delegated to src/services/authService.js.

Domain State and Backend Boundary

Redux-style store slices model core client state for authentication, profile, and trips:

• src/store/index.js

• src/store/slices/authSlice.js

• src/store/slices/tripsSlice.js

Network access is intentionally behind the services layer: src/services/apiClient.js, src/services/httpService.js, and src/services/endpoints.js. Screens and hooks should consume this boundary rather than directly issuing HTTP requests. Local persistence is isolated in src/utils/storage.js.

Primary Product Flows

Home discovery presents categories, promotions, search, and destination cards, then routes into place detail and trip planning: src/screens/home/index.jsx, src/screens/place-detail/index.jsx. Trip lifecycle/dashboard presentation is handled in src/screens/dashboard/index.jsx and src/screens/dashboard/TripDashboardList.jsx.

Memory management is a self-contained feature area: src/screens/ImageUploadPage/index.jsx coordinates image upload, collections, collection detail, and an image-viewer modal. Its component decomposition provides a boundary for camera/gallery integration and trip-associated media:

• src/screens/ImageUploadPage/components/ImageUploadView/index.js

• src/screens/ImageUploadPage/components/CollectionsListView/index.js

• src/screens/ImageUploadPage/components/ImageViewerModal/index.js

Profile and Preference Subsystem

src/screens/profile/index.jsx is the settings hub, which routes to distinct preference/account surfaces. User-profile state is represented by src/store/slices/profileSlice.js; appearance and language settings connect to their corresponding providers. Account security, billing, notification settings, and travel preferences are organized beneath src/screens/profile/screens/.

Notifications and Native Infrastructure

Firebase Cloud Messaging is configured natively on Android through android/app/google-services.json and accessed from the JS service boundary via src/services/fcmService.js and src/services/notificationService.js. Android build/manifest integration resides at android/app/build.gradle and android/app/src/main/AndroidManifest.xml; iOS dependency/native project configuration resides at ios/Podfile and ios/trackMate.xcodeproj/project.pbxproj. Bundled fonts and image assets support the design system at assets/fonts, src/assets/images, and android/app/src/main/assets/fonts.