Challenge Overview
App environment:
- AngularJS application
Basic requirements for this challenge:
- Build UI Prototype with AngularJS as the main frameworks
- Implement all required services to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
Project Background
The Early Alert Tool (EAT) is a data store for all of the Codes and Standards which Thor needs to follow when developing products. As codes and standards change or improve, the divisions within Thor (specifically the division leaders and product managers) need to be alerted of these changes.
The division leaders document the issues which arise from any of these changes along with and need to track details on the action plans for those issues. A number of different users would will be using the application. There could be codes & standards committee representatives who notify other key point people (product managers or division leaders) of the changes.
The main goal of the application is three-fold:
1. Highlight the standards which have been identified by the business divisions as important
2. Notify people within divisions of standards changes (email functionality)
3. Track the internal corporate action plans issues related to standards changes
We just received winning Storyboard Design. This time, we need your help to build the UI Prototype with AngularJS frameworks that will cover all pages requirements. We also listed some additional improvements on some sections.
Read the challenge description carefully and lets discuss any questions you have on challenge forum.
Overall Requirements
- Application to be developed using Angular 5
- Each page will have its own specific url suffix
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
- Check here for complete API specification to help you build the JSON file structure: swagger.yml
- Use separated JSON files to load the datas. You may use json-server OR come up with your own solution
- Important! Create best practice JSON Services that will be easy to swap with the actual REST API service on the next development.
- Requests parameters to be encapsulated as object rather than individual parameters.
- This application need build using web application with focus on Desktop only.
Important!
- Make sure to always read the challenge specs and design carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Technology Stack
Deployment environment requirements
- Localhost
- Heroku
Design Assets:
Storyboard Source Files: https://drive.google.com/open?id=10HJFD71E_1Nn4oYlhtJExhepMzsf8i-R
Login button: https://drive.google.com/open?id=1Ctcv7bRuaEdkVpKAAkfTYZp7rQPj0mK8
MarvelApp flow: https://marvelapp.com/40d8gb0
Fonts
Titillium: https://www.fontsquirrel.com/fonts/titillium
Note: you need convert these fonts into web based and embedded on your submission.
A). General Requirements
1). General
- This is ERD information about the table collections in the database https://www.lucidchart.com/publicSegments/view/5345b6fa-1a47-498d-a6e6-66dafc46b17a/image.jpeg
- We just received the winning submission from Open APi for all endpoints and table/collections. You can follow each endpoints and data type to make easier when change to REST API services later.
- Remove the Share button for all pages.
- Your submission must explicitly address Client General Code Standard from this document: https://docs.google.com/document/d/1JLDieRq7Q8gw86FoQd2qjza33sH5Dq0PD23JH7804pc/edit?usp=sharing
- Let us know if you need some clarifications.
2). Language Support
- Each labels on the app need support multiple languages. Need change the value on all application when user change the language dropdown
- We need to ensure the DB character sets and collation support storing of _data_ in multi-language (including chinese characters)
- Create JSON files to capture different languages for application labels
- You may use this library or come up with your own custom solution: https://github.com/angular-translate/angular-translate
3). User Roles
- We need support some different user roles to access the page
- Here are the required user roles and related pages
Login with System Admin
- Data Input
- CnS Issues
- Change request
- User Management
Login with Data Manager
- Data Input
- CnS Issues
Login with Admin Approver
- Change request
Non Login Users
- Keyword search
- Standard Org Search
- Details page
Some notes:
- Landing page will be Keyword search page
- Non login user able to access Keyword Search & Org Standard Search
- When click on Send email need force user to Login screen
- We will have a login button in top right (where logout is now) that will redirect to login page to access all additional menu items based on user's role.
- Welcome message on the left sidebar should not displayed for Keyword search and Standard Org Search
- After login left sidebar need displayed related pages mentioned for different roles
4). Layout
- Storyboard using Retina size (2x) you need scale to (1x).
- Set minimum width 1366px for the application
- We just need support desktop browsers
- Left sidebar need able to collapse and expand when click the top menu button
- Match design look for dropdown
- Use custom scrollbar
- We need whole application to use fluid width
B). Individual Requirements
1). Keyword Search
- This will allow the user to search for Standards and items related to a Standard using some type of filtration/sorting system.
- User should be able to enter a Search keyword and have categories for filtering the information they need.
- Some of the categories are:
-- Standard Identifying #
-- Standard Description
-- Divisions
-- Sub-Division/Business
-- Product Line
-- Product Line Contact email address,
-- Organization
- Search Result Example data can grabbed from here (Phase 2 tab) https://docs.google.com/spreadsheets/d/15z48cavTDhA9OtxoS6g5-Cel-QQ0tJfo-L3xANGbg0E/edit?usp=sharing
- Search logic needs to allow users to query the entire dataset on any word or number (text) contained in the database and support incomplete word/number queries. As an example if someone is searching for all “complete” items ; the user can enter “comp” and have everything with those letters come up.
- Search can use separated keywords by comma
- Hover on email address need load tooltips
- Print button need load the confirmation window
2). Standards Organization Search
- This is a separate tool to identify which divisions are impacted by a user-selected standard
- A Standard is selected by choosing the Standard Organization and then selecting the Standards Available from that Standard Organization.
- Example Standard Organization Data: EU, European Union Directives
- Example Standards Available: "1907/2006/EG" or "2004/108/EC"
- When a Standard Available is selected the Standard Description is displayed and the divisions that have identified the standard as important are automatically highlighted
- Key contacts (identified in the data) for each of the divisions that are impacted can be selected to be emailed about upcoming or current issues that might affect the Standard.
- Click Add Standard need add another tab. We can navigate to different tabs
- Display initial screen when no standard selected
- Click standards available need load different impacted divisions
- Display list of Recent used Standard
- Click send email button need load the Send Email page
3). Send E-mail
- This screen allow for the user to send an email to request the addition of, or edit data related to a Standard
- Each standard will be related to certain divisions and those divisions will have related e-mails (division leaders and product managers).
- Needs the ability to add links in the email to other informative or related documents or websites
- User can enter the e-mail notification screen from a single standard, then have the ability to add more standards before sending it.
- Also needs to be able to select additional standards with the dependent dropdown selections in order to add other divisions to that notification.
- Send with schedule need use datepicker and hours picker
4). Data Input Screen
- Data input screen need able to Create New Standard or Create New CnS Issue, Create Division and Create sub division.
- It should be able to allow users to add/edit data within the table.
- Email box need allow user to add more than one email address
- Refer to this Code and Standard example data to get clear idea how data structured. https://docs.google.com/spreadsheets/d/15z48cavTDhA9OtxoS6g5-Cel-QQ0tJfo-L3xANGbg0E/edit?usp=sharing
- Match fields for both tabs
- All source code that implement the challenge requirements.
- README in markup language
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
- AngularJS application
Basic requirements for this challenge:
- Build UI Prototype with AngularJS as the main frameworks
- Implement all required services to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
Project Background
The Early Alert Tool (EAT) is a data store for all of the Codes and Standards which Thor needs to follow when developing products. As codes and standards change or improve, the divisions within Thor (specifically the division leaders and product managers) need to be alerted of these changes.
The division leaders document the issues which arise from any of these changes along with and need to track details on the action plans for those issues. A number of different users would will be using the application. There could be codes & standards committee representatives who notify other key point people (product managers or division leaders) of the changes.
The main goal of the application is three-fold:
1. Highlight the standards which have been identified by the business divisions as important
2. Notify people within divisions of standards changes (email functionality)
3. Track the internal corporate action plans issues related to standards changes
We just received winning Storyboard Design. This time, we need your help to build the UI Prototype with AngularJS frameworks that will cover all pages requirements. We also listed some additional improvements on some sections.
Read the challenge description carefully and lets discuss any questions you have on challenge forum.
Overall Requirements
- Application to be developed using Angular 5
- Each page will have its own specific url suffix
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
- Check here for complete API specification to help you build the JSON file structure: swagger.yml
- Use separated JSON files to load the datas. You may use json-server OR come up with your own solution
- Important! Create best practice JSON Services that will be easy to swap with the actual REST API service on the next development.
- Requests parameters to be encapsulated as object rather than individual parameters.
- This application need build using web application with focus on Desktop only.
Important!
- Make sure to always read the challenge specs and design carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Technology Stack
Deployment environment requirements
- Localhost
- Heroku
Design Assets:
Storyboard Source Files: https://drive.google.com/open?id=10HJFD71E_1Nn4oYlhtJExhepMzsf8i-R
Login button: https://drive.google.com/open?id=1Ctcv7bRuaEdkVpKAAkfTYZp7rQPj0mK8
MarvelApp flow: https://marvelapp.com/40d8gb0
Fonts
Titillium: https://www.fontsquirrel.com/fonts/titillium
Note: you need convert these fonts into web based and embedded on your submission.
A). General Requirements
1). General
- This is ERD information about the table collections in the database https://www.lucidchart.com/publicSegments/view/5345b6fa-1a47-498d-a6e6-66dafc46b17a/image.jpeg
- We just received the winning submission from Open APi for all endpoints and table/collections. You can follow each endpoints and data type to make easier when change to REST API services later.
- Remove the Share button for all pages.
- Your submission must explicitly address Client General Code Standard from this document: https://docs.google.com/document/d/1JLDieRq7Q8gw86FoQd2qjza33sH5Dq0PD23JH7804pc/edit?usp=sharing
- Let us know if you need some clarifications.
2). Language Support
- Each labels on the app need support multiple languages. Need change the value on all application when user change the language dropdown
- We need to ensure the DB character sets and collation support storing of _data_ in multi-language (including chinese characters)
- Create JSON files to capture different languages for application labels
- You may use this library or come up with your own custom solution: https://github.com/angular-translate/angular-translate
3). User Roles
- We need support some different user roles to access the page
- Here are the required user roles and related pages
Login with System Admin
- Data Input
- CnS Issues
- Change request
- User Management
Login with Data Manager
- Data Input
- CnS Issues
Login with Admin Approver
- Change request
Non Login Users
- Keyword search
- Standard Org Search
- Details page
Some notes:
- Landing page will be Keyword search page
- Non login user able to access Keyword Search & Org Standard Search
- When click on Send email need force user to Login screen
- We will have a login button in top right (where logout is now) that will redirect to login page to access all additional menu items based on user's role.
- Welcome message on the left sidebar should not displayed for Keyword search and Standard Org Search
- After login left sidebar need displayed related pages mentioned for different roles
4). Layout
- Storyboard using Retina size (2x) you need scale to (1x).
- Set minimum width 1366px for the application
- We just need support desktop browsers
- Left sidebar need able to collapse and expand when click the top menu button
- Match design look for dropdown
- Use custom scrollbar
- We need whole application to use fluid width
B). Individual Requirements
1). Keyword Search
- This will allow the user to search for Standards and items related to a Standard using some type of filtration/sorting system.
- User should be able to enter a Search keyword and have categories for filtering the information they need.
- Some of the categories are:
-- Standard Identifying #
-- Standard Description
-- Divisions
-- Sub-Division/Business
-- Product Line
-- Product Line Contact email address,
-- Organization
- Search Result Example data can grabbed from here (Phase 2 tab) https://docs.google.com/spreadsheets/d/15z48cavTDhA9OtxoS6g5-Cel-QQ0tJfo-L3xANGbg0E/edit?usp=sharing
- Search logic needs to allow users to query the entire dataset on any word or number (text) contained in the database and support incomplete word/number queries. As an example if someone is searching for all “complete” items ; the user can enter “comp” and have everything with those letters come up.
- Search can use separated keywords by comma
- Hover on email address need load tooltips
- Print button need load the confirmation window
2). Standards Organization Search
- This is a separate tool to identify which divisions are impacted by a user-selected standard
- A Standard is selected by choosing the Standard Organization and then selecting the Standards Available from that Standard Organization.
- Example Standard Organization Data: EU, European Union Directives
- Example Standards Available: "1907/2006/EG" or "2004/108/EC"
- When a Standard Available is selected the Standard Description is displayed and the divisions that have identified the standard as important are automatically highlighted
- Key contacts (identified in the data) for each of the divisions that are impacted can be selected to be emailed about upcoming or current issues that might affect the Standard.
- Click Add Standard need add another tab. We can navigate to different tabs
- Display initial screen when no standard selected
- Click standards available need load different impacted divisions
- Display list of Recent used Standard
- Click send email button need load the Send Email page
3). Send E-mail
- This screen allow for the user to send an email to request the addition of, or edit data related to a Standard
- Each standard will be related to certain divisions and those divisions will have related e-mails (division leaders and product managers).
- Needs the ability to add links in the email to other informative or related documents or websites
- User can enter the e-mail notification screen from a single standard, then have the ability to add more standards before sending it.
- Also needs to be able to select additional standards with the dependent dropdown selections in order to add other divisions to that notification.
- Send with schedule need use datepicker and hours picker
4). Data Input Screen
- Data input screen need able to Create New Standard or Create New CnS Issue, Create Division and Create sub division.
- It should be able to allow users to add/edit data within the table.
- Email box need allow user to add more than one email address
- Refer to this Code and Standard example data to get clear idea how data structured. https://docs.google.com/spreadsheets/d/15z48cavTDhA9OtxoS6g5-Cel-QQ0tJfo-L3xANGbg0E/edit?usp=sharing
- Match fields for both tabs
Final Submission Guidelines
Deliverables- All source code that implement the challenge requirements.
- README in markup language
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version