Waseem496 / CCBP-Timeline

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

Refer to the image below:

Design Files

Click to view

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

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

Implementation Files

Use these files to complete the implementation:

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

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

• Styled Components should be used for styling purpose
• AiFillClockCircle, AiFillCalendar icons from react-icons should be used for clock and calender icons in card respectively
• Roboto should be applied as font-family for courseTitle and projectTitle in the card

• The #0967d2 color should be applied as color for Visit anchor element in the card

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.