Wipro Mentorship - Mentor/Mentee Angular UI Prototype

Welcome to Wipro Mentorship - Mentor/Mentee 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 14 and screen 23 (both Desktop & Mobile) are in scope.

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

• We don’t have a design for a login/register page but you need to create 2 very simple pages for this functionality. For the registration page, use the fields from the PERSONAL DETAILS section from the edit profile page and make all of them required. https://marvelapp.com/387822g/screen/39474979

• 00 Is our landing page after the user is logged in but hasn’t registered as mentee yet.

• Clicking `Register as Mentee` will take the user to screen 23 https://marvelapp.com/387822g/screen/39474979 where the user will have to enter all information. The user should also be able to change the user picture.

• After clicking Save, take the user to the Mentee dashboard https://marvelapp.com/387822g/screen/39474952

• From Mentee dashboard, clicking on any mentor, will open the mentor details page https://marvelapp.com/387822g/screen/39474960

• Clicking Send Request will open the modal from https://marvelapp.com/387822g/screen/39474968 and clicking save should show the modal from https://marvelapp.com/387822g/screen/39474969

• The notifications sidebar, should work in all pages https://marvelapp.com/387822g/screen/39474958

• In the “ALL POSTS” section of a learning category, clicking load more should load more content.

• The filters in https://marvelapp.com/387822g/screen/39474957 should work.

• The search autocomplete https://marvelapp.com/387822g/screen/39474959 should work in all pages and should suggest both learning areas and employees. An employee may be a simple user with no role, a mentor or a mentee. If the user has no roles, show the invite links as per the storyboard.

• In the mentor details page https://marvelapp.com/387822g/screen/39474960 , clicking connect should open the success modal from https://marvelapp.com/387822g/screen/39474962 .

• After 2-3 seconds, show the request status message (screens: https://marvelapp.com/387822g/screen/39474963 & https://marvelapp.com/387822g/screen/39474966 ) You can make this random.

• The calendar from the “My connections” page must be implemented.

• Clicking on any mentor, will open the mentor details page https://marvelapp.com/387822g/screen/39474960

• Clicking Send Request will open the modal from https://marvelapp.com/387822g/screen/39474968 and clicking save should show the modal from https://marvelapp.com/387822g/screen/39474969

•  

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

• Source code in a zip.

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