Challenge Overview
-
Create Talkscript Designer application from the provided storyboard
Review and Appeals phase for this challenge is shorter than usual. Please make note of the timelines.
Project background
-
Our client is looking to create a tool which will be used by non-technical users to create Chatbots which will be interacting with their customers in the website.
Technology stack
-
Angular 8
-
NodeJS
-
HTML
-
SCSS
-
Typescript
Challenge Assets
-
Storyboard - Marvel link will be shared in the forum
-
Adobe XD source file is provided in the forum
-
Starter pack to begin the application development is provided in forum as well
-
Please request for Zeplin access in the forum
-
API is hosted at https://talkscript-admin-api.herokuapp.com/api/v1
-
Postman collection for API is provided in the forum
-
Swagger is viewable here
Individual requirements
-
Not all screens in marvel is in scope. Screens which has canvas is not in scope. Details in forum.
-
There are 2 roles involved in this application. Administrator and Designer
-
Good quality prototype with clean reusable components will be given higher importance compared to pixel perfect prototype with nonoptimal implementation
-
Requirements for each and every screen is listed below
Logs screen:
-
User will be able to search and download logs from this page. Only Admins will be able to access this screen
-
Download CSV option is expected to work client side. Libraries like papaparse can be used to achieve the same.
-
Page size should be 10 by default and should be configurable later. While clicking on Load more, it should fetch more logs in chunks of 10 and load it to user.
-
Sorting by timestamp is supported in the table layout.
User Management screen:
-
For the existing users, Admin can search with name or email and has option to change their role and department
-
Admin will not be able to downgrade himself from this Screen. (I.e. Change role from Administrator -> Designer for himself), also Admin cannot delete himself.
-
Page size should be 10 by default and should be configurable later. While clicking on Load more, it should fetch more users in chunks of 10 and load it to user.
-
Sort by name is supported in the filter panel.
-
In the Import User pop up, all users available for import will be fetched at one go and searching will be done client side.
-
Searching in the pop up should not disturb the selection.
-
It’s mandatory to select department before importing a user
-
Before importing users, there should be confirmation prompt to confirm whether they want to import `n` number of users? Once user confirm the action, API call should be triggered and success / error message should be displayed accordingly
Departments screen:
-
For the existing departments, Admin can search with name.
-
Page size should be 10 by default and should be configurable later. While clicking on Load more, it should fetch more departments in chunks of 10 and load it to user. (Load more should appear only if there are additional departments to be fetched)
-
Sort by name is supported in the filter panel.
-
In the Create department pop up, Conflict errors should be shown inline. E.g. If API reports that Department name already exists, then the error should be displayed below the department input field in red text.
-
Editing department will also open similar pop up
Scripts screen:
-
Scripts are searchable with name. Last updated date filter should be a range filter instead of single date filter.
-
Every script should be associated with a department
-
Three circles with user initials in the card layout tells about - Created By, Updated By and Published By
-
By default, there will be a script named as “Master Welcome Script” which is the entry point for chatbot conversations. It cannot be deleted at any instance and name cannot be changed.
-
Draft status filter in the right hand side filter panel can be removed and include status `Scheduled`
Unit tests:
-
Unit tests are not in scope.
General requirements
Layout
-
The UI should support resolution 1366x768 and above. The body should be fluid for higher resolutions.
-
Please make use of reusable components as much as you can
-
SVG icons are preferred over PNG or JPEG images
Angular specific
-
Please follow angular style guide while creating components, writing tests, etc..
-
Please pay attention to angular security guide and follow the principles strictly.
-
Ensure that npm run build doesn’t throw any error and build is successful.
HTML Specific
-
HTML should be valid HTML5 compliant.
-
All HTML code naming should not have any conflicts or errors.
-
Please use clean INDENTATION for all HTML code so future developers can follow the code.
-
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.
CSS Specific
-
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.
-
Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
-
You may use SCSS in the project.
Javascript Specific
-
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.
Code formatting
-
Make sure the code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
-
Use existing lint script to ensure that there are no lint errors
Platform
-
Desktop: Chrome latest, Firefox latest
-
Chrome is the main browser
Final Submission Guidelines
-
Zip your updated codebase and submit the zip file using the submit link in the challenge.
- After submitting, please ensure that you are able to download your submission from Online Review