Challenge Overview
Challenge Objectives
-
Follow up from previous contest, where we built couple of custom UI components in React Native
-
In this contest, we will build additional UI components as well as update the existing documentation for these components.
Project Background
-
Our client is looking at creating a UI Toolkit in React Native for their internal use
-
The UI toolkit is expected to follow the design guidelines provided by our client
Technology Stack
-
We would like you to use Nodejs version 8 (latest) or version 10.
-
We are using React Native version 0.55 for our SDK.
Code access
-
The code base from the earlier contest will be shared in the contest forum.
-
The designs for the components in scope for this contest will also be shared in the contest forum
Individual requirements
Implement Additional UI Components in React Native (Major Requirement)
-
The code base already contains couple of custom UI Components. Update it to include additional ones.
-
Only the following components are in scope for now:
-
Accordion
-
Alert
-
Slider & Range Slider
-
Date Picker
-
Time Picker
-
List
-
Badge
-
Switch Toggle
-
Upload
-
-
We will share the designs for the components in React Native
-
The components have to work on both Android and iOS devices.
-
Besides implementing the components, be sure to support props for the components. We will share the list of props to support for each component in a document that will be shared in the contest forum.
Update documentation website (Major Requirement)
-
In addition to the components, the code base also contains a website that acts like the documentation for the components. The developers of our client will use this website to understand how to use the components that you have created to build apps. Update this with the new components created in this contest.
-
We have shared the design of the expected website as well here. The website needs to show up properly in Google Chrome and IE11 browser.
-
The designs of the documentation website are provided as well which you need to match.
-
List the components on the left in alphabetical order.
-
The navigation links other than Elements will be Dummy, both in the sidebar and the header.
-
The description of the components need to be picked up from the existing components that are available on the web. The design uses text that you are not required to copy. Do not use Lorem Ipsum text either. Make sure to use actual component definitions which you should be able to find on the web, since these are generic components.
-
You will have to show the code to write for each component. Provide a Show / Hide link to show or hide the component code.
-
Both iPhone and Android displays should work.
-
You need to also document the props for the components. The expectation from the documentation is that any developer should be able to go through it and understand how to use the components and its props without the need to go through the source code.
Fix the documentation for existing components (minor requirement)
-
In the earlier contest, we had created couple of components and documented them.
-
The documentation however is incomplete. It does not describe the props that the components use.
-
We expect the documentation to be on the same lines as existing official documentations on React Native, where the props of the components are also documented. Example.
-
Update the documentation for the existing components where you will also mention the props that the existing components use.
Deployment guide and validation document
-
No explicit Deployment Guide is expected. The Documentation website itself is expected to describe the deployment as well as document how to use the components.
-
No validation document expected. The demo of the components itself will be the validation in this case. However, note that your components will be tested on a real device, both Android and iOS devices, and the expectation is that it should display right on a real device and not just the mock device in the web page.
Additional Points To Note
-
Kindly follow existing conventions, both in case of the components and in case of the documentation.
-
Do not use any state management
-
Do not upgrade or change the versions of the modules used in the app.
-
You might need to install third party libraries for the components in scope for this contest. Ensure that they have MIT license. Ask in the forum if they have any other license.