Wipro Mentorship - Mentor/Mentee Angular UI Prototype part 2

Welcome to Wipro Mentorship - Mentor/Mentee Angular UI Prototype part 2!

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

In this challenge, you will create the rest of the 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 15D - Connection Details - No Notes.png to 32D - Mentor Create Meeting Request - Group Selected.png are in scope.

• All routes related to “Mentees” will be /mentee/** and all routes related to mentors will be /mentor/**.

• Screen 22D - Mentee Profile Edit.png is already implemented.

• The “Attach documents” link on the Notes pages (15D - 17D) should allow the user to pick a file.

• In the Notes pages (15D - 17D) the user should be able to add a note. https://marvelapp.com/387822g/screen/39474971 this is the screen without any note. All notes should be displayed with chronological order http://take.ms/1L05w.

• In the edit action plan page, originally, the form should be empty and only one option per section should be visible and the user should be able to add/remove rows. Note that if there’s only one row, the [-] button should be hidden.

• Datepickers should be implemented as they are currently implemented in the rest of the pages.

• From the dashboard page, clicking “Register as mentor” should show the popup from https://marvelapp.com/387822g/screen/39474982

• The search suggestions from https://marvelapp.com/387822g/screen/39474989 should be implemented. You don’t have to create a super complex string matching algorithm here.

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 admin 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

• 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.