{"id":16228800,"url":"https://github.com/mpgon/mini-onboarding","last_synced_at":"2025-04-08T04:49:39.316Z","repository":{"id":70738802,"uuid":"135769558","full_name":"mpgon/mini-onboarding","owner":"mpgon","description":"mini onboarding with React-Native","archived":false,"fork":false,"pushed_at":"2018-06-04T04:55:25.000Z","size":8624,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T03:33:54.329Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mpgon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-01T22:43:44.000Z","updated_at":"2018-06-04T04:55:26.000Z","dependencies_parsed_at":"2023-02-22T22:15:37.386Z","dependency_job_id":null,"html_url":"https://github.com/mpgon/mini-onboarding","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpgon%2Fmini-onboarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpgon%2Fmini-onboarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpgon%2Fmini-onboarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpgon%2Fmini-onboarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpgon","download_url":"https://codeload.github.com/mpgon/mini-onboarding/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779763,"owners_count":20994572,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T12:56:33.786Z","updated_at":"2025-04-08T04:49:39.289Z","avatar_url":"https://github.com/mpgon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![travis build](https://img.shields.io/travis/MiguelGPereira/mini-onboarding.svg?style=flat-square)](https://travis-ci.org/MiguelGPereira/mini-onboarding)\n\n# MiniOnboarding\nMini onboarding flow application, built with React-Native.\n\n## Installation\n```bash\nyarn install\n```\nThis project was created using the React Native CLI, which means that to run from the console, the CLI must be installed\n```npm\nnpm install -g react-native-cli\n```\nAlternatively, the app can be run directly using Xcode (changing the provisioning profiles) or Android Studio.\n\n## Execution\n```bash\n#iOS\nreact-native run-ios\n\n#Android\nreact-native run-android\n```\n\nTo run on a physical device, use Xcode for iOS or the CLI with `adb` installed for Android.  \nTo see the keyboard related animations in the iOS simulator, the software keyboard must be enabled (Cmd + K). \n\n## Project structure\n```\nmini-onboarding/src\n│   App.js    \n│   ...\n└───constants //fitness goals, redux actions, ...\n│   \n└───utils //metric system converters, ...\n│   \n└───modules\n│   │\n│   └───_gobal //inter-module components i.e. Button\n│   │\n│   └───onboarding\n│       │   Landing.js // fitness goal selection screen component\n│       │   Age.js // age input screen component\n│       │   Height.js //height input screen component\n│       │   Success.js //success screen component\n│       │   ...\n│       └───components // 'dumb' components\n│       │   Step.js // See #1\n│       │   ...\n│       └───hocs // higher-order components\n│           withOnboarding.js // See #2\n```\n\n[#1](#withonboarding)  \n[#2](#step)\n\n## Discussion\nFor this challenge, I decided to bootstrap the project with the react native cli, since I believe it's the most scalable if, for example, it was necessary to add custom native modules.\nI also settled on Redux for state management, because I feel the initial complexity curve is well rewarded with an easy to maintain application.\nFor navigation, I used `react-native-navigation` from Wix, because it's a very performant solution (compared to the standard all-JS one) with easy Redux integration.\n\nThe development of the design was based/optimized on iOS w/ 4.7-inch (e.g. iPhone 6) but it was adapted and tested in the following devices:\n* iPhone 6 | iOS 9.3 | Simulator\n* iPhone 5S | iOS 9.3 | Simulator\n* iPhone 6 Plus | iOS 9.3 | Simulator\n* iPhone 7 | iOS 11.3.1 | Physical\n* Huawei P10 Lite | Android 7.0 Nougat | Physical\n\nOne challenge was trying to reduce the compromise between respecting the design and adapting to the different screen sizes (and Android), although I believe I found a good balance. \n\nRegarding the architecture, I tried to use a highly modular approach. Two examples are [withOnboarding](#withonboarding) and [Step](#step). I also resorted to functional stateless components when possible.\n\n### withOnboarding\nThis higher-order component was created to inject the Redux's store State and the Dispatch into the onboarding component's props. \nFrom a software design perspective, instead of using 'withOnboarding', I could have either: 1) made just the 'Landing' the smart component and pass the necessary actions to the next screens; 2) 'connect()'' all the screens individually. From a scalability standpoint, if it was necessary to have a few more steps to the onboarding, I feel this hoc was the best solution.  \n\n### Step\nThis component was created because of the similarities of the intermediate (post-landing) onboarding steps. All those screens have a ProgressBar, a title, an **input-section**, and a submit button, with possible keyboard events.\nStep uses composition to abstract all these repeated dependencies, allowing the intermediate onboarding steps to only deal with the **input-section**.\n\n## Limitations\nThe keyboard associated animations were designed with iOS first in mind. On adaptation for Android, there is a known bug that doesn't allow disabling the keyboard default accessory transitions without disabling it's triggered events (see [here](https://github.com/facebook/react-native/issues/2852)). For this reason, the keyboard associated animations are a bit *hacked* on Android and could be improved with some refactoring.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpgon%2Fmini-onboarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpgon%2Fmini-onboarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpgon%2Fmini-onboarding/lists"}