Challenge Overview
Project Overview
We want to update the way we collect information from a website periodically. The current experience requires a person to update the information manually from the Texas RRC (Railroad Commission) website, record data in excel spreadsheets, and has no means for data visualization or analytics.
Basically, what is going on here is that there is an administrator for the spreadsheet at our client that manually updates this spreadsheet based on information that is publicly available.
We're going to build a process that scrapes a website to populate the majority of the information. But the admin will still need to go in a verify that information is being updated correctly and fill in missing values from some handwritten documents. The state of Texas still allows the submission of handwritten Well Permits and other documents, so automated extraction will be difficult for some elements.
For this challenge we need your help to build a prototype using HTML5/CSS/Angular.js 5 which will be the frontend of the new process. We’ll provide full UI design and you should build the prototype using Angular.js 5.Reviewers and submitters: please pay attention to the shortened review / appeals phases.
Prototype Requirements
- The data to be displayed must come from local JSON files and cannot be hardcoded.
- Must use Angular 5+ for the prototype
- Must follow Angular best coding practices
- Please follow the design to create the prototype, support the minimum width as indicated by design and make it fluid
- Create README.md file that explains your UI prototype structure
- You must keep the submission clean, for example: if you create the prototype based on a seed project, it may contains many useless files or instructions in the README, make sure you delete them all and only keep the ones are are relevant to this prototype. This will affect your score.
Screen Requirements
Please note for this challenge you don't need to build all the screens in the design, instead you only need to build all pages under the Sheet Information tab, others like login / dashboard / settings / etc... can be ignored in this challenge.
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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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 create 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.
- Use SCSS / SASS for styling
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.
Screen Specifications
- Must support desktop and tablets.
- Mobile view is not required, however, the output should be website that doesn't completely break on a mobile device.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet: Latest Android and Safari Browsers.