hossamnasser938/OnCare-Chat

A coding challenge aimed to build a minimal real-time chat app

OnCare Chat

App Architecture

• I'm adapting here a simple layered architecture consisting of 3 layers: UI, state & hooks, and data layer.
  • UI is the screens and components
  • State is implemented using Mobx MST. Inside this layer, there are a bunch of hooks to subscribe for changes on the Data Layer and call relevant actions from state models.
  • Data layer is implemented using Firebase. It depends on Firebase Auth and Firebase Realtime Database APIs.

UI Navigation Hierarchy

• The app navigation hierarchy starts with an App navigator that switches between Auth Navigator and Main Navigator based on user authentication state which is derived from State layer.
• The Auth Navigator is a simple stack navigator with Landing, Signin and Signup screens.
• The Main Navigator is a simple bottom tabs navigator with 2 nested navigators for tabs.
• The ChatRooms Navigator is a simple stack navigator with ChatRoomsList, ChatRoom, and CreateChatRoom screens.
• The Settings navigator is a simple stack navigator with only one screen Settings.

State

• The state layer consists of hooks and MST models.
• The hooks are only for subscription purpose and to leverage the React hooks unsubscribtion power.
• The MST models starte with RootStore that wraps everything.
• The AuthStore is all about maintaining user auth state.
• The UsersStore is about maintaining the users we fetch from data layer to be mapped as references into other models.
• The ChatRoomsStore is for maintaining the list of chat rooms.
• The ChatRoom is for maintaining the list of participants inside the room and the messages there.
• The Participant, Message, and Reader is for abstracting operations and computed properties of each.

Data Layer

• The Data Layer is a simple API for abstraction purpose that hides data operations inside. IT leverages Firebase Auth and Firebase Realtim Database capabilities to help building realtime features.