This was a great interview question, it was both fun and challenging! I wrote this timeline with no libraries except react and date-fns. I used my personal prettier and eslint configurations.

I worked on this project for around an hour each night over the past week. So I'd say 4-6 hours.

I thought my strategy of laying out the timeline events on a grid with grid-column and grid-row was pretty clever, especially the grid lines. The zoom feature works quite well by simply adjusting the start and end dates of the timeline in response to scroll events. Even though I had limited time to work on this project, I'm happy that I finished basic CRUD functionality for the timeline events.

There's so much that can be improved if I had more time!

The most obvious addition would be dates on the x axis to provide better context. Another great improvement would be drag and drop editing of the date, which can easily be done with the Drag and Drop API. One thing I wanted to implement was a scrubbable timeline, so users can move forward or backwards in the timeline.

Being a proof of concept, the timeline could look much better. I'd like to have the edit modal placed relative to the timeline event it's associated with, rather than absolutely positioned on the page. The modal should also support key events, like escape to close, and focus capture.

Although I used my a11y lint rules, I'm sure the timline's accessibility could be improved by adding role, tab-index, and aria-label tags in addition to keyboard navigation.

The data set for this timeline could get very big, and I should improve the performance of the timeline. Right now, all events are being loaded into context, but ideally, I would only be pulling in events that are included in the current timeline scope, and some that are just outside the scope to improve user experience. Think infinite scrolling, but for nearby timline events (assuming we had an API that supports it).

And finally, while I used a few css variables, there could be lots of improvements to the css like adding more design tokens.

While considering designing the timeline, I looked at a few different sources for inspiration.

• Gantt charts
• GitHub contributions
• Google calendar
• Outlook calendar

Ultimately I based my implementation on the GitHub contribution graph, but made it look more like a traditional Gantt chart.

While I did use TypeScript to ensure type safety, I didn't get to implementing any real tests. If I had all the time in the world I would start with some basic Jest unit and snapshot tests, then progress to Cypress end to end testing, and finally Storybook and Chromatic for component level visual testing.