Welcome to the Offline Sync App - Hybrid Mobile App Prototype challenge!

In this challenge, we need you to create a hybrid mobile app using Cordova, Reactjs + Redux (for state management).

General application flow & requirements:

• After login, the user would be viewing the list of employees as per his authentication and authorization.

• The user would be able to download the data and do the required changes offline.

• While syncing the data online, the user may face conflict(s).

• The conflict(s) need to be resolved by the user (on client-side) and sync to the server.

 

Currently, we don’t have a backend API thus all server interactions need to be mocked but you have to develop the application in such way so you’ll save the data locally in JSON format but it’ll be easy to switch to a real backend API later.

The application should have offline storage capabilities and the user must be able to use the app without internet connection.

The app must save the data locally in JSON format and must be able to parse the JSON data, edit it and save it.

The client will later switch to another storage mechanism that will support JSON format.

NO DATA SHOULD BE HARDCODED. EVERYTHING SHOULD BE RENDERED BASED ON THE DATA FROM THE JSON FILE.

Make sure you follow the latest best practices for the required tech stack.

Target devices:

• Android version 4.5 and above

• iOS version 6 and above

Marvel app link:

• https://marvelapp.com/5eb9a7g

 

Please find the storyboard attached to the challenge forum.

You will also find attached a sample JSON file that will serve as the mock server on the forum. Note, this won't be the file that's used to save the data locally. It'll serve as the mock server.
You will have to reuse this file and extend it if needed to meet the challenge goals.

You need to implement the following screens:

Login page

Screens:

• 1a-Login.png

• 1b-Login_Password-error.png

Requirements:

• The logo should be image based.

• User ID and password are required fields. If those fields are not filled and the user clicks the LOG IN button, you should show an error message like “Password is required”. You should follow the error state from 1b-Login_Password-error.png.

• For invalid credentials, you should show an “Invalid credentials” message above the LOG IN button. Ignore the storyboard which shows “Not a valid password”.

• “Remember me” checkbox should be selected by default.

• Clicking “Create one” should take the user to the sign up page.

• Social login buttons are dead links.

• After successful login, take the user to the main listings page.

Sign up page

Screens:

• 1c-Sign-Up.png

Requirements:

• Replace “Welcome” text from the header with “Create an account”.

• All fields in the registration form are required and clicking the SIGN UP button should validate the form and show proper error messages for each field.

• Privacy policy & Terms of service are dead links.

• After successful sign up, take the user back to the login page.

Main listings page

Screens:

• From 2a-Home_offline.png to 4b-Your-last-sync_one-sync-open.png

Requirements:

• The header should be fixed at the top but the tabs (ALL/TODAY) should be hidden when scrolling (image 2f-Home_scroll.png).

• “ALL” tab is selected by default and “TODAY” tab will show entries that were entered today (current date).

• Clicking the menu icon should open the sidebar (image 3a-Menu.png).

• [Sidebar] All menu links except “Log out” are dead links.

• [Sidebar] Social icons are dead links.

• Clicking the “+” icon should take the user to the new employee page.

• Clicking the search icon should open the filters modal (images 2i-Search-and-Filters_Closed.png & 2j-Search-and-Filters_Open.png).

• [Filters modal] Search field should filter the entries based on the search query.

• [Filters modal] User should be able to change the view mode (list/grid) by clicking the icons next to the “REFINE” title.

• [Filters modal] Add some common-sense values for the rest of the filter options.

• [Filters modal] Clicking “CLEAR” should clear the applied filters and hide the filters modal.

• [Filters modal] Clicking “APPLY” should apply the selected filters and hide the filters modal.

• Clicking an employee entry should take the user to the profile page. (Note that the whole row should be clickable not just the chevron icon)

• Reaching the end of the list should “lazy-load” more results (10 each time).

• The footer must be fixed at the bottom of the page.

• [Footer] The first icon indicates the internet connection status. Online: 2b-Status_online.png. Offline: 2a-Home_offline.png.

• [Footer] The badge shown in 2c-Status_online-pending-sync.png indicates the number of pending sync operations with the server. This is the difference between the local version and the version from the server (see the attached JSON file).

• [Footer] The second icon is dead link.

• [Footer] You should show the date/time for the last sync date.

• [Footer] Clicking the up-chevron icon should open the activity status modal. (4a-Your-last-sync.png & 4b-Your-last-sync_one-sync-open.png)

• [Activity modal] The header should be fixed at the top of the screen.

• [Activity modal] Each section should be collapsible.

• [Activity modal] Clicking each employee should take the user to the profile page.

Sync with server

Screens:

• From 7-Sync_Unable-to-sync.png to 8f-Sync_Conflict-Res-4.png

Requirements:

• [Footer] Clicking the online status icon should start syncing with the server (2e-Status_syncing.png).

• If the status is Offline (user is not connected to the internet), you should show the “Unable to sync” message modal (7-Sync_Unable-to-sync.png).

• “SEE PENDING” is dead link.

• “TRY AGAIN” should try again :).

• If the status is online, you should start syncing. This is mocked for now. While syncing, there may be some conflicts.

• If there are NO conflicts, show a success message (we don’t have a design for this but follow the style of the app).

• If there are conflicts, you need to show the modal from 8a-Sync_Conflicts.png

• Clicking “SKIP ALL” should first confirm to skip the conflicts (8b-Sync_-Conflicts_Skip-confirmation.png) and then sync the data. “GO BACK” should show the previous step.

• If the user skips the conflicts, the data from the server will overwrite the local data from the device.

• Clicking “START” should show the conflict resolution modal (storyboard 8c-Sync_Conflict-Res-1.png - 8f-Sync_Conflict-Res-4.png).

• You should show one conflicting field per step.

• No option should be selected initially and the first option (value from local storage) should be editable.

• “SKIPP ALL” should resolve all conflicts by selecting the data from the server.

• “NEXT” should be disabled unless the user selects on of the above options.

• Clicking “NEXT” should go to the next step (conflict).

New employee page

Screens:

• 6a-New-employee.png

• 6b-New-employee_validation.png

Requirements:

• The gray/green dot next to the “New Employee” text indicates the internet status.

• The user should be able to upload an image by clicking the “Add photo”. The app should preview the selected image.

• All fields in “PERSONAL INFORMATION” & “COMPANY” sections are required and should show validation messages like in page 6b-New-employee_validation.png.

• Comments are optional.

• Please add a “SAVE” button that matches the design of the app below the “COMPANY INFORMATION” section.

• Clicking the “SAVE” button should save the new employee to the local storage.

Profile page

Screens:

• 5a-Profile-details.png

• 5b-Profile-details_editing.png

Requirements:

• The gray/green dot next to the “Profile” text indicates the internet status.

• The user should be able to upload and change the image by clicking the “Change photo”. The app should preview the selected image.

• Please add an “UPDATE” button that matches the design of the app below the “COMPANY INFORMATION” section.

• Clicking the “UPDATE” button should save the updated employee to the local storage.

Final Submission Guidelines

Submit your source code in a zip file and detailed instructions on how to setup and run the application.

An unlisted video showing your implementation in action is also highly desirable (but not mandatory).