This project consists of a timeline of items in a horizontal grid. It is developed using typescript and uses the react context API to manage state.
The only inspiration for the development was the provided example in the email, no other external timelines were used as a reference.
date-fns- Date managementreact-dnd- Drag and drop behavior
- Each item can be dragged by its ends to change the start and end date.
- Each item can be dragged and dropped to a new date.
- The zoom buttons can be used to change the width of each day column.
These features were planned but unable to be implemented due to the time constraint:
- Zoom with the scroll wheel.
- Navigation between weeks instead of displaying all the items at the same time.
- Update to the item name.
- Currently a bug exists that prevents the user from dropping an item on top of another, this should be possible.
I haven't used the react-dnd package in years, so there was a re-learning curve that took some time.
If I had more time, I would've liked to have styled the application better and fixed the "drop on top of another item bug". The navigation between weeks would also be a great feature.
But I'm content with the final result, it is usable and type safe.
For testing purposes, I would use React Testing Library with Vitest or Playwright. I would test each interaction the user can have with the DOM, such as resizing, dragging and then checking if the rendered timeline is as expected.