Challenge Overview
In this challenge, competitors will work to create a responsive UI prototype by React Native (https://facebook.github.io/react-native/). Storyboards are avaialble and this challenge will focus on the background and general layout necessary to support 7+ additional challenges to fully complete the work.
As part of this challenge you will create flexbox, styling and javascript code, using best practices. We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
React Native:
For this application, we are going to target:
* React Native
* Tablet form-factor
Layout:
This challenge will focus on the tablet layout provided, but please keep in mind your submission needs able to easily expand to support the mobile / phone layout in the future.
Styling:
For Application styling you must follow React Native Styling method: https://facebook.github.io/react-native/docs/style.html. You can also use Style Components if you want (https://styled-components.com/)
- The plan is for each component to have a styling file that is to access and edit instead using a single CSS for the entire application
- Application layout must build using React Native Flexbox
Code encapsulation and quality:
All created native ReactJS components must re-usable and well encapsulated. The goal is a clear, modular approach to implementing the prototype.
- Use Linter, ES6, Jest and other best practice libraries to maintain your code quality.
- Put clear comment/documentation for all ReactJS elements.
- Images, Icons (SVG), etc... should be in a consistent folder
- style.css - use this name for all custom css.
- Please use proper id’s and classes in your naming conventions.
ReactNative/Javascript
- It is fine to use MIT and BSD licensed code and libraries. Please get approval for GPL / LGPL libraries in the forum.
- 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.
Styling
- Provide comments on the CSS code. We need CSS 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 CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS style when create all styling.
Assets/Images
- Wherever it makes sense, you can use icon fonts instead of images.
Hardware Requirements
- iOS 10
- Android 7
You are free to only focus on either iOS or Android, but note that the reviewers may use a different environment, so it's probably in your best interest to test both, if possible.
Test data:
The data shown in the converted UI should be easily editable via JSON files so we can tweak as we present the solution to the client. Make sure to create React Services to pull all data from the JSON
Screen Requirements:
These screens are in scope for the challenge:
01 Sign up:
Reference: 01_01SignUp.jpg
- User will enter username, email and phone no.
- Clicking on “Sign up” will take the user to the Messages page (02_01Messages.jpg)
- At the bottom we have the “Login” link that goes to the login page (01_02Login.jpg)
01_1 Login:
Reference: 01_02Login.jpg
- User will enter their username and email to login to the application
- Provide a checkbox to “Remember Me”
- Clicking on “Login” will take the user to the Messages page (02_01Messages.jpg)
- At the bottom we have the “Sign up” link for the new users that goes to the sign-up page (01_01SignUp.jpg)
Logged in View:
Navigation (Tablet):
- In the left side, we show the main navigation for the app
- User Thumbnail: Clicking on it shows the account setting options (02_10AccountSetting.jpg), selecting logout will take the user back to login screen,
Please ensure that the menu navigation is well defined and easy to extend, as future challenges will need to plugin in new screens and components into the navigation flow.
02 Messages:
Reference: 02_01Messages.jpg
- This shows the list of existing chats in the left side, note in mobile and tablet view - user will be able to see this list when they expand with the help of hamburger icon
- Clicking on any of the existing chat will show 02_01Messages.jpg
Sizing:
Please make sure your submission looks good at 1x, 2x, and 3x resolution scalings.
Submission:
Your submission should include:
* The code that implements the requirements
* Deployment documentation, including docs on how to deploy to either iOS or Android (or both)
* A video showing the UI working properly
As part of this challenge you will create flexbox, styling and javascript code, using best practices. We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
React Native:
For this application, we are going to target:
* React Native
* Tablet form-factor
Layout:
This challenge will focus on the tablet layout provided, but please keep in mind your submission needs able to easily expand to support the mobile / phone layout in the future.
Styling:
For Application styling you must follow React Native Styling method: https://facebook.github.io/react-native/docs/style.html. You can also use Style Components if you want (https://styled-components.com/)
- The plan is for each component to have a styling file that is to access and edit instead using a single CSS for the entire application
- Application layout must build using React Native Flexbox
Code encapsulation and quality:
All created native ReactJS components must re-usable and well encapsulated. The goal is a clear, modular approach to implementing the prototype.
- Use Linter, ES6, Jest and other best practice libraries to maintain your code quality.
- Put clear comment/documentation for all ReactJS elements.
- Images, Icons (SVG), etc... should be in a consistent folder
- style.css - use this name for all custom css.
- Please use proper id’s and classes in your naming conventions.
ReactNative/Javascript
- It is fine to use MIT and BSD licensed code and libraries. Please get approval for GPL / LGPL libraries in the forum.
- 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.
Styling
- Provide comments on the CSS code. We need CSS 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 CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS style when create all styling.
Assets/Images
- Wherever it makes sense, you can use icon fonts instead of images.
Hardware Requirements
- iOS 10
- Android 7
You are free to only focus on either iOS or Android, but note that the reviewers may use a different environment, so it's probably in your best interest to test both, if possible.
Test data:
The data shown in the converted UI should be easily editable via JSON files so we can tweak as we present the solution to the client. Make sure to create React Services to pull all data from the JSON
Screen Requirements:
These screens are in scope for the challenge:
01 Sign up:
Reference: 01_01SignUp.jpg
- User will enter username, email and phone no.
- Clicking on “Sign up” will take the user to the Messages page (02_01Messages.jpg)
- At the bottom we have the “Login” link that goes to the login page (01_02Login.jpg)
01_1 Login:
Reference: 01_02Login.jpg
- User will enter their username and email to login to the application
- Provide a checkbox to “Remember Me”
- Clicking on “Login” will take the user to the Messages page (02_01Messages.jpg)
- At the bottom we have the “Sign up” link for the new users that goes to the sign-up page (01_01SignUp.jpg)
Logged in View:
Navigation (Tablet):
- In the left side, we show the main navigation for the app
- User Thumbnail: Clicking on it shows the account setting options (02_10AccountSetting.jpg), selecting logout will take the user back to login screen,
Please ensure that the menu navigation is well defined and easy to extend, as future challenges will need to plugin in new screens and components into the navigation flow.
02 Messages:
Reference: 02_01Messages.jpg
- This shows the list of existing chats in the left side, note in mobile and tablet view - user will be able to see this list when they expand with the help of hamburger icon
- Clicking on any of the existing chat will show 02_01Messages.jpg
Sizing:
Please make sure your submission looks good at 1x, 2x, and 3x resolution scalings.
Submission:
Your submission should include:
* The code that implements the requirements
* Deployment documentation, including docs on how to deploy to either iOS or Android (or both)
* A video showing the UI working properly