Wipro Mentorship - Admin Angular UI Prototype

Welcome to Wipro Mentorship - Admin Angular UI Prototype!

In this challenge, you will create the first set of pages for our mentorship responsive web application using Angular 5.x based on the provided storyboard (attached on the challenge forum, available on registration).

 

Note, this challenge has short appeals/appeals response and final fix phase. Make sure you don’t miss any deadline.

Assets provided on the challenge forum

• MarvelApp links.

• Sketch source.

• Link to our Zeplin project in case you don’t have Sketch installed.

Screen Requirements

• All screens from 00 to 19 are in scope.

• All routes related to “Admin” will be /admin/**.

• The sidebar should be collapsible. The storyboard shows the collapsed state but clicking the icon on the top left should expand it (similar to mobile).

• Load more buttons should load more content.

• All drag & drop areas should be functional and dragging a file should work.

• From the Learning Areas page, clicking “Bulk Update” will open the modal from https://marvelapp.com/2e3a547/screen/39462798

Target Devices

• Desktop

• Tablet (use fluid version of mobile but make sure the text looks good)

• Mobile

Web Browser Requirements

• IE11

• MS Edge

• Firefox, Safari & Chrome

• Safari on iOS devices

• Chrome on Android devices & iOS devices

Code Requirements

• Follow the best practices for Angular 5 applications.

• Create reusable components & services.

• Use SASS for styling the application.

• All data should be loaded from JSON files. No data should be hardcoded on the code.

• All forms must include input validation & error handling. If there is no design for input validation, you can just show the error in red text below each form input field.

 

This prototype will go directly into development phase where we’ll integrate it with our backend REST API. It is critical to properly organize your code in such format so it won’t require too much effort in the upcoming integration challenges.

 

Important Note! We are running the UI Prototype challenge(s) for the Mentor/Mentee part of this application in parallel thus you must keep your code “clean” to allow us merge the 2 code bases without too many conflicts.

Image Requirements

• All images should be properly compressed to reduce their file size.

• Make sure all images and icons look sharp on retina screens (@2x).

• If any of the icons is not available in the provided sources, you may use alternatives icons (eg. from FontAwesome) but you’ll have to provide a document with the names of those icons so we can replace them later.

• Sprites are optional. You don’t have to use sprites.

Typography & Branding

• Branding document attached on the challenge forum.

• Replace the logo used in the storyboard with the Wipro logo.

Final Submission Guidelines

• Source code in a zip.

• Detailed README.md with all the information on how to setup & run the app.