Challenge Overview
Welcome to MUDLOG-1908-01 Search UI Prototype Challenge, in this challenge, we are looking for you to develop an Angular web application based on the provided storyboard design.
Let us know any question you have!
BONUS: We'll give $200 as bonus if your submission use OpenLayers.
Background:
A Mud Log is a very long continuous sheet of paper with data on a well based on samples and observations. When researching a well, people pull up these documents to get information on it. We are not recreating the Mud Log. We are designing a search for wells with and without Mud Logs, and allow the user to retrieve the Mud Logs digitally.
Requirements:
The scope of this challenge is to take the UI designs we did for Mud Log Search and create a frontend prototype.
Inputs:
- API # (multiple APIs can be entered)
- Latitude/Longitude
- State (multiple states can be entered)
- Basin
- Depth of Well (a range should be allowed here)
- Vintage (year well was drilled)
- Ability to load .txt file with API #s
- Phrase Category - There are 4 category types Show, Stain, Trace and Negative
- Phrases - these are callouts in the Mud Log record (examples of phrases used in a Mud Log: cut, no cut, fluor, stain, show)
Changes to Filter UI
- Current Database only has phrase/well info for wells that have Mud Log data. Consequently, I think we should remove this filter:
The other filters give a lot of power already.
Output:
- Before any inputs are entered into the filters, the user should be able to see all of the wells across the United States.
- When the filters are entered, the user will be able to only see the wells that meet the filtering parameters.
- When the user gets the results, they should have the ability to export to .csv.
- Also when phrases is used as a parameter, the outputs should show a phrase count (the number of times it was used in each Mud Log) and where the phrases are used in the Mud Log, this would be a (height).
#1: Default map
#2: Filtered Results
#3: Detailed Phrase Count
Important:
Please use provided latest Angular version
The styling of the given app is based on the material.io (Angular Material)
To map use OpenLayers or Google Maps (note: We’ll give a $200 bonus if use OpenLayers)
Focus on Desktop screen size only.
Angular Components must re-usable. The component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
Use JSON format files for the application data.
Create services to fetch data from JSON format files.
Use Linter, Jest and other best practice library to maintain your code quality.
Your submission must follow Angular Coding Guidelines
Put clear comment/documentation for all Angular components
Create README.txt file that explains how to deploy your submission, structure, and commands
Create clear documentation to set up your submission locally
Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5:
- 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 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 on the scorecard.
CSS3
- 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.
Javascript
- Make sure to follow the best practices for the technology
- All JavaScript used must not have any copyrights to any 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.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
- Source Code
- README file, contains how to deploy the submission and server environment
Final Submission
- For each member, the final submission should be uploaded to Online Review Tool
Let us know any question you have!
BONUS: We'll give $200 as bonus if your submission use OpenLayers.
Background:
A Mud Log is a very long continuous sheet of paper with data on a well based on samples and observations. When researching a well, people pull up these documents to get information on it. We are not recreating the Mud Log. We are designing a search for wells with and without Mud Logs, and allow the user to retrieve the Mud Logs digitally.
Requirements:
The scope of this challenge is to take the UI designs we did for Mud Log Search and create a frontend prototype.
Inputs:
- API # (multiple APIs can be entered)
- Latitude/Longitude
- State (multiple states can be entered)
- Basin
- Depth of Well (a range should be allowed here)
- Vintage (year well was drilled)
- Ability to load .txt file with API #s
- Phrase Category - There are 4 category types Show, Stain, Trace and Negative
- Phrases - these are callouts in the Mud Log record (examples of phrases used in a Mud Log: cut, no cut, fluor, stain, show)
Changes to Filter UI
- Current Database only has phrase/well info for wells that have Mud Log data. Consequently, I think we should remove this filter:
The other filters give a lot of power already.
Output:
- Before any inputs are entered into the filters, the user should be able to see all of the wells across the United States.
- When the filters are entered, the user will be able to only see the wells that meet the filtering parameters.
- When the user gets the results, they should have the ability to export to .csv.
- Also when phrases is used as a parameter, the outputs should show a phrase count (the number of times it was used in each Mud Log) and where the phrases are used in the Mud Log, this would be a (height).
#1: Default map
- When hover any dot in map need to show a popup with information. https://marvelapp.com/7338619/screen/57411955
#2: Filtered Results
- Table on bottom
- Need able to back to the previous page with selected filters when click the back button.
- When click circles in map will show popup with icon and select related row in table, same if click in item in table will show icon popup in related circle in map
- When click in gear icon in Total Wells will show Phrase Count Settings popup https://marvelapp.com/7338619/screen/57411960
- When click on Show Filter Criteria will show a block with multiple dropdown to change the filters https://marvelapp.com/7338619/screen/57411959 change any filter will automatically change the results
- When hover any circle in map need to show popup with information https://marvelapp.com/7338619/screen/58038730
#3: Detailed Phrase Count
- https://marvelapp.com/7338619/screen/58452388
- This will show when click in More Option link in Phrase Count range select
- Need able to change the color of each type clicking in pallet icon, when change color here need update colors in map too.
Important:
Please use provided latest Angular version
The styling of the given app is based on the material.io (Angular Material)
To map use OpenLayers or Google Maps (note: We’ll give a $200 bonus if use OpenLayers)
Focus on Desktop screen size only.
Angular Components must re-usable. The component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
Use JSON format files for the application data.
Create services to fetch data from JSON format files.
Use Linter, Jest and other best practice library to maintain your code quality.
Your submission must follow Angular Coding Guidelines
Put clear comment/documentation for all Angular components
Create README.txt file that explains how to deploy your submission, structure, and commands
Create clear documentation to set up your submission locally
Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5:
- 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 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 on the scorecard.
CSS3
- 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.
Javascript
- Make sure to follow the best practices for the technology
- All JavaScript used must not have any copyrights to any 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.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
Final Submission Guidelines
- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial- Source Code
- README file, contains how to deploy the submission and server environment
Final Submission
- For each member, the final submission should be uploaded to Online Review Tool