Challenge Overview
Welcome to Order Management Tool ReactJS PWA UI Prototype Challenge
For this challenge we need you to build the Order Management Tool Dashboard by using ReactJS Progressive Web App. The expected submissions need follow provided storyboard while optimize the usage of Progressive Web App principle that will support responsive solution on Tablet and Mobile screen size, both in Portrait & Landscape view.
The winner of the challenge will work on other subsequent tasks . There are multiple payments for tasks lined up subsequent to this challenge.
Let’s discuss any questions you have on challenge forum!
- Expected Progressive Web App functionalities:
-- Offline features (Out of Challenge Scope)
-- Page caching (Out of Challenge Scope)
-- Network connection is secure
-- Add to Homescreen
-- Custom Splash Screen
-- Mobile Friendly
- You must use react version 16.xx for this challenge submission.
- Please use Lighthouse : a tool for auditing an app for PWA features and checking your app meets a respectable bar for web performance under emulated mobile conditions
- Some documentations to help build the ReactJS PWA:
- https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12
- https://medium.com/progressive-web-apps/react-progressive-web-apps-part-1-1cf381421672
- https://engineering.musefind.com/build-your-first-progressive-web-app-with-react-8e1449c575cd
- https://pusher.com/tutorials/pwa-react/
- https://appdividend.com/2018/03/14/how-to-build-progressive-web-application-using-react-js/
- You can use one of this repo to start your submission OR come up with your solution. As long meet the expected functionalities:
https://www.reactpwa.com/
https://github.com/insin/react-hn
https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo
- ReactJS Components must be re-usable. Components data should be populated based on the configuration. Configuration file to contain the required configurations required to render the pages.
- Our priority for this challenge is to get the functional flows in place and that no offline functions are required other than just show the application shell
- You can hard code data as part of ReactJS app
- We you can use the available design that will indicate the page on offline status
FINAL SUBMISSION GUIDELINES
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
SUBMISSION REQUIREMENTS:
Zeplin Assets
Check challenge forum or Contact copilot
0). Logo
Screenshot: Tablet/logo.png
- Create app logo for this ReactJS PWA submission
1). Splash Screen
TABLET VERSION
Screenshot: Tablet/00_0 Splash Screen.png
- Progressive Web App support the Splash screen usage.
- Refer to this web for good usage: https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
- You need create some different size of splash screen to support some devices
MOBILE VERSION
Screenshot: Mobile/00 Splash Screen.png
- This is screenshot look for tablet
2). Login Screen
Screenshot: n/a
- No storyboard provided,
- We need you create Login screen that will displayed Username & Password fields by use existing design.
- Create login screen centered on page
- After success login need take to next empty Dashboard page
3). Dashboard - Empty State
TABLET VERSION
Screenshot: Tablet/00_1 Dashboard Empty State.png
- This is dashboard general page look
- On the header bar, display logo on the left side and user profile button on the right side
- Click user profile button need display the flyout (Screenshot: Tablet/04_3 Profile popup.png)
- Important: Add another new button for Logout that will take user to Login page.
- Below the header, display 2 dropdowns to select a dashboard and select a profile
- Header and dropdowns need remain on fixed placement on top
- On the footer menu, you need display some menu options
- Footer on the bottom need on fixed placement on bottom when user scrolling the page
- on the content area, you can display this empty state at first time load the dashboard
- Create the empty state layout as code based not image.
- Make sure all assets in page loaded before dashboard load the actual data
MOBILE VERSION
Screenshot: Mobile/00_1 Empty state.png
- For mobile version, notice that the Dashboard and Profile title hidden
- Click user profile button need display the flyout (Screenshot: Mobile/04_3 Profile Pop-up.png)
- Match the empty state design for tablet
- Header and dropdowns need remain on fixed placement on top
- Footer on the bottom need on fixed placement on bottom when user scrolling the page
4). Select a Dashboard
TABLET VERSION
Screenshot: Tablet/00_2 First step Select Dashboard.png
- When click the Select a Dashboard dropdown, you need display this separated page selection
- Display list based on storyboard
- User click on row need display the selected icon and text changed to blue color. Refer to this screen(Screenshot: Tablet/02_1 Dashboard Dropdown.png)
- Click Back need take back to Dashboard page
MOBILE VERSION
Screenshot: Mobile/00_2.png
- For mobile, page title need move to the left side of header bar
- List need use less of left spacing
- User click on row need display the selected icon and text changed to blue color. Refer to this screen(Screenshot: Mobile/02_1 Select Dashboard.png)
5). Select a Profile
TABLET VERSION
Screenshot: Tablet/00_3 Select Profile.png
- When click the Select a Profile dropdown, you need display this separated page selection
- There is tab row contains User Role, Recently Used and My favorites
- On the right side there’s a Search other button. Click this need load separate page, refer more info below.
- You can put dead link for missing page
- User can toggle the favorite button
- Select the row need display the selected icon with blue colored text (Screenshot: Tablet/02_2 Profile.png)
- Follow this screen for Recently Used tab(Screenshot: Tablet/02_3 Orders Recently.png)
- Follow this screen for My Favourites tab(Screenshot: Tablet/02_4 Orders Favourites.png)
MOBILE VERSION
Screenshot: Mobile/00_3.png
- For mobile, page title need move to the left side of header bar
- User need able to scrolling tab on top.
- List need use less of left spacing
- Select the row need display the selected icon with blue colored text (Screenshot: Mobile/02_2 Select Profile.png)
- Follow this screen for Recently Used tab(Screenshot: Mobile/02_3 Recent.png)
- Follow this screen for My Favourites tab(Screenshot: Mobile/02_4 Favourites.png)
6). Dashboard - Data Loaded
TABLET VERSION
Screenshot: Tablet/01_1 Dashboard.png
- This is Dashboard look after data loaded.
- On the right side there’s refresh and filter button.
- By default filter is not filtered. You can see the icon represent the unfilter style
- On the left side the, you need make each 3 buttons to be clickable
- Select on the icon need displayed the donut chart and update the data inside the big circle
- Put dummy content when select different icon
- Display Red, Yellow and Green Orders on the right side of clickable charts
- Below you can the table content
- Need make all columns sortable
- See down arrow to indicate the sorting
- Swipe on the row need load additional actions
- Search button floating on the right bottom side of table
- Click Search button need take to separate page
MOBILE VERSION
Screenshot: Mobile/01_1 Mobile Dashboard.png
- For mobile, keep placed the Refresh and Filter button
- Chart are will place centered
- Red, Yellow and Green Orders need placed below the chart
- Create fluid table
- For mobile, you need move red, yellow, green and total to separate row
- Search button need to be floating on the bottom right side
- This is page look when user scrolling on mobile (Screenshot: Mobile/01_2 Dashboard Scroll.png)
7). Details Page - Table View
TABLET VERSION
Screenshot: Tablet/01_2 Details.png
- User landed to this details page after click the details button on table row
- Back arrow need take user back to dashboard page
- Order title placed on the right side of back button
- There’s colored toggle button on the right side.
- We need able to filter data in table based on this selected alert.
- Click them need filter table with related status
- Grid view and setting button placed on the right side
- You need freeze the 1st column of Order No
- User can scrolling the table horizontally (Screenshot: Tablet/01_3 Details Scroll.png)
- When user scrolling vertically, need make the table header in fixed placement (Screenshot: Tablet/01_4 scroll vertical.png)
MOBILE VERSION
Screenshot: Mobile/01_3 Details.png
- For mobile layout, you need move the orders colored toggle buttons in separated row
- When user scrolling horizontally, display this tooltips specifically for mobile (Screenshot: Mobile/01_4 Details_scroll.png)
- This is long version of scrolling on mobile (Screenshot: Mobile/01_5 Details vertical scroll.png)
8). Details Page - Grid View
TABLET VERSION
Screenshot: Tablet/Tablet/01_5 Grid.png
- Click the Grid View button need display this page
- Notice that Toggle view button transformed to List view icon
- Create 2 columns layout for Grid view data
- Follow different styling on each grid
- User need able to scrolling the page
MOBILE VERSION
Screenshot: Mobile/01_6 Details grid.png
- This is grid view look for mobile version
- Use 1 column layout for mobile
9). Details Page - Setting Pop up
TABLET VERSION
Screenshot: Tablet/01_6 Dashboard pop-up.png
- Click gear button need load this modal window
- Need able to turn on/off the column checkboxes
- Click, X, Cancel button need hide the modal window
- Click Apply need capture the column to displayed in page
MOBILE VERSION
Screenshot: Mobile/01_7 columns popup.png
- Not much different than tablet version.
10). Search Other Profile
TABLET VERSION
Screenshot: Tablet/02_5_1 Orders Search.png
- User land to this screen after click Search other button on Select Profile page
- Important: Add new Browse button next to Search
- Display table list
- Need able to search from text input on top
- Clear button need clear the input value
- When user type need highlight the text on table with red text
- When user click the Organization folder need take to separate page
- Help button and Star button placed on the right side
- Need able to toggle Star button
- + button can be dead link
MOBILE VERSION
Screenshot: Mobile/02_5 Add profile.png
- Text input and search button need moving down on mobile layout
11). Search Other Profile - Organization
TABLET VERSION
Screenshot: Tablet/02_5_2 Orders Browse.png
- This is Search Other profile look for Organizations
- Important: Add new Browse button next to Search. For challenge winner there will be extra fixes to show Browse click flow by re-use existing pages
- You can see the breadcrumb displayed on top
- Notice there’s group icon on placed on some row
MOBILE VERSION
Screenshot: Mobile/02_6 Folder view.png
- Text input and search button need moving down on mobile layout
12). Add Filter
TABLET VERSION
Screenshot: Tablet/03_1 Add Filter.png
- Back button take user back to Dashboard page
- Cancel and add Filter button take user back to Dashboard page
- User see this screen after click Filter button on Dashboard page
- Text input need use auto suggestion
- After select value need display this screen (Screenshot: Tablet/03_2 Add Value.png)
- Notice the Add filter button become enable on this screen
- Need display filter value input on top
- Click the row need this ready to add screen (Screenshot: Tablet/03_3 Ready to Add.png)
- This is screen look after user added 1 filter (Screenshot: Tablet/03_4 Filter Added.png)
- This is screen look after user added more than 1 filter (Screenshot: Tablet/03_5 Filter List.png)
- Need able to delete filter by click delete button
- Match content like storyboard
- Click the zoom icon need load this search value message (Screenshot: Tablet/03_6 Add Value.png)
- After select the value, need add the new value on filter section (Screenshot: Tablet/03_7 Value Added.png)
- When going back to Dashboard page, need display the filter icon with some number indicator (Screenshot: Tablet/04_1 Dashboard Filtered.png)
MOBILE VERSION
Screenshot: Mobile/03_1 Add Filter.png
- Use fluid width for mobile version
- After select value need display this screen (Screenshot: Mobile/03_2 Add Value.png)
- Click the row need this ready to add screen (Screenshot: Mobile/03_3 Ready to Add.png)
- This is screen look after user added 1 filter (Screenshot: Mobile/03_4 Filter Added.png)
- This is screen look after user added more than 1 filter (Screenshot: Mobile/03_5 Filter List.png)
- Click the zoom icon need load this search value message (Screenshot: Mobile/03_6 Add Value.png)
- After select the value, need add the new value on filter section (Screenshot: Mobile/03_7 Value Added.png)
- When going back to Dashboard page, need display the filter icon with some number indicator (Screenshot: Mobile/04_1 Dashboard Filtered.png)
12). Offline message
TABLET VERSION
Screenshot: Tablet/04_2 Dashboard Offline.png
- If there’s no internet connection, you need display this message.
- Retry button need refresh the page
MOBILE VERSION
Screenshot: Mobile/04_2 Offline.png
- Create fluid layout for mobile version
13). Search Page
TABLET VERSION
Screenshot: Tablet/04_4 Quick Search.png
- Search input placed centered
- Display text placeholder
MOBILE VERSION
Screenshot: Mobile/04_4 Quick Search.png
- Use fluid width for text input
14). Search Result
TABLET VERSION
Screenshot: Tablet/04_5 Search Result.png
- Search result need able to display order list like on dashboard page
- Use freeze function for 1st column
MOBILE VERSION
Screenshot: Mobile/04_5 Search Result.png
- Search result need able to display order list like on dashboard page
- Use freeze function for 1st column
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- Use Babel ES6 Code Syntax
- Use Linter, Jest and other best practice library to maintain your code quality.
- Put clear comment/documentation for all ReactJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use icon font for icons, as appropriate
- If any icons are missing, use any suitable replacement as a placeholder
Web Browsers Requirements
Important! Your submission must look and work consistently across these following browsers on the latest versions:
- Chrome for Mobile,
- Edge,
- Safari,
- Samsung,
- Firefox
For this challenge we need you to build the Order Management Tool Dashboard by using ReactJS Progressive Web App. The expected submissions need follow provided storyboard while optimize the usage of Progressive Web App principle that will support responsive solution on Tablet and Mobile screen size, both in Portrait & Landscape view.
The winner of the challenge will work on other subsequent tasks . There are multiple payments for tasks lined up subsequent to this challenge.
Let’s discuss any questions you have on challenge forum!
Final Submission Guidelines
About Progressive Web App (PWA)- Expected Progressive Web App functionalities:
-- Offline features (Out of Challenge Scope)
-- Page caching (Out of Challenge Scope)
-- Network connection is secure
-- Add to Homescreen
-- Custom Splash Screen
-- Mobile Friendly
- You must use react version 16.xx for this challenge submission.
- Please use Lighthouse : a tool for auditing an app for PWA features and checking your app meets a respectable bar for web performance under emulated mobile conditions
- Some documentations to help build the ReactJS PWA:
- https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12
- https://medium.com/progressive-web-apps/react-progressive-web-apps-part-1-1cf381421672
- https://engineering.musefind.com/build-your-first-progressive-web-app-with-react-8e1449c575cd
- https://pusher.com/tutorials/pwa-react/
- https://appdividend.com/2018/03/14/how-to-build-progressive-web-application-using-react-js/
- You can use one of this repo to start your submission OR come up with your solution. As long meet the expected functionalities:
https://www.reactpwa.com/
https://github.com/insin/react-hn
https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo
- ReactJS Components must be re-usable. Components data should be populated based on the configuration. Configuration file to contain the required configurations required to render the pages.
- Our priority for this challenge is to get the functional flows in place and that no offline functions are required other than just show the application shell
- You can hard code data as part of ReactJS app
- We you can use the available design that will indicate the page on offline status
FINAL SUBMISSION GUIDELINES
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
SUBMISSION REQUIREMENTS:
Zeplin Assets
Check challenge forum or Contact copilot
0). Logo
Screenshot: Tablet/logo.png
- Create app logo for this ReactJS PWA submission
1). Splash Screen
TABLET VERSION
Screenshot: Tablet/00_0 Splash Screen.png
- Progressive Web App support the Splash screen usage.
- Refer to this web for good usage: https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
- You need create some different size of splash screen to support some devices
MOBILE VERSION
Screenshot: Mobile/00 Splash Screen.png
- This is screenshot look for tablet
2). Login Screen
Screenshot: n/a
- No storyboard provided,
- We need you create Login screen that will displayed Username & Password fields by use existing design.
- Create login screen centered on page
- After success login need take to next empty Dashboard page
3). Dashboard - Empty State
TABLET VERSION
Screenshot: Tablet/00_1 Dashboard Empty State.png
- This is dashboard general page look
- On the header bar, display logo on the left side and user profile button on the right side
- Click user profile button need display the flyout (Screenshot: Tablet/04_3 Profile popup.png)
- Important: Add another new button for Logout that will take user to Login page.
- Below the header, display 2 dropdowns to select a dashboard and select a profile
- Header and dropdowns need remain on fixed placement on top
- On the footer menu, you need display some menu options
- Footer on the bottom need on fixed placement on bottom when user scrolling the page
- on the content area, you can display this empty state at first time load the dashboard
- Create the empty state layout as code based not image.
- Make sure all assets in page loaded before dashboard load the actual data
MOBILE VERSION
Screenshot: Mobile/00_1 Empty state.png
- For mobile version, notice that the Dashboard and Profile title hidden
- Click user profile button need display the flyout (Screenshot: Mobile/04_3 Profile Pop-up.png)
- Match the empty state design for tablet
- Header and dropdowns need remain on fixed placement on top
- Footer on the bottom need on fixed placement on bottom when user scrolling the page
4). Select a Dashboard
TABLET VERSION
Screenshot: Tablet/00_2 First step Select Dashboard.png
- When click the Select a Dashboard dropdown, you need display this separated page selection
- Display list based on storyboard
- User click on row need display the selected icon and text changed to blue color. Refer to this screen(Screenshot: Tablet/02_1 Dashboard Dropdown.png)
- Click Back need take back to Dashboard page
MOBILE VERSION
Screenshot: Mobile/00_2.png
- For mobile, page title need move to the left side of header bar
- List need use less of left spacing
- User click on row need display the selected icon and text changed to blue color. Refer to this screen(Screenshot: Mobile/02_1 Select Dashboard.png)
5). Select a Profile
TABLET VERSION
Screenshot: Tablet/00_3 Select Profile.png
- When click the Select a Profile dropdown, you need display this separated page selection
- There is tab row contains User Role, Recently Used and My favorites
- On the right side there’s a Search other button. Click this need load separate page, refer more info below.
- You can put dead link for missing page
- User can toggle the favorite button
- Select the row need display the selected icon with blue colored text (Screenshot: Tablet/02_2 Profile.png)
- Follow this screen for Recently Used tab(Screenshot: Tablet/02_3 Orders Recently.png)
- Follow this screen for My Favourites tab(Screenshot: Tablet/02_4 Orders Favourites.png)
MOBILE VERSION
Screenshot: Mobile/00_3.png
- For mobile, page title need move to the left side of header bar
- User need able to scrolling tab on top.
- List need use less of left spacing
- Select the row need display the selected icon with blue colored text (Screenshot: Mobile/02_2 Select Profile.png)
- Follow this screen for Recently Used tab(Screenshot: Mobile/02_3 Recent.png)
- Follow this screen for My Favourites tab(Screenshot: Mobile/02_4 Favourites.png)
6). Dashboard - Data Loaded
TABLET VERSION
Screenshot: Tablet/01_1 Dashboard.png
- This is Dashboard look after data loaded.
- On the right side there’s refresh and filter button.
- By default filter is not filtered. You can see the icon represent the unfilter style
- On the left side the, you need make each 3 buttons to be clickable
- Select on the icon need displayed the donut chart and update the data inside the big circle
- Put dummy content when select different icon
- Display Red, Yellow and Green Orders on the right side of clickable charts
- Below you can the table content
- Need make all columns sortable
- See down arrow to indicate the sorting
- Swipe on the row need load additional actions
- Search button floating on the right bottom side of table
- Click Search button need take to separate page
MOBILE VERSION
Screenshot: Mobile/01_1 Mobile Dashboard.png
- For mobile, keep placed the Refresh and Filter button
- Chart are will place centered
- Red, Yellow and Green Orders need placed below the chart
- Create fluid table
- For mobile, you need move red, yellow, green and total to separate row
- Search button need to be floating on the bottom right side
- This is page look when user scrolling on mobile (Screenshot: Mobile/01_2 Dashboard Scroll.png)
7). Details Page - Table View
TABLET VERSION
Screenshot: Tablet/01_2 Details.png
- User landed to this details page after click the details button on table row
- Back arrow need take user back to dashboard page
- Order title placed on the right side of back button
- There’s colored toggle button on the right side.
- We need able to filter data in table based on this selected alert.
- Click them need filter table with related status
- Grid view and setting button placed on the right side
- You need freeze the 1st column of Order No
- User can scrolling the table horizontally (Screenshot: Tablet/01_3 Details Scroll.png)
- When user scrolling vertically, need make the table header in fixed placement (Screenshot: Tablet/01_4 scroll vertical.png)
MOBILE VERSION
Screenshot: Mobile/01_3 Details.png
- For mobile layout, you need move the orders colored toggle buttons in separated row
- When user scrolling horizontally, display this tooltips specifically for mobile (Screenshot: Mobile/01_4 Details_scroll.png)
- This is long version of scrolling on mobile (Screenshot: Mobile/01_5 Details vertical scroll.png)
8). Details Page - Grid View
TABLET VERSION
Screenshot: Tablet/Tablet/01_5 Grid.png
- Click the Grid View button need display this page
- Notice that Toggle view button transformed to List view icon
- Create 2 columns layout for Grid view data
- Follow different styling on each grid
- User need able to scrolling the page
MOBILE VERSION
Screenshot: Mobile/01_6 Details grid.png
- This is grid view look for mobile version
- Use 1 column layout for mobile
9). Details Page - Setting Pop up
TABLET VERSION
Screenshot: Tablet/01_6 Dashboard pop-up.png
- Click gear button need load this modal window
- Need able to turn on/off the column checkboxes
- Click, X, Cancel button need hide the modal window
- Click Apply need capture the column to displayed in page
MOBILE VERSION
Screenshot: Mobile/01_7 columns popup.png
- Not much different than tablet version.
10). Search Other Profile
TABLET VERSION
Screenshot: Tablet/02_5_1 Orders Search.png
- User land to this screen after click Search other button on Select Profile page
- Important: Add new Browse button next to Search
- Display table list
- Need able to search from text input on top
- Clear button need clear the input value
- When user type need highlight the text on table with red text
- When user click the Organization folder need take to separate page
- Help button and Star button placed on the right side
- Need able to toggle Star button
- + button can be dead link
MOBILE VERSION
Screenshot: Mobile/02_5 Add profile.png
- Text input and search button need moving down on mobile layout
11). Search Other Profile - Organization
TABLET VERSION
Screenshot: Tablet/02_5_2 Orders Browse.png
- This is Search Other profile look for Organizations
- Important: Add new Browse button next to Search. For challenge winner there will be extra fixes to show Browse click flow by re-use existing pages
- You can see the breadcrumb displayed on top
- Notice there’s group icon on placed on some row
MOBILE VERSION
Screenshot: Mobile/02_6 Folder view.png
- Text input and search button need moving down on mobile layout
12). Add Filter
TABLET VERSION
Screenshot: Tablet/03_1 Add Filter.png
- Back button take user back to Dashboard page
- Cancel and add Filter button take user back to Dashboard page
- User see this screen after click Filter button on Dashboard page
- Text input need use auto suggestion
- After select value need display this screen (Screenshot: Tablet/03_2 Add Value.png)
- Notice the Add filter button become enable on this screen
- Need display filter value input on top
- Click the row need this ready to add screen (Screenshot: Tablet/03_3 Ready to Add.png)
- This is screen look after user added 1 filter (Screenshot: Tablet/03_4 Filter Added.png)
- This is screen look after user added more than 1 filter (Screenshot: Tablet/03_5 Filter List.png)
- Need able to delete filter by click delete button
- Match content like storyboard
- Click the zoom icon need load this search value message (Screenshot: Tablet/03_6 Add Value.png)
- After select the value, need add the new value on filter section (Screenshot: Tablet/03_7 Value Added.png)
- When going back to Dashboard page, need display the filter icon with some number indicator (Screenshot: Tablet/04_1 Dashboard Filtered.png)
MOBILE VERSION
Screenshot: Mobile/03_1 Add Filter.png
- Use fluid width for mobile version
- After select value need display this screen (Screenshot: Mobile/03_2 Add Value.png)
- Click the row need this ready to add screen (Screenshot: Mobile/03_3 Ready to Add.png)
- This is screen look after user added 1 filter (Screenshot: Mobile/03_4 Filter Added.png)
- This is screen look after user added more than 1 filter (Screenshot: Mobile/03_5 Filter List.png)
- Click the zoom icon need load this search value message (Screenshot: Mobile/03_6 Add Value.png)
- After select the value, need add the new value on filter section (Screenshot: Mobile/03_7 Value Added.png)
- When going back to Dashboard page, need display the filter icon with some number indicator (Screenshot: Mobile/04_1 Dashboard Filtered.png)
12). Offline message
TABLET VERSION
Screenshot: Tablet/04_2 Dashboard Offline.png
- If there’s no internet connection, you need display this message.
- Retry button need refresh the page
MOBILE VERSION
Screenshot: Mobile/04_2 Offline.png
- Create fluid layout for mobile version
13). Search Page
TABLET VERSION
Screenshot: Tablet/04_4 Quick Search.png
- Search input placed centered
- Display text placeholder
MOBILE VERSION
Screenshot: Mobile/04_4 Quick Search.png
- Use fluid width for text input
14). Search Result
TABLET VERSION
Screenshot: Tablet/04_5 Search Result.png
- Search result need able to display order list like on dashboard page
- Use freeze function for 1st column
MOBILE VERSION
Screenshot: Mobile/04_5 Search Result.png
- Search result need able to display order list like on dashboard page
- Use freeze function for 1st column
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- Use Babel ES6 Code Syntax
- Use Linter, Jest and other best practice library to maintain your code quality.
- Put clear comment/documentation for all ReactJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use icon font for icons, as appropriate
- If any icons are missing, use any suitable replacement as a placeholder
Web Browsers Requirements
Important! Your submission must look and work consistently across these following browsers on the latest versions:
- Chrome for Mobile,
- Edge,
- Safari,
- Samsung,
- Firefox