Challenge Overview
Challenge Objectives
- Develop the “Create New Call Report” and "Create New Wall Crossing" pages of the application.
Project Background
Our customer is having an application which is used to manage credit deals. Current Application uses WPF technology as a user interface which requires installation on each user machine. As a customer trying to centralize the application and would like to move towards HTML5 based solution, the presentation layer functionalities are moved to the new application.
- We have already built the "Create New Project" pages
- This challenge we will buid the missing 2 new pages.
Technology Stack
- ReactJS
- NodeJS
- Javascript
- LESS
General Requirements (All Major)
In this challenge, we are building the “Create New Call Report” and "Create New Wall Crossing" screen (items 4 and 5 in the requirements document in the forum).
- For “Create New Call Report” page you need to create a placeholder page with 2 buttons (Create Call Report and View Call Report)
- Clicking on Create Call Report will open the right hand screen with “Create New Call Report” page (items 4.1 to 4.6).
- Clicking on View Call Report will open the right hand screen with “View New Call Report” page (item 4.6).
- TDD is in scope for this challenge. But only for components created during this challenge (see next item).
- You MUST use this library https://react.semantic-ui.com/ for the needed components. Please style it as necessary. The library has tested for all its components. If for some reason you need to extend any component re-use the test structure.
- Application skeleton has been provided in the forum. Don't use the components in this codebase unless authorized by copilot/Manager.
- Must support desktop view (browser) >= 1024px.
- IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows) should be supported.
- Main Application should be organized under the app folder. Application features should be as much as possible modularized to encourage separation of concern concept.
- Split the code into reusable components as you implement them.
- Each application feature again should split into containers and views. Complex screens should be further divided into smaller components and grouped under the screen-specific folders.
- Common components that can be reused across pages and features are grouped under a common folder.
Individual Requirements
Detailed document with an explanation of the requirements is provided in the forum. Please, read it carefully and ask questions in the forum to understand the specifics of this project. All described requirements in the document are major.
We do not have special UI design in form of marvel app or UI screens. Instead, we have and need to follow detailed design guidelines from the customer.
We also provide in forums:
- API spec document
- Document describing requirements for visual look and feel (Design guideline). Fonts, colors, iconography, typography.
- Previous challenge source code.
The project has mock API preconfigured and available for usage. All requests to it should be handled via actions/reducers pattern. Follow it when writing the related services.
Mock API integration is not in scope but if submission passes review and makes usage of mock API a bonus of $200 will be paid.
JSX/JS/HTML requirements
- JSX/JS/HTML should be valid HTML5 compliant.
- Provide comments on the page elements 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 code so future developers can follow the code.
- All code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS requirements
- Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
- You should use LESS in the project.
- Autoprefixer can be set up as a part of the build process.
- 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 CSS3 style when creating all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
JS requirements
All JavaScript must not have copyright by a third party. 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.
Licenses & attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok. If a library is not commercial friendly you will need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Final Submission Guidelines
- Updated source code.
- README and validation documents with detailed steps on how to deploy, configure and start the application.
- Verification document describing how to verify Your submission.