The core libraries that this app are built with are:

• react-native-maps for mapping
  • Note: Google maps is used for Android, whereas Apple Maps is used for iOS
• react navigation for navigation
• react-query for managing state of remote data
• mobx-react for managing all other shared state
• react-native-spokestack for for voice recognition

Overall project structure

Folders

• components -> contains visual react components, including "screen" components
• navigation -> contains react navigation navigator root components)
• hooks -> contains custom hooks
• stores -> contains mobx stores
• utils -> contains various helper methods and global members

Other

• globals.ts -> contains global constants, misc types, and helper functions

Components

The non-navigation visual components contained within the app:

• App.tsx -> app root
  • Atlas.tsx -> checks authentication state, directs user to appropriate screen
    • Auth -> StackNavigator containing login and register functionality
      • Intro -> Screen containing login and register buttons. Login will initiate a browser session through which the user will authenticate via oauth2-auth code flow. Register will initate the registration flow.
      • RegisterMain -> Container for registration flow in the registration steps folder listed in order below
      • RegistrationSteps -> Folder containing all components related to registration
        • RegisterCredentials -> Username and email
        • RegisterPassword -> Password
        • RegisterMeasurements -> Whether or not the user intends to use a sagitta right away, if yes then will ask user for height and weight
        • RegisterImage -> Profile pic upload and final submission
        • RegistrationResult -> Reports registration result
    • Feed -> Tab that shows a history of notifications, and other feed related items that may be added in the future
    • Map -> Contains all components related to the map screen, which allows users to interact with core mapping features (landmarks, places, routing)
      • MainMapComponent -> Folder containing the parent map component, its styles, and a hook that provides all state related to map
      • Panels -> Folder containing all panels used by the map tab
        • FilterPanel -> Component through which a user can toggle various filters for the displayed landmarks
        • AddLandmarkPanel -> Component through which a user can add a landmark
        • LandmarkDetailsPanel -> Component through which a user can update and delete landmarks
        • VoicePanel -> Component through which a user can perform various actions through voice recognition
    • Profile -> Screen through which the user can manage their account information
      • ProfileSections -> Components for the various profile sections on the main screen
      • ProfileHeader -> Component that displays the main profile info at the top of the screen
    • PasswordForm -> Component that contains a validated password form. Used in Registration and Profile
    • PhotoPicker -> Component that provides access to the device's camera and library features. Used in Registration and Profile

Navigation

• AuthorizedNavigator -> Contains a tabs navigator for the components that an authenticated user has access to
• UnauthorizedNavigator -> Contains a stack navigator for the components that an unauthenticated user has access to

Stores

• AuthStore -> A mobx store that provides observable properties for key auth information, such as access token, id token, notification token, and refresh token.

Hooks

This app almost exclusively uses functional components, therefore it makes use of hooks. Most of the hooks are bundles of react-query logic for an associated data model:

• useAuth -> Contains helper methods for managing authentication state
• useLandmarks -> Contains queries and mutations for interacting with landmarks
• useProfile -> * * * * * * * base user data
• useComments -> * * * * * * * comments
• useComments -> * * * * * * * places