Lifetrackr is a cross-platform mobile app created using React Native framework. The goal of this app is to offer functionality that aids in the process of taking care of plants and animals. The app will allow the addition of companions (a plant or animal), with any number of events which represent the tasks linked to a companion to keep it alive and healthy.
Install the below tools/packages
| Serial No | Software | Version | Serial No |
|---|---|---|---|
| 1 | Node.js | >= 6.9.1 | Install Node.js |
| 2 | npm | >= 3.10.8 | Install NPM |
| 3 | react-native | >= 0.51.0 | Install react-native |
| 4 | react-native-cli | >= 2.0.1 | Install react-native-cli |
| 5 | Expo | >= 47.1.1 | Install Expo |
Install Lifetrackr with npm
System setup
- Clone the repo with
git clone [REPO_URL] - Switch to the project's root directory in terminal
- Install the dependencies by running
npm install - Once, 'npm install' is completed, start the expo and react-native server by running
expo start - If it shows a QR code on the terminal as a result of 'expo start' command, then you are good to go!
Ignore the first step on 'Mobile setup' instructions given below if you already have 'Expo' app installed on your phone.
Mobile setup
- Install 'Expo' application on your android/iOS device. You can find the links to Android and iOS apps here.
- Scan the QR code shown on the terminal.
- Once the QR code is successfully scanned, it will take few seconds to load and render the app.
- redux-saga as a state manager.
- axios for networking (HTTP Requests).
- react-navigation navigation library.
- expo-secure-store as secure storage solution
- MaterialDesignIcons as icons package
- formik for creating and handling input forms
- moment as date and time formatter
- yup for validating data in text input fields
GET /api/users
| Parameter | Type | Description |
|---|---|---|
- |
- |
Get a list of all users (no params required) |
POST users/companions/${id}/
| Parameter | Type | Description |
|---|---|---|
companion id |
integer |
Required. Id of companion to modify |
GET companions/event/last_complete/{event_id}/
| Parameter | Type | Description |
|---|---|---|
event id |
integer |
Required. Id of event to fetch |
Once the components are defined, they are tied to the management of information through the application. For this, Redux is implemented with the store-reducer-action structure as usual, however, not only the data is handled through the actions but the success and error responses are also defined by the same form.
Root Saga files and API connection handler
To keep the networking layer simple, we use Axios dependency to make HTTP requests in the files in "requests" folder. Files in "handlers" folders uses interceptors to define common side effects for the responses.
When you need communication with a service you have to create a function to manage the operation and grouping according to the kind of reducers inside a RootSaga.js file.
While the data transfer between the API and the app is working you must use the success and error actions that help you to catch the result of the operation. With this method, you can track the interaction through the redux saga store. This is useful because you can create behaviors based on those states in a quick and simple way
Redux folders
These files/folders divide the Redux Saga work
- configureStore.js: Here you define the store shape and you can configure the companions and users reducers, and middlewares.
- rootSaga.js: A root Saga aggregates multiple Sagas to a single entry point for the sagaMiddleware to run. the
watcherSagaeffect is used with an array and your sagas (takeLatest()) will be executed in parallel. - reducers (folder): You have the error and success reducers by default. Create the other classifications and try to keep simple each file. Here you modify the store.
- handlers: files in this folder catch side effects and errors and return responses to the reducers (errors/success)
- requests: files with
HTTP Requests(functions) using Axios dependency
| Components | Hex |
|---|---|
| Background | |
| Text and Icons | |
| Underline Text | |
| Search Bar |
- Shermuhammad Kosimi (front-end)
- Nova Trauben (back-end)