Best Practices Web Admin Page Development

CHALLENGE OBJECTIVES

Welcome back to “Best Practices Web Admin Page Development Challenge”.  In this challenge, we are looking to convert to a web application the design pages for the Application Admin Portal of a large Dental Care Company.

Let us know in the forum if you have questions!

 

PROJECT BACKGROUND

Recently we just finished the first challenge on Dentist Workflow for the web application and are building the design for the Owner module.

 

Design Marvel App link:

• https://marvelapp.com/b0ig660

 

REQUIREMENTS

• Build a Web application Angular.io 7.x based on the provided design screens.

• The source of the design can be found in the forum.

• Although there is no API integration please provide means for testing different scenarios to show all the UI possibilities by loading data from a JSON file and not hardcoded.

• The application should allow lazy loading for better performance.

• Create reusable components whenever possible.

• The application is targeted for desktop only.

 

HTML REQUIREMENTS

• 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 SASS 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.

 

WORKFLOW

The following screens are in scope along with their requirements (if any).

 

1. Login:

• 00 login@2X.png

 

2. Dashboard:

• 01 dashboard@2x.png
• ���02 dashboard@2x.png

 

3. Dashboard:

• 08 Activation email - Patient View@2x.png

 

4. Findings:

• 13 findings@2x.png

 

5. Add Image:

• 17 add image@2x.png

 

6. Add solution:

• 25 add solutions@2x.png

 

7. Edit homecare:

• 26 edit home care@2x.png

• 27 edit home care@2x.png

 

8. Homecare - Add Procedure:

• 30 home care add procedure@2x.png

• 31 home care add procedure@2x.png

• 32 home care update product@2x.png

• 34 procedure added@2x.png

 

9. Homecare add procedure:

• 38 notification@2x.png

 

10. Print page. The page should be loading from data in a JSON file:

• ���41 print page #2@2x.png
• 44 print page #5@2x.png

 

OPERATING SYSTEMS

• Microsoft Edge (latest), Google Chrome (latest), Mozilla Firefox (latest), Safari (latest)

 

TECHNOLOGY STACK

The following technology stack will be used as part of this challenge.

• Angular.io 7.x

• Typescript

• Javascript

• HTML5

• CSS3

 

TECHNOLOGY REQUIREMENTS

The following technologies are required as part of this challenge.

• Error Logging (log to console)

 

FUTURE INTEGRATION POINTS

The following integrations are not in scope -- but are being provided as an FYI of future work to come.

• API Integration

 

FINAL DELIVERABLES

• All original source code.

• A brief write up explaining how to build, configure and deploy your code.

• Validation to document to show how to see the different scenarios described in the design.

Final Submission Guidelines

• Source code with web page developed
• README.md with instructions to build and deploy the app locally.