An Example Senior React/Redux Developer Task

July 28th, 2018

Here is an example of a Senior React / Redux Developer Task for a contract in London. I really enjoyed this test, but, found it much harder than I first thought. There were a few things I should have thought about in a bit more detail.

I’ve added a paragraph or two at the bottom of areas to watch out for. And, things to think about along the way. Give it a go, good luck!

The Developer Task

The aim of this exercise is to create a demo calendar application using React & Redux. You should take no more than 1h30m to complete this task.

You should start by rendering a single month view of a calendar for the current month – along the lines of the below illustration:

Features & Requirements:

  • Ability to add a new “reminder” (max 30 chars) for a user entered day and time.
  • Display reminders on the calendar view in the correct time order.
  • Allow the user to select a colour when creating a reminder and display it appropriately.
  • Properly handle overflow when multiple reminders appear on the same date.
  • Ability to edit reminders – including changing text, day and time & colour.
  • Ability to delete reminders.
  • Expand the calendar to support more than current month.

Things to think about:

  • What’s the UI & UX going to look like?
    • I found it super helpful to look on Dribbble and Codepen for inspiration.
    • What fields for the reminders will you need? e.g. HTML Time element is helpful
    • What do days with multiple reminders look like?
    • How to add/edit and delete the reminders for a specific day. (I took inspiration from the Mac Calendar so did a double-click type of UI. I think a little “add” button would have been a bit simpler)
  • Thinking of the Redux structure of the calendar (not just for one month) object and ownership of the reminders.
  • How are you doing to store the month data? An array of weeks and days? or, just a big array of all of days? e.g.
const month = [
 { index: 0, weekIndex: 27, days: [{...}, {...}, {...}, {...}, {...}, {...}, {...}] },
 { index: 1, weekIndex: 28, days: [{...}, {...}, {...}, {...}, {...}, {...}, {...}] },
 { index: 2, weekIndex: 29, days: [{...}, {...}, {...}, {...}, {...}, {...}, {...}] },
 { index: 3, weekIndex: 30, days: [{...}, {...}, {...}, {...}, {...}, {...}, {...}] }

// Or something like this:

const daysOfTheMonth = [
 { index: 0, date: '2018-01-01', reminders: [] },
 { index: 1, date: '2018-01-02', reminders: [] },
 { index: 2, date: '2018-01-03', reminders: [] },
 { index: 3, date: '2018-01-04', reminders: [] }

The best thing that I could have done better was to read the requirements a few more times and started by writing some pseudo code. I panicked too much when I saw the short completion time (1h30m) and jumped in too quickly.

(Added this after posting) I just saw this comment on Reddit that I really like:

I think doing this is a really great idea. This dev test took me twice as long to create something I was happy with. After 1h30 I just had a lot of crappy code that kinda worked. So creating two versions is a really nice idea. I normally just add lots of comments to the so other developers can clearly see what I would have done with more time. Things I found difficult and any other comments.

Hope this was helpful to see what kind of tests you get asked to do to be a Senior React/Redux Developer in London.