leeric92 / airtable-timeline

Airtable Timeline

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.

CodeSandBox projects

Time Spent

I spent roughly 12-15 hours on this projects

What works

I use CSS Grid Layout to display the gird line and automatically adjust with scroll event

What could have been improved with more times

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.

Design

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

Tests

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.