Project Background

Our customer has a legacy app built in 1998 and it’s time to re-write this application to a modern web app. For this project, we are going to rewrite a small part of the application called FOBO Worksheet.
 

Challenge Objectives

For the purpose of this challenge, we need the community to help fix some bugs and implement some enhancements.

There are a total of 23 issues to fix, most of them are minor.

IMPORTANT NOTES:

• To pass review you will have to fix at least 18 of them.
• Winner will be paid another $200 if all issues are fixed.
• You'll get access to the repos, but please based on your own fork and do NOT create new branches in our repo. Winner will be asked to send merge requests to our repos.

Technology Stack

• .NET 4.5.2
• SQL
• Docker
• Sybase 15.7
• REST
• Angular 7
• HTML5
• Javascript
• Bootstrap
• CSS

 

Challenge Scope

All issues listed in the forum are in scope, please register to see details.
You should check out the previous challenge page to understand more details about the app: https://www.topcoder.com/challenges/30083368/?type=develop
 

General Requirements

• The main content should have fluid width to fill all available space, minimum supported resolution: 1366 * 768
• Pagination should work
• Must use Angular 7 and follow the provided design
• The pages should clearly indicate invalid input data to users, for example: if user tries to submit a page without providing a required text field, the textbox should be highlighted with an error message. Do NOT use browser alert for errors.
• Must follow Angular best coding practices
• You are expected to create a detailed README file including information on how to setup, run and verify your fixes.

 

HTML Requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML 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.

 

Code Requirements

• 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.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

 

Javascript Requirements

• All JavaScript must not have a 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.
• Use typescript and linter for code quality

 

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, but if a library is not commercial friendly you 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.

 

Browser Requirements

Windows: IE 11+, Edge, Chrome Latest, Firefox Latest
Mac: Safari Latest, Chrome Latest, Firefox Latest
 

Documentation

Register to download the following documents we provided in the forum

• Existing Code (both backend and frontend)
• List of issues

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file in markdown format including information on how to configure, build and and run your application.
• A verification document in markdown format that shows how to verify your fixes. Note that a video is NOT acceptable for the purpose of this