Challenge Overview
Welcome to sparck Javascript Library Idea Generation Contest. As part of this contest, we invite the community to help us realize our client’s web application and suggest a suitable javascript library in the process.
This is an Idea Generation Contest. You are required to only submit a document following the template that will be shared in the contest forum. Code is not expected, though providing it may increase your chances of winning the contest.
Contest Details
A physical document’s data is extracted through OCR and machine learning and this data is then formatted for viewing in the browser. This is where our client’s app enters - it allows the end user to view the document in the browser as well as the data extracted from the document.
This is where we request that you register for the contest and check out the designs of the application shared in the contest forum. The specification here on describes the designs and thus it is advised that you read the following in context of the designs.
Once the text in the document is extracted, both the document and the extracted values are made available through an API. We will share the API with you in the contest forum. This is then displayed on the user interface.
The user interface is straightforward. We will first have the user select a document from a list and then proceed to show the document and the extracted values from that document. Additionally, the user interface, particularly the document display section has the following features:
1. The user can view the digital format of the document within the browser itself.
2. The user can click on a field and can visually see which section in the document the field maps to and thus got its value from. There will be a link between the selected field and section in the document indicating this mapping.
3. The user can drag a field and drop it on a section of the document. On dragging over the document, the sections in the document will highlight themselves indicating that they can be associated with the field and once the user drops the field over the highlighted section, the value in that section is now mapped to the dropped field.
4. The user can also toggle the highlighting of sections in the document that have values.
5. The user can expand the boundaries of a highlighted section to include other sections, and thus append their values to the original field that the expanded section was associated with.
6. The user can scroll, jump to pages and zoom in and out of the document. All of the above should continue to work as before.
This is where you come in. Check out the designs of the application’s user interface and come up with a javascript library and a framework - library to use in order to achieve the document behaviour described above. Framework (or library again) to use for the entire app. We are primarily looking at Angular 2, Reactjs and Vuejs for the entire app. If you are of the opinion that another library will suit the app much better, please first check with the co-pilot through the Contact Manager option. For the document component described, you can chose a any javascript library that is open sourced and has a license of MIT or equivalent.
Points To Note
- It is critical that the library that you chose for the document component works well with the library or framework that you chose for the application overall.
- The application will follow material design. You need to incorporate that in your decision.
- You need to ensure that the implementing the application using the suggested library and framework is not performance intensive. Highlighting the document section, showing the links etc should take not more than 20ms.
- Please check out the wiki link that is shared in the contest forum. It describes each aspect of the application in detail and should be considered as the source of truth.
- You are expected to base your suggestion after checking out all the material shared with you. You can even reference them in your document