For fun. Recruitments can be fun, right?
For iOS make sure you have XCode.app installed.
For Android make sure you have Android Studio installed and at least one Android Virtual Device configured.
- Clone the repository.
- Run
yarn. - (optionally) Run
npx pod-install.- this step is optional, because should be already done by
yarn, but I needed to do it manually
- this step is optional, because should be already done by
- Run
yarn ios/yarn android.
Because of different Android configurations being available on different computers, I went with supporting E2e tests on iOS only.
Make sure you have iPhone 12 emulator installed in XCode.app with xcrun simctl list devicetypes | grep "iPhone 12".
- Install Detox Prerequisites (mind the
applesimutils). - Build the app for testing with
detox build --configuration ios.sim.debug. - Run
yarn test:e2e.
If something's broken, try to reinstall Pods (npx pod-install).
I had issues installing RN v0.70 Pod on my machine, so I went with 0.69 that runs flawlessly (had troubles with hermes-engine that became default in 0.70).
Project is organised around screens (Home and Entry) and that's where nearly all of the Front-end is.
Components are tightly coupled and lie next to where they are used. If the components are shared between screens, they live in src/shared. The same goes for hooks.
While I usually don't like that kind of architecture, for such a small app it felt right to use it.
In the Data Entry part I tried to mimic what is in the actual product. That's why it redirects to new page where we can select the mood level and feelings. I've tried to make it look like the Stats part and I feel it's pretty consistent, but I'll leave the last judgement to you.
Regarding the width of the Stats bars - I went with the Box at the end of the bar not covering it but rather being appended after it. This is because at some point (probably pretty far from now), the whole blue part of the bar could be covered by the Box. This is an edge case and maybe it doesn't matter now, but I imagined myself talking to the designer about this case and settling on this way of solving the issue. This can be easily reverted though.
You probably noticed that StyleSheets are kept in separate styles.ts and getStyles.ts files. Why there are two kinds?
styles.tsmeans that the stylesheet is static. Imported and that's it.getStyles.tshave small logic and need the parameter to be passed. Think: dynamic styles.
Why not styled-components? It wasn't worth the hassle in such small demo IMO.
I was going to use redux in an ordinary way at first, but I never played with the toolkit so I've used it instead.
Tests weren't a part of the assignment, however it felt incomplete without them. I went with E2E tests using detox because:
- We were discussing it on our first call.
- Unit tests are less important IMO (Write tests. Not too many. Mostly integration). Well, we don't have integration, but we have E2Es that should cover integration.
If I had more time, I'd unit test hooks and utils/mapMoodEntriesToMoodChartData - the latter is pretty advanced IMO. I hope the E2Es suffice to cover them as well (the end result depends one them anyway).
NONE