Context

Project Context

The client has one web application created with old Angular version. We need to help the client to create a new project with Angular 9 and PXBlue 2.0.

Challenge Context

Create Login page and Settings page of Thor Power Xpert application by following the guide. (see appendix)

Expected Outcome

A new codebase with a Login Page and Sidebar implemented.

Challenge Details

Technology Stack

• Angular 9
• TypeScript
• NodeJs 12+
• PXBlue 2.0

Individual Requirements

• Create a new project with Angular 9 and Power Xpert Blue https://pxblue.github.io/ . You can start a project by using PX Blue CLI https://pxblue.github.io/development/frameworks-web/angular
• Unlike other frontend challenges, there’s no storyboard provided. Instead, one implementation guide is provided. You need to follow the screenshot guidance to create pages.
• Create login (page 4-6 in the guide) page.
• Create settings pages (page 22-38 in the guide).
• Sidebar in settings should be a component so that other pages could use it in the following challenge.
• Must include Responsive design of Desktop, HMI and Tablet on these following sizes and the zoom level supports from 75% to 120%:
  • 10” - 1024 x 600 pixels
  • 15” – 1366 x 768 pixels
  • 21” – 1920 x 1080 pixels
  • Support 75% - 120% zoom
• Please follow existing codebase structure and keep the same filename if possible. So that client could easily switch to new project.

Note:

• Existing legacy codebase is provided for reference.
• There should be no ESLint errors.
• Clear document (README.md) explaining how to develop and run the code locally.
• No tests is needed.

Appendix: Login Screen

 

 

Appendix: Settings Screen

and other settings pages.

Final Submission Guidelines

• Full code that covers all the requirements.
• README.md including information on how to setup and run your application.