I built this timeline using React.js, react-dnd, date-fns with TypeScript and webpack to combines all module in my project needs into bundles.
I spent roughly 12-15 hours on this projects
I use CSS Grid Layout to display the gird line and automatically adjust with scroll event
If I have more, I would love to finish implementing the react-dnd so it works when user drag/drop an event within or to another lane.
I also would love to debug and improve the performance for the events where we have many and many events spread accross multiple decades or centuries.
I did some research and look at a few sources for inspirations:
- Google Calendar
- Apple macOS Calendar
- Gantt Chart and a few more creative examples
If I have time, I would use Jest and React Testing Library to write unit and snapshot tests. I also would use Cypress to write integration tests to do end to end testing on some of the core functionalities of the application. For visual testing, I would use Storybook to build and test UI components in isolation.