Challenge Overview
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.
This challenge will extend the initial skeleton with new components. You will build out these components in a way that makes them easy to integrate into a fully converted prototype in a subsequent challenge.
React Native:
For this application, we are going to target:
* React Native
* Tablet form-factor (both portrait and landscape orientation)
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. You must support both portrait and landscape orientation.
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 ids and classes in your naming conventions.
Integration
NOTE: There are a number of parallel challenges running to build these components. A subsequent challenge will merge them all into a single, converted prototype. Please make sure your submission is well thought out and encapsulated with future integration in mind. Also, because of this, we need to keep consistent with the current skeleton. Please don't make wide-sweeping changes to the current code structure.
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. To see the individual JPGs, go here:
https://marvelapp.com/279je8e
Click "Menu" / "View All Screens"
https://marvelapp.com/279je8e/screen/27460661
https://marvelapp.com/279je8e/screen/27460662
https://marvelapp.com/279je8e/screen/27460687
https://marvelapp.com/279je8e/screen/27460648
https://marvelapp.com/279je8e/screen/27460649
https://marvelapp.com/279je8e/screen/27460659
https://marvelapp.com/279je8e/screen/27460660
https://marvelapp.com/279je8e/screen/27460658
Browse Groups
Reference: 03_02BrowseGroups.jpg
- User can search and join by clicking on “JOIN” button, once the join button is clicked it changes to “Waiting” status.
- User will be able to create a new group by clicking on “Create group” and it will show 03_03CreateGroups.jpg
Create Group:
- Clicking on ‘browse group” will take the user back to 03_02BrowseGroups.jpg view.
- User will enter all the details and click on “Create Group” to see the new group appearing in left sidebar.
In the header is the "28 member" text. Clicking this area will show the member list. The user should be able to filter this list by typing in part of a member name in the search box.
Meetings:
Reference: 06_01UpcomingMeeting.jpg
- Clicking on “+” at the top allows the user to create a new meeting, a modal window is show as in 06_03ScheduleMeeting.jpg
- User enter all the required details and then clicks on “Schedule Meeting” to create a meeting. This hides the modal window.
- By default, we show the upcoming meeting tab - this shows a list of meetings which the user can edit / delete
- Clicking on “Meeting History” tab shows 06_02MeetingHistory.jpg, this is same as upcoming meeting list but without start / edit and delete buttons, instead we have duration and meeting participants column.
- Deleting a meeting should prompt - "Are you sure you want to delete this meeting?" "Yes / No"
- Clicking "Start" won't do anything yet - it will be integrated in with the video components in the final integration challenge.
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
Additional points:
If you fix these bugs in the original skeleton, that could be considered additional functionality:
1. Images aren't properly sized all the way up to @3x
2. There's no validation shown for the login or signup forms.