Culture Works Tone Analyzer - UI Prototype Challenge

Challenge Objectives

• Create an Angular app for the Web application
• Create a different Angular app for the Chrome Extension 

Project Background

This project will create a tool that allows people to understand his or her tone in written communications. It will aggregate specific communications and provide the user with a tone profile dashboard, which may also be exported to PDF. The tone profile will give individuals awareness of how he or she typically communicates with others. The tone is analyzed by sending the written text through the Watson Tone Analyzer APIs, then it is aggregated to present a holistic score per person. Additionally, the tool must be able to present a score for single written communications as they are drafted. 

Technology Stack

• Angular 6+

 

Code access

None
 

Individual requirements

This project is comprized of two parts: web application and chrome extension. 
You are responsible for creating an architecture for both parts, and they will share a same back-end. 

1. Chrom Extension - the chrome extension has two major functionalities:

• Allows user to scan outlook emails to generate a tone profile. Note that as there might be a lot of emails to scan, so it could be quite time consuming, so the scanning should be done in the back-end. And your architecture needs to make sure it's very efficient. And each user will only have one tone profile, so if user chooses to rescan the emails, the newly generated tone profile should replace the old one.
• Allows user to analyze the text on webpage in realtime. Note that the storyboard only demonstrates it on the outlook compose-new-email page, but it should work on as many pages as possible with input boxes / text areas. 

2. Webapp - the webapp has the following major functionalities:

• Allows user to view the tone profile
• Allows user to scan the outlook emails to generate or re-generate the tone profile
• Allows user to analyze the inputed text. 
• Allows user to analyze to the uploaded doc, docx or text file

The other functionalities like login, register etc. should be very intuitve from the provided storyboard. 

Note that you should create two separate Angular 6+ applications for webapp and chrome extension. And you can refer to this tutorial for Angular 2+ based chrome extension: https://www.red-gate.com/simple-talk/dotnet/software-tools/developing-google-chrome-extension-using-angular-4/

Page Requirements
Chrome Extension Pages:

• screen 1, 2, 3
  • the login page in chrome extension, it will be displayed initially if user is not logged in. 
  • please remove screen-2. Click the register link will open the register page from web app in a new browser tab.
  • Click forgot-youir-password will open the page from webapp in a new browser tab.
• screen 10 - the page to add the extension from the app store
• screen 11, 12 
  • the page to display after user is logged in
  • click the "Home", "New Document", and "Settings" links, will open the page from the web app in a new browser tab
  • the login response will have a field indicating the user has a tone-profile or not. If user has no tone-profile, display "Scan email data", otherwise, display "Rescan email data". 
  • click the scan/rescan button, open the screen-20 from webapp in a new browser tab. 
• screen 13, 14
  • This is the compose-new-email web page from Outlook Mail: https://outlook.live.com/owa
  • The chrome extension will insert a page-element on this web page to display the tone analsis result
  • Initially only the page-element like this is displayed  (highlighted): https://monosnap.com/file/JXbgdDO8sxMiQtoxbeZRnoYy92Mtwq, and after user starts to input text, the tone analysis result will be displayed as well (highlighted): https://monosnap.com/file/EIZuZsL403iFNzfvJm6vKqEnYzOLk8
• screen 15
  • This is displayed after user clicks the inserted page-element on screen 13 & 14
  • Click "open in tone workers" will open a same page from webapp in a new browser tab
  • The email content shown on the left should be in a text area, and it should be editable. User can change the text, and click the "Reanalyze" button to re-generate the analysis result
  • The "sentence count" section shows the number of sentences for each tone, and length of the colored underline indicates the score of the corresonding tone
• screen 16
  • User can click the tone in "sentence count" section to highlight the sentences in the email content. 
  • User can click "x" icon to remove the highlights
  • Only sentences of one tone are highlighted each time

Webapp Pages

• screen 4, 7 - the login page
• screen 5 - the register page
• screen 6 - the registration confirmation page
• screen 8 - this should be the reset password page
• screen 9 - this is the forgot password page
• screen 17 - the home page
• screen 18 - the new document page
• screen 19 - click the "upload" link in the header, a select file dialog is displayed to allow user to select a file to upload for analysis
• screen 20
  • the tone profile page
  • this one shows a progress bar indicating the scanning is in progress
  • user can click the scan/rescan in the header to start the scanning
  • show a message "nothing to display, scan your emails to generate a tone profile" if there is no tone-profile and there is no scanning in progress. 
• screen 21 - this is no longer needed, as we only need to upload one document each time
• screen 22
  • this page is changed to this: https://monosnap.com/file/EZQscpPnULwFkaZDM1VspCHi63zPIl
  • it's displayed after the uploaded file is processed by the back-end
  • it's also displayed after user clicks the "Analyze tone" button on screen 20
  • it has similar functionality as the one in chrome extension
• screen 23, 24 - refer to screen 22 above
• screen 25, 26, 27
  • The tone profie page with data
• screen 28
  • the settings page
  • please add a radio groups "Select email provider" with options: Outlook and Gmail. It should be above the "Scan emails over". 
• screen 29, 30 - these are the dropdowns
• screen 31 - we don't need this. Please remove the "Source" dropdown from the tone profile page as well. 

Prototype Requirements

- Please create a mockup backend using json-server.
- Must use Angular 6+ and Material Design components
- The pages should clearly indicate invalid input data to users, for example: on login screen if users hit login without entering username, the textbox should be highlighted in red with an error message too
- Must follow Angular best coding practices
- Create README.md file that explains your UI prototype structure
- Your submission must follow the Responsive UI best practice
- Utilizes proper security standards to reduce the chance of malicious penetrations. Error and exception should be handled in a user friendly way and should be informative. Must include latest standards include A/B Testing and analytics.

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 follow snake-case and use a "-"  to separate multiple-word classes (i.e.. "main-content")
- 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 
- Use reset and normalize css

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
- Try to avoid implementing business logic in the view

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. 
- Must support retina display.
- Layout width should be fluid.

Browser Requirements

- The Webapp should work on Desktop: IE11+, Latest Firefox, Latest Safari, Latest Edge & Chrome Browsers (Mac & Windows).
- The Chrome Extension should work in Latest Chrome Browser

Final Submission Guidelines