Your task is to implement the following UI using Angular 1.6.x, JavaScript, CSS and HTML5.
Mockup image: https://www.dropbox.com/s/21r6c10bpr0naud/vlocity-code-challenge-screenshot.PNG?dl=0
Please make a Public Fork of this plunkr and share with us once you're done!
The UI consists of:
- A top bar which consists of a search box to search for a contact, the login user and profile photo.
- The left side bar which consists of a list of full names of contacts.
- The right main panel which consists of the details about the selected contact. The details include the selected contact photo, a button to send a message, rating (number of hearts with a max of 5), a description of the contact. A table of likes and dislikes.
Requirements:
- Each component(sidebar, center panel, header, etc) should be a directive with its own template.
- Fetch the people inside of a Service.
- Make sure the search works, filtering out the people on the list.
Considerations:
- The mockup is just a guideline, you can use any CSS library out there and make it look great (extra points)
- You can use CSS inside the style.scss
Extra points:
- Using SCSS
- Making the UI Reponsive
- Implementing the messaging feature