In this project, let's build a CCBP Timeline by applying the concepts we have learned till now.

Refer to the image below:


ccbp timeline output

Design Files

Click to view

Set Up Instructions

Click to view
  • Download dependencies by running npm install
  • Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • Initially, the page should display the timeline items list using Chrono custom rendering based on the categoryId

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

    • The timelineItemObject with categoryId as COURSE will have the following properties

      Key Data Type
      id String
      categoryId String
      title String
      courseTitle String
      description String
      duration String
      tagsList Array
    • The tagsListObject will have the following properties

      Key Data Type
      id String
      name String
    • The timelineItemObject with categoryId as PROJECT 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 key categoryId in timelineItemObject is PROJECT then Project card should be rendered

    • The ProjectTimelineCard should consist of Visit link when a user clicks on it, then the page should be navigated to the respective project
    • The ProjectTimelineCard should consist of a Calendar icon with respective duration text
  • If the value of the key categoryId in timelineItemObject is COURSE then the Course card should be rendered

    • The CourseTimelineCard should consist of a Clock icon with respective duration text
  • Give the timeline items list data as a value to items prop for the Chrono component from react-chrono, so that the title will be displayed beside each card

Components Structure
component structure breakdown

Implementation Files

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

Important Note

Click to view
  • To build this project, take a look at the React Chrono reading material

The following instructions are required for the tests to pass

  • AiFillClockCircle, AiFillCalendar icons from react-icons should be used for clock and calender icons in card respectively

Resources

Colors
Hex: #171f46
Hex: #1e293b
Hex: #ffffff
Hex: #0967d2
Hex: #2b237c
Font-families
  • Roboto

Things to Keep in Mind

  • All components you implement should go in the src/components directory.
  • Don't change the component folder names as those are the files being imported into the tests.
  • Do not remove the pre-filled code
  • Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.