Challenge Overview
Welcome to “Hepius - Call Transcription and Analysis Frontend API Integration”, in this challenge we are looking for you help to integrate existing UI Prototype with Backend API.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Requirements:
The scope of this challenge is to integrate the Hepius Call Transcriptions Fronend with Backend API. Please make sure to make things reusable components, functions, etc.
#1: Login
#2: Number of Calls
#3: Average Call Duration
#4: Topics
#5: Data
#6: Sentiment Analysis
#7: Call Records
#8: Agents
#9: Customer
#10: Topics (Table)
#11: Record Details
Backend Spec / Assets / Design
- Please check forum.
Important:
- You can use latest Angular
- To charts, you need to use D3.js
- Focus on Desktop screen size only.
- 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 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 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
- We are recommends combination of Angular 4 and Bootstrap for this challenge. 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
- 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 https://software.topcoder.com/review
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Requirements:
The scope of this challenge is to integrate the Hepius Call Transcriptions Fronend with Backend API. Please make sure to make things reusable components, functions, etc.
#1: Login
- /login
- /forgotPassword
- /resetPassword
- /logout
- If try access any page without login, need go back to login page.
- After login need keep logged if refresh the page
#2: Number of Calls
- Please fix graph (remove black background)
- Ex. to Hour: /dashboard/noOfCalls?startDate=2019-01-01T00&endDate=2019-10-01T12&type=HOUR
- Types: HOUR, DAY and MONTH
#3: Average Call Duration
- Ex. to Hour: /dashboard/averageCallDuration?startDate=2019-01-01T00:00:00.000Z&endDate=2019-12-01T00:00:00.000Z&type=HOUR
- Types: HOUR, DAY and MONTH
#4: Topics
- Ex. to Hour: /dashboard/topicsAggregated?startDate=2019-01-01T00:00:00.000Z&endDate=2019-10-01T00:00:00.000Z&type=DAY
- Types: HOUR, DAY and MONTH
#5: Data
- /dashboard/data
#6: Sentiment Analysis
- /dashboard/sentiments
#7: Call Records
- ex. /dashboard/callRecords?searchString=that&sortByDate=DESC&startDate=2010-01-01&endDate=2019-10-01&sentimentResult=POSITIVE&pageNo=0&limit=10
- Please check API spec to see all available params.
#8: Agents
- ex. /dashboard/agents?searchString=a&sortByName=DESC&pageNo=0&limit=5
#9: Customer
- ex. /dashboard/customers?searchString=mo&sortByName=DESC&customerIds=1&pageNo=0&limit=5
#10: Topics (Table)
- ex. /dashboard/topics?searchString=a&sortByName=DESC&topicIds=1,2&pageNo=0&limit=5
#11: Record Details
- When click in item in Table Call Records (item #7), need open details of selected call.
- Record Details: /callRecords/:id
- Sentiment Analysis: /callRecords/<integer>/sentimentAnalysis
- Sentence: /callRecords/:id/sentences?searchString=a
- Export: /callRecords/:id/export
- Ignore Topic Identified for now
Backend Spec / Assets / Design
- Please check forum.
Important:
- You can use latest Angular
- To charts, you need to use D3.js
- Focus on Desktop screen size only.
- 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 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 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
- We are recommends combination of Angular 4 and Bootstrap for this challenge. 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
- 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 https://software.topcoder.com/review