todo-real-time is a realtime & offline-first, todo mobile app for android and iOS built using react-native & firebase.
It syncs data in real-time across multiple devices, so you can "jump" between devices
without worrying about syncing.
Syncing is enabled through gRPC remote procedure calls and bi-directional streaming over the database connection under the hood
todo-fire is made with high availability and high consistency, It's made possible to achieve both through the underlying Spanner DB see paper...
todo-fire has authentication built-in through the Firebase email-password method.
- Displays a list of tasks
- Includes a form or input field where users can add a new task to the list
- Each task has a title, due_at(optional), note(optional) and status (completed or not)
- Users should be able to mark tasks as completed or uncompleted by tapping on them
- Users should be able to delete tasks from the list
- Highly Available - Available both online and offline (reads and writes are both supported through Firestore db)
- Highly Consistent - When online, this is achieved by real-time syncing eliminating eventual consistency
- Fault Tolerant - Writes are appended to Firestore's commit log on disk and are not lost if the app crashes or the device runs out of power
todo-fire can be installed as follows:
-
Development Environment Setup
You will require your environment set for mobile development(skip if already done), please setup instructions.
-
Install, Build, Run
To start using todo-fire and build it locally:
Run the following command to install the app and link dependencies from the root directory
> npm install > npm run postinstall
> npm run ios
For Android: populate
sdk.dir
andcmake.dir
in /android/local.properties (create a file) to contain the Android SDK pathsdk.dir=/Users/{UserName}/Library/Android/sdk cmake.dir=/Users/{UserName}/Library/Android/Sdk/cmake/3.18.1
> npm run android
Packages | Description |
---|---|
react-native | Cross-Platform native framework |
expo | react-native supporting framework ecosystem |
react-navigation | Native routing & navigation |
react-native-paper | Cross-Platform Material Design framework. |
react-native-firebase | Firebase impl for using auth & firestore |
valtio | Proxy based State Management |
typescript | Adding type-safety to vanilla JS |