Autocognita - Literacy Mobile Application Web Admin Portal Integration

Challenge Objectives
The purpose of this challenge is to build the web UI of the admin portal for an Android app, tasks include:

• Build an Angular based web UI for the admin portal to manage the course contents needed by the Android app
• The backend can only be accessed by admins

 
Project Background

• Autocognita is a mobile Android app that aims to help millions of low-literacy adults acquire basic reading skills needed to lead a fulfilling life.
• Users will learn anytime, anywhere with this mobile app.
• The app is similar to Duolingo in nature, but with a focus on literacy.
• The whole system consists of two parts: an admin web portal and an Android app:
  • The web portal is used by admins to manage courses
  • The Android app is used by normal users to learn, the Android app will need to pull course data created by admins

 
Users Roles
This Android app can be used by any user.
The Admin web portal can only be used by admins.
 
User Workflow
Below is a high level workflow of the Android app, you can read the more detailed screen logic document which contains screenshots to better understand the details:

1. Step 1: The user launches the mobile app and Signs Up / Login
2. Step 2: For first time login, show video instruction, and let user complete placement test and show placement result
3. Step 3: User sees the home screen (menu). User can click the current Unit to see Unit Intro, and choose to either test out or continue lesson.
   1. For test out: user may fail or pass. In case of failure the user will see a list of lessons, and the user can choose an available lesson to continue (this is the same as continue lesson) . In case of success user will be taken back to home screen with the next unit unlocked.
   2. For continue lesson: the user will see a list of lessons, and the user can choose an available lesson to continue.
4. Step 4: User enters a lesson and sees a series of different questions, presented one at a time. For example: questions may be image+text, text only, image only, or audio based. Answers may be image, text or audio.

 
Admin Workflow
Admins will provide username and password to login to the admin web portal, and then be able to update course data which once published can be consumed by the Android app.
 
Challenge Scope
For this challenge, we need you to integrate the Angular based prototype with the API so we have a fully working admin portal, all features in shown in the prototype and described in the following sections must work properly:

1. Admins must be able to login using email + password
2. Admins must be able to log out
3. Data demonstrated in New Data Structure v1.14.xlsx must be importable through the admin portal. Note for content management, uploading excel to import data is the key, please carefully check the data structure document and admin portal specs to understand the details / logic.
4. In the admin portal we can upload audio (mp3) file for any content that requires such data. But instead of requiring an uploading of audio files, the backend system should also try to do this automatically: use a cloud-based TTS API (e.g. Google Text to Speech) to generate the audio for the text, and automatically save that audio clip as a file using the supplied filename as specified in the database. Therefore, what we are doing is to pre-load automatically generated TTS as audio files and store them in advance, instead of calling these API in real time. This saves the content contributor to go through the trouble of having to record everything and upload them to the system.  However, some kinds of audio cannot be correctly generated by TTS (e.g. phonic sounds or word parts) and therefore requires a manual audio upload.  There is a bulk upload function to upload multiple audio files at once.
5. In the admin app we can upload images (png) file for any content that requires such data.  There is a bulk upload function to upload multiple image files at once.
6. The admin portal manages a list of sponsor images, the Android app will randomly display one of the images at the end of each lesson / unit / level. These sponsor images can be uploaded through this admin portal.
7. Certificates: the user can earn certificates based on successful completion of all units within a specific level, these certificates are managed through this admin portal.
8. Badges: the user can earn badges based on specific behavior patterns.  These are determined based on usage data collected.  The criteria for how to earn specific badges are shown in the Badges tab of the Data Structure spreadsheet.  These certificates are managed through this admin portal.
9. Newly imported data is in draft status by default, and admin can publish the data if there are no validation errors, which becomes the ONLY version in published state. Previous activate version will change to archived status.
10. Admins can delete data in draft and achieved statuses.
11. Please note audio / image files are not versioned and are always replaced when necessary, deletion of a version should not delete these files that are in use.
12. For actions like import / upload files / publish content / etc… detailed error report must be shown for any cell that’s invalid, as shown in the prototype.
13. Please note that the UI of this portal is really simple and interactions are not complex either, but the essence of this portal is that it must ensure data is valid before it can be published (for example: no screen data refers to data that doesn’t exist in other tabs).

 
Pages
Login
This simply allows admins to login, should show messages in case of errors.
 
Master
This page shows a table of master contents data and a button to import new content:

1. The button allows admins to import a new version of data via excel upload, detailed error report must be shown in case any validation errors are detected
2. Data in Draft and Achieved statuses can be deleted
3. There can be at most one version in Published status
4. Clicking the version number will take the users to the Content tab

 
Content
This page will show the specified version of content (when admins reach this page by clicking the version number) or the latest version of content (when admins reach this page by clicking the Content menu directly).
 
This page simply shows the data imported from Excel and it’s basically readonly, except that for data in Draft status the Publish button can be clicked.
 
Publish should only go through if there is absolutely no error in the data so data validation is critical for this action.
 
Audio / Image
These two pages are basically a central place for admins to upload and check all audio / image files used in different tabs in the Content page.
 
 
API Integration
We expect this challenge to integrate with the API so the portal is fully functional after integration. In case of bugs in the API please raise in the forum and we’ll get API fixed so integration can go through.
 
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 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 in the scorecard.

 
Code Requirements

• 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.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

 
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

 
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.

 
Browser Requirements
Windows: IE 11+, Chrome Latest, Firefox Latest
Mac: Safari Latest, Chrome Latest, Firefox Latest
 
Technology Stack
The following technology stack will be used as part of this challenge:

• Angular 7
• HTML5
• CSS3
• Javascript
• JSON
• REST

 
Review
Your submission will be reviewed on these requirements:

• Challenge Spec Requirements
  • Requirements Coverage
• Coding Standards
  • Best Practices
  • Code Quality
  • Good Code Documentation

 

Final Submission Guidelines

• All original source code.
• Valid test data file(s).
• A readme in markdown format explaining how to build, configure and verify your code.