React Timeline Component Implementation

This challenge asks you to build a reusable React component that visually represents a timeline. Timelines are useful for displaying events in chronological order, commonly used in project management, historical narratives, or showcasing career progression. Your component should be flexible enough to handle varying numbers of events and customizable styling.

Problem Description

You are tasked with creating a Timeline component in React using TypeScript. The component should accept an array of event objects as a prop and render them as a horizontal timeline. Each event should be displayed as a circle connected to the main timeline line.

Key Requirements:

• Event Data: The component should accept an array of event objects. Each event object should have the following properties:
  • id: (string) A unique identifier for the event.
  • date: (string) The date of the event (e.g., "2023-10-26").
  • title: (string) A short title for the event.
  • description: (string) A longer description of the event.
• Visual Representation: The timeline should be rendered horizontally. Events should be displayed as circles along the timeline. A connecting line should visually link the events.
• Event Details: Clicking on an event circle should display the event's title and description in a small popup or tooltip.
• Responsiveness: The timeline should be reasonably responsive and adapt to different screen sizes. While a full responsive design isn't required, the layout should avoid breaking on smaller screens.
• Styling: The component should be styled using CSS. You can use inline styles, CSS modules, or a CSS-in-JS library (like styled-components) – your choice. The styling should be clean and visually appealing.

Expected Behavior:

• The component should render correctly with an empty array of events (displaying an empty timeline).
• The component should render correctly with a single event.
• The component should render correctly with multiple events, displaying them in chronological order based on the date property.
• Clicking on an event circle should reveal the event's title and description.
• The timeline should be visually clear and easy to understand.

Edge Cases to Consider:

• Invalid Date Format: While you don't need to strictly validate the date format, consider how the component will handle dates that are not in a standard format. (A simple display of the raw date string is acceptable).
• Long Event Descriptions: Handle potentially long event descriptions gracefully (e.g., using truncation or scrolling).
• Large Number of Events: Consider how the timeline will perform with a very large number of events (e.g., 50+). While optimization isn't a primary goal, avoid obvious performance bottlenecks.

Examples

Example 1:

Input:
[
  { id: "1", date: "2023-01-15", title: "Project Start", description: "Initial project kickoff meeting." },
  { id: "2", date: "2023-03-20", title: "Milestone 1", description: "Completed the first major milestone." },
  { id: "3", date: "2023-06-10", title: "Project Launch", description: "Successfully launched the project to the public." }
]
Output:
A horizontal timeline with three circles representing the events, connected by a line. Clicking on each circle displays the corresponding title and description.
Explanation: The component iterates through the event array and renders each event as a circle on the timeline, ordered by date.

Example 2:

Input:
[]
Output:
An empty timeline with just the main timeline line.
Explanation: The component handles the empty array case gracefully by rendering only the timeline line.

Example 3:

Input:
[
  { id: "1", date: "2024-12-31", title: "Future Event", description: "An event in the future." }
]
Output:
A horizontal timeline with a single circle representing the future event.
Explanation: The component correctly renders a single event, even if it's in the future.

Constraints

• Time Limit: You have approximately 2-3 hours to complete this challenge.
• Dependencies: You are free to use any standard React libraries (e.g., react-dom, react-router-dom) but avoid introducing unnecessary dependencies.
• Code Quality: Write clean, well-documented, and maintainable code.
• Styling: While visual appeal is important, functionality is prioritized.
• Performance: The component should render reasonably quickly, even with a moderate number of events (up to 20).

Notes

• Consider using React's useState hook to manage the currently selected event (if any).
• Think about how to calculate the position of each event circle along the timeline based on its date. You might need to normalize the dates to a consistent scale.
• You can use a simple popup or tooltip to display the event details. A more sophisticated UI is not required.
• Focus on creating a functional and visually clear timeline component. Advanced features like drag-and-drop reordering are not required for this challenge.