• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

• Download dependencies by runningnpm install
• Start up the app usingnpm start

The app must have the following functionalities

• Initially, the page should display the timeline items list usingChrono custom rendering based on thecategoryId

• TheTimelineView component is provided withtimelineItemsList. It consists of a list of timeline item objects with the following properties in each timeline item object

  • ThetimelineItemObject withcategoryId asCOURSE will have the following properties

    Key	Data Type
    id	String
    categoryId	String
    title	String
    courseTitle	String
    description	String
    duration	String
    tagsList	Array

  • ThetagsListObject will have the following properties

    Key	Data Type
    id	String
    name	String

  • ThetimelineItemObject withcategoryId asPROJECT will have the following properties

    Key	Data Type
    id	String
    categoryId	String
    title	String
    projectTitle	String
    description	String
    imageUrl	String
    duration	String
    projectUrl	String

• If the value of the keycategoryId intimelineItemObject isPROJECT then Project card should be rendered

  • TheProjectTimelineCard should consist ofVisit link when a user clicks on it, then the page should be navigated to the respective project
  • TheProjectTimelineCard should consist of aCalendar icon with respectiveduration text

• If the value of the keycategoryId intimelineItemObject isCOURSE then the Course card should be rendered

  • TheCourseTimelineCard should consist of aClock icon with respectiveduration text

• Give the timeline items list data as a value toitems prop for theChrono component fromreact-chrono, so that the title will be displayed beside each card

Use these files to complete the implementation:

• src/components/TimelineView/index.js
• src/components/TimelineView/index.css
• src/components/CourseTimelineCard/index.js
• src/components/CourseTimelineCard/index.css
• src/components/ProjectTimelineCard/index.js
• src/components/ProjectTimelineCard/index.css

• To build this project, take a look at theReact Chrono reading material

The following instructions are required for the tests to pass

• AiFillClockCircle,AiFillCalendar icons fromreact-icons should be used forclock andcalender icons in card respectively

• Roboto