ZEPL .

Front-end engineer challenges = This is the list of currrently available challenges. Please refer to the corresponding readmes for further instructions

1. Serialize state
2. Slack clone

Serialize State

This challenge is designed to assess the ability of a front-end candidate to write component-based UIs with serilizable application state. This can be useful in QA, e.g. the whole app state can be saved, sent to developers and restored to reproduce bugs.

Submission instructions

1. Fork this repository on github.
2. Complete the project as described below within your fork.
3. Keep the commit history - don't squash.
4. Push all of your changes to your fork on github and submit a pull request to this repository.

Project description

Write a higher-order component that renders arbitrary component tree as children. This higher-order component should have an input box and two buttons. When clicked, the first button will serialize the full state of the application and copy it to the clipboard. This state then can be pasted to the input box and reset the current application state on the click of the second button.

Refer to the image below for a simple example. Black border represents the parent component that you need to develop. Red border represents an example of arbitrary children which state your component should to be able to save and reset.

Implementation instructions

Use any technology you want that supports component-based UI development.

Evaluation criteria (in order of importance)

1. Code organization
2. Code readability (including comments)
3. Commit history - structure and quality
4. Test coverage

Slack Clone

This challenge is designed to assess the ability of a front-end candidate to solve real-world problems using our current technology stack. While the difficulties arising during this project are real, the project itself is a mock and will not be used by us for business purposes.

Submission instructions

1. Fork this repository on github.
2. Complete the project as described below within your fork.
3. Keep the commit history - don't squash.
4. Push all of your changes to your fork on github and submit a pull request to this repository.

Project description

Make a simplified slack clone.

Structure:

1. sidebar on the left:
   • list of channels
     • add / remove button
   • list of users - direct messages
2. chat window on the right
   • list of messages
     • each message
       • avatar
       • username
       • timestamp
       • message
       • edit / remove button
   • comment box

Implementation instructions:

1. use placeholders (both UI elements and actions / reducers) in place of features you didn't have time to implement - overall code organization and project structure are more important than implementation details;
2. simplistic design will be completely acceptable - don't waste much time on it
3. mock channels and users
4. mock short history of conversations in channels / direct messages
5. store everything in memory only (no need to persist data), but mock ajax calls and make these calls asyncrounous
6. map as many app states as possible to routes to promote sharing (e.g. have permalinks for each message)
7. strive for good commit messages

Essential technology stack

1. npm as package manager
2. npm scripts as automation tool
3. webpack as bundler (+ loaders & plugins)
4. babel for ES6/7 to JS compilation
5. react (+ jsx)
6. redux (+ middleware)
7. react-router
8. lodash (lodash/fp is encouraged)
9. mocha
   • chai
     • enzyme for testing

Remarks:

• Use es6 or later, do not use es5. Use webpack babel loader.
• Use promises for ajax. No need to implement backend - mock response data and simulate latency (e.g. with setTimeout)
• Do not use jquery.
• Use vanilla css or sass (complile to css via webpack sass loader).
• Use airbnb stylesguides for ES6, react, and css

Evaluation criteria (in order of importance)

1. Code organization
2. Code readability (including comments)
3. Adherence to the tech stack described above
4. Commit history - structure and quality
5. Completeness
6. Test coverage