Timeline component project

This project is a timeline component that can be used to display a list of events in a chronological order. The component is built using React, Typescript and CSS.

Features

• Display the events in a vertical timeline
• Display a list of events in a chronological order
• Zoom in and out of the timeline
• Dragging one event into another changes the start date on the drop target event
• Inline editing of the event is done by clicking on the pencil icon, and then clicking out of the event to save the changes

Installation

• Run yarn install to install the dependencies
• Run yarn start to start the development server
• Run yarn test to run the tests
• Run yarn build to build the project

Challenge questions

• How long you spent on the assignment.
  • Close to 6 hours of work in total
• What you like about your implementation
  • I like the way the timeline is displayed and the way the events are displayed in a chronological order
  • The drag and drop feature works well
  • The inline editing of the event is simple but effective
  • The zoom feature is also simple but effective
• What you would change if you were going to do it again.
  • I would make it possible to save events in a persistent storage
  • I would improve the zoom feature so it doesn't hides part of the app when in max zoom
  • I would add more tests and seek for better coverage
• How you made your design decisions. For example, if you looked at other timelines for inspiration, please note that.
  • I looked at some timeline components on the internet to get some inspiration on how to display the events in a timeline
  • I also looked some examples to implement the drag and drop feature
• How you would test this if you had more time.
  • Test the drag and drop feature better
  • Test the zoom feature
  • Add and test the responsiveness of the app
  • Add more tests to improve the coverage