- You should have Xcode or Android Studio installed on your computer
- If you have never run a React native application on your computer before, you will have to setup your environment.
- Clone this repository into a local directory on your computer
git clone git@github.com:fvonhoven/EdenHealthMST.git
-
Install local packages with yarn or npm
yarnornpm i
npx pod-install ios
- Run the app with
npx react-native run-ios
- Install local packages with yarn or npm
yarnornpm i
- Run the app with
npx react-native run-android
-
Project initialized with React Native CLI with the TypeScript template as it has become more common practice to use TypeScript for typechecking as a safeguard against errors before runtime and to add code completion suggestions via intellisense.
-
As a state manager option I opted for Mobx State Tree as it is more lightweight in terms of the amount of code required to perform a comparable redux management tasks. However, redux-toolkit was considered as an alternative (ask me about my other version of this app with redux-toolkit 😕)
-
react-native-elements was chosen as a scalable option for UI development as it has a wide range of component options react-native-paper was used for its form builder
-
Added a internationalization library i18n-js to centralize all strings used in the app's UI and for language support and scalability
-
Used apisauce as it is a nice lightweight helper library for axios calls with good readable error handling
-
(Formerly called unimodules), Expo now exports its modules as a stand alone service called Expo Modules which allows use of its SDK in React Native bare workflows. This was a dependency for
i18n-jsand also allows for us to utilize their SDK in the future (e.g. SplashScreen was added to this project to control showing the splashscreen until our clinicians are fully loaded and then hiding it when we are ready for presentation to the user) -
- This exercise is relatively simple on its face, a favoritable list with login, but a mobile app is more than just a set of features. App architecture and scalability were two of the larger considerations when creating this project - that and choosing a state management option, since redux has changed a bit since the reducer, action, saga paradigm I was used to when we first used it in our clients' React Native apps at Infinite Red. I did like that redux-toolkit addressed many of the shared frustrations with redux over the years, but decided to go with MST because it was more streamlined for the required functionality/features. I did attempt an approach with Ignite, but it was a bit overkill for this exercise and I found myself removing much of what it included. If this was an actual production app, I might consider using it, but in the time allotment it was like putting an oil tanker in a riverbed. I did probably spend more time on UI than I should have, but I didn't have the luxury of being able to iterate on design throughout a typical development process. That said, there is room for improvement 😜. Overall this was a fun exercise that I enjoyed with the freedom to start a project from scratch and add a bit of creativity to with the latest tools available today in the React Native ecosystem.
- Things I would add going forward
- TESTS - snapshot, unit, and E2E prob with Detox
- STORYBOOK - Add storybook so feature mockups could be presented and general component use could be explained across the team
- API - I would give the api calls their own folder and build out namespaced features from there
- ERROR HANDLING - some kind of app-wide messaging system (popup, toast, etc) to give feedback to the user for network calls, etc.
- STORE - I would break up the
mst.tsxfile into MST stores separated by feature/model (Clinicians, User, Auth, etc.) - ENV - Add an env file to store local info
- API KEY - Not store it directly in the code - pull from 1P or AWS, etc.
- DEBUGGING - Integrate Reactotron for Network/MST/general call debugging
- UI/UX:
- Add a drawer with a logout button
- Iron out Image caching in the clinician rows
- Maybe pick a better palette
- Add a spinner for network calls, etc.
- Popup for user messaging
- Prob more as the app's features were developed more
- This exercise is relatively simple on its face, a favoritable list with login, but a mobile app is more than just a set of features. App architecture and scalability were two of the larger considerations when creating this project - that and choosing a state management option, since redux has changed a bit since the reducer, action, saga paradigm I was used to when we first used it in our clients' React Native apps at Infinite Red. I did like that redux-toolkit addressed many of the shared frustrations with redux over the years, but decided to go with MST because it was more streamlined for the required functionality/features. I did attempt an approach with Ignite, but it was a bit overkill for this exercise and I found myself removing much of what it included. If this was an actual production app, I might consider using it, but in the time allotment it was like putting an oil tanker in a riverbed. I did probably spend more time on UI than I should have, but I didn't have the luxury of being able to iterate on design throughout a typical development process. That said, there is room for improvement 😜. Overall this was a fun exercise that I enjoyed with the freedom to start a project from scratch and add a bit of creativity to with the latest tools available today in the React Native ecosystem.
- React Navigation
- apisauce
- expo-modules
- i18n-js
- mobx-state-tree
- react-native-geolocation-service
- react-native-elements
- react-native-paper
- react-native-paper-form-builder
- react-native-vector-icons
