Wipro Mentorship - Admin Angular UI Prototype part 2

Welcome to Wipro Mentorship - Admin Angular UI Prototype part 2!

In the previous challenge, we created a set of pages for our mentorship responsive web application using Angular 5.x.

In this challenge, you will create the rest of pages based on the provided storyboard (attached on the challenge forum, available on registration).

 

Note, this challenge has short screening/review/appeals/appeals response/aggregation/final fix/final review phases. 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.

• Link to access the repo

Screen Requirements

• All screens from 19-learning areas config.png to 35-sub admin-dashboard.png are in scope.

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

• 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

• Submit a git patch against the latest commit in the develop branch

 

We highly recommend to also submit the whole project folder in case your patch file is broken.