Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/esperco/front-end-challenge

Front End Developer Challenge
https://github.com/esperco/front-end-challenge

Last synced: about 1 month ago
JSON representation

Front End Developer Challenge

Awesome Lists containing this project

README 

        
Esper Front End Developer Challenge

===================================






Mr. Boggins, a resident of a little town in the vicinity of Auckland, New

Zealand has a spare room he wants to rent out from time to time. Due to an

aversion to AirBnB's logo, he insists on developing his own system for managing

the availability of this room. Specifically, he wants the following things:



* He should be able to check a calendar for which nights are booked or

  available for *any given month*. Each calendar day should refer to the night

  *following* that day -- i.e. if the night of April 4-5 is booked, this should

  show up on the  calendar as April 4.

* He should be able to toggle the availability of that night by clicking

  on that calendar day.

* The app should save changes to a server and fetch data from the server on

  load.

* The app does not need to record any other information besides which nights

  are free or available. Mr. Boggins considers details such as guest name or

  how that guest will pay to be irrelevant.



Using this repository as base, please help Mr. Boggins develop the front-end

for his app. We estimate that this would take someone familiar with Typescript

and React no more than 6 hours to complete, but don't worry if it takes you

longer than that.



Rules

-----

* You can discuss this exercise with anyone you want, but please do not ask

  anyone to write or review your actual code.



* You can [contact us](https://esper.com/contact) at any time for any reason.



* You can Google anything you need to.



* If you stumble upon someone else's solution to this exercise, please don't

  look at it or copy it.



* You can use any libraries or tools that you want. We've provided an existing

  code-base written with the tools that we use at Esper, and we encourage you

  to build off of it. However, you are welcome to rewrite or modify whatever

  you need to complete this challenge in a reasonable amount of time. Just

  make sure you use the API server we've provided and that we can build and

  serve your code with a minimal number of terminal commands.



* Because we may re-use this challenge with other engineering candidates,

  please don't fork this repo off Github or otherwise make your solution

  easily discoverable. You may submit your solution via zip file, patch, link

  to a private repo, or whatever else makes sense to you.



Getting Started

---------------

You'll need to install [NodeJS](https://nodejs.org/). Once you have NodeJS,

clone this repo and run `npm run install`.



Once everything is installed, run `npm run watch`. This will start both the

API server (running on `localhost:3000`) and a development server with the

front-end code (running on `localhost:5000`). Modifying the files in the `ts`,

`less`, or `assets` directory should trigger a rebuild.



This app is written using Typescript, React, LESS, Bootstrap, moment.js,

jQuery, and Lodash. The existing code will make more sense if you're familiar

with those languages, libraries, or frameworks.



Version Support

---------------

We've tested this repo using Node v4.4.0 LTS, but other versions should work

fine. We're also developing on Ubuntu 14.04, but any OS that supports NodeJS

should work too. If you have trouble getting things working on your setup,

please feel free to contact us.



API

---

The development server retains an ephemeral, in-memory store which nights have

been booked. It has two endpoints you should be aware of:



* `GET /reserved/:start/:end` - This returns a list of nights that have been

  reserved between `:start` and `:end`, inclusive. `:start` and `:end` are Unix

  timestamps (seconds since Jan 1, 1970). The result will be JSON data in this

  form: `{"reserved": [1451559600, 1452164400, ...]}`, where each number is

  also a Unix timestamp.



  Because Mr. Boggins lives in New Zealand, each timestamp refers to the

  *start* of a day in **New Zealand** (specifically, the "Pacific/Auckland"

  locale). Thus, the timestamp corresponding to Feb 4, 2016 00:00:00 in

  Auckland, New Zealand means the night of Feb 4 - Feb 5.



* `PUT /reserved/:date` - This takes a JSON-encoded object of the form

  `{"reserved": boolean}` where `reserved` indicates whether this date should

  be booked (`true`) or available (`false`). `:date` should be a Unix timestamp

  adhering to the same rules as above.



Note that the API server is not the most reliable thing in the world. There is

a 10% chance you will get a 500 Internal Server error. The front-end code

should handle this scenario gracefully.



Some Batteries Included

-----------------------

We've written some basic bits for you already:



* You can bring in new dependencies from NPM by first installing them with

  `npm install ...` and then `require`-ing them in `vendor.js`. Although we

  use Browserify to process `vendor.js`, note that this app currently just

  sticks all of the dependencies on the global `window` object.



* There's a `Calendar.Month` component that you can use a basis for your app.



* We've set up a simple Jasmine test runner at `localhost:5000/test.html`

  (see `ts/Test.tsx` for examples).



Evaluation Criteria

-------------------

* We don't expect you to be super familiar with Typescript, React, LESS, or

  anything else we're using here. We consider it a plus if you can complete

  this exercise using what's already here, but if you think you can do a

  better job using other tools (Redux, Flux, Ember, etc.), that's fine. Feel

  free to ask us if you have questions about how anything works.



* Asking questions is good. We will not penalize you for asking questions.

  In an actual work environment, we prefer that engineers spend 30 minutes

  talking a problem over with someone than spend an entire day building

  the wrong thing.



* We're looking for signs you understand concepts such as events, promises,

  and reactivity, and how those concepts are implemented in Javascript.



* The API server is sometimes slow and sometimes buggy. Your front-end code

  should handle this gracefully. It should also handle a complete loss of

  connectivity gracefully.

  

* Remember that the API server is giving your timestamps based on times in

  Auckland, New Zealand. The existing front-end code here is *not* timezone-

  aware, so you may have to modify it accordingly. We recommend looking at

  [Moment Timezone](http://momentjs.com/timezone/).



* We like code that is clean and easily testable. We honestly don't always do

  a great job of this ourselves, so your ability to demonstrate this is a big

  plus.

  

* Please comment your code.

  

* If you find this exercise too difficult or if you get stuck somewhere, feel

  free to talk to us. While we obviously prefer candidates who can hit the

  ground running, we're also willing to consider candidates who can, with

  some help, learn on the job.



Contact

-------

Feel free to [contact us](https://esper.com/contact) if you have any questions.