Contact Manager

This app helps user to manage their contacts like Add and edit existing contacts. It's basically sync contacts from the user device.

Please go ahead and play around :)

Covered :

• Sync user device contacts based on user permission
• It will ask user permission to allow and dont allow for contact syncing.
• Show contact details in Item list (name and first letter for name in avatar sectin with attractive color)
• Have Add button to navigate to contact manage screen
• When user press contact list item, will be able to redirect to show user's details such as email, name and edit button.
• Flatlist used for all the list to show to the user contact
• Manage contact screen (create contact) have text input to add user details such as name, email, phone number
• Project working on both Android and iOS
• Project running on latest RN 0.65.1
• I have created app UI as per some best pratice approach.

Not Covered :

• I could not cover the bonus points due to current company work, Willing to implement in the future

Grading criteria followed:

• Architecture and approach - (Using Container and View pattern for design patten and proper folder structure Architecture && tried TDD approach)
• Execution - App runs successfully in both Android and iOS
• Testability - Used Jest for Unit testing and Enzyme for component testing.
• Code readability and style - Written clean code and very convenient to read. Maintained proper comments and kept style files wisely. (Tried to use all latest methods)

How to setup code :

• Step 1 : download code from repo

• Step 2 : remove yarn.lock file from download code

• Step 3 : do npm install or yarn install ( if you have configured yarn in your project )

  If you want to run in iOS :-

  • pod install ( all of your packages to be installed in your Pod file )

  • yarn run ios or react-native run-ios ( app will run in your simulator or connected iOS device )

  If you want to run in Android :-

  • open your android studio and make sure your gradle getting success ( all of your packages to be synced in your gradle )

  • yarn run ios or react-native run-android ( app will run in your emulator or connected Android device )

Packages used : (Technologies)

Project is created with:

• react (17.0.1)
• react-native (0.64.2)
• react-native-gesture-handler (1.10.3)
• react-native-safe-area-context (3.2.0)
• react-native-screens (3.4.0)
• react-native-contacts (7.0.2)
• react-native-permissions (3.0.5)
• jest (26.6.3) - devDependencies
• enzyme (3.11.0) - devDependencies
• enzyme-adapter-react-16 (1.15.6) - devDependencies
• flow-bin (0.156.0) - devDependencies
• eslint 7.14.0 - devDependencies
• used Prettier for code formatting

Thinking & Decisions :

• Handled all the NULL checks in all components and showing console for API failure.
• Created flatlist for displaying contact details.
• Provided Loader (Activity indicator) before API calling. Loader will shown in upper middle of the screen, just for user interaction.
• Created Navigator and Routes for maintaining stacks/screens

• Created ColourPalette for maintaining colors

  Screenshots for the output