Overview

We would like you to write a single page, mobile­based web app without any backend. Below is the user story, followed by the design.

Acceptance Criteria

Profile page:

• When the app opens, the profile should be displayed.
• When the user clicks the "add as friend" button, the site background and button colors should change (to the colors of your choice). When clicked for a second time, the original colors should return.
• When a user clicks on a profile image on the home page, the chat page should open.
• The friendship status should persist when user navigates from one view to another or refreshes the page.

Chat page:

• When the chat is opened, a random message from the other user should appear.
• Users should be able to send messages from the chat window.
• When the user clicks the avatar on the chat page, or the back button, he should go to the profile page.
• The message history should persist when user navigates from one view to another or refreshes the page.
• Closing the app window should close the session.

Other

• Assume the html for the chat and profile is already on the page
• Don't create your own "template engine"
• Please don't use any libraries or frameworks (jquery, bootstrap, angular)
• Usage of bundlers, CSS preprocessors and task runners is encouraged
• Please provide a short summary detailing anything you think is relevant, for example:
  • Installation steps
  • How to run your code / tests
  • Where to find your code
  • What would you have done differently if you had had more time
  • Etc.
• Please send your results as a git bundle.

Evaluation

When evaluating your test, the following things are especially important to us:

• How did you organize your css? Ideally, we'd like to see some methodology such as BEM.
• How did you organize your javascript?
• Is your solution compatible with at least two rendering engines (let us know which ones they are).
• Did you meet all of the functional requirements?

Profile Page



Chat Page