Create React Native UI Toolkit - Part 1

Challenge Objectives

• We have the designs for over 25 components that we would like to implement as components in React Native

• We will also be creating a website that acts like the documentation for the UI Toolkit

 

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

• This contest has only limited number of components in scope. We will be launching additional contests to implement the rest of the components.

 

Technology Stack

• We would like you to use Nodejs version 8 (latest) or version 10.

• Use 0.56 version of React Native

 

Code access

• No code available since this is the first contest.

• The designs will be shared in the contest forum

 

Individual requirements

Implement UI Components in React Native (Major Requirement)

• We will share the designs for the components in React Native

• Only the following components are in scope for now:

  • Button

  • Button Group

  • CheckBox

  • Radio

  • Link

  • Notification

  • Progress Bar

  • Text

• The components have to work on both Android and iOS devices.

• Besides implementing the components, be sure to provide additional 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.

Provide a documentation website (Major Requirement)

• 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.

• Document the earlier created components in this website.

• Use HTML / CSS and jQuery if needed to build the website. You are not required to use Reactjs or Angular or any other framework.

• 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.

• In the right side, demo the components. You can use React Native Web Player or React Native Web to demo. You can use something else too. Please first ask in the contest forum. You are however not allowed to display the components by writing the HTML / CSS codes for the demonstration yourself. The component demo has to be from the React Native code itself.

• 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.

 

Deployment guide and validation document

• In the HOME section of the documentation website, describe how to install and include your UI Kit in any React Native app.

• 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.

Final Submission Guidelines

Zip the UI Kit. Zip the Documentation. Share a single zip file containing both these zip files.