Create Timeline with Reactjs and Contentful

I saw the following article on dev.to and it very impressive to me.

Why I turned my homepage into a timeline

Then, I found a good library, react-chrono.

prabhuignoto / react-chrono

Looks good and also it’s super easy to use.

First, I tried react-chrono with create-react app.

Step1 Set up a react app

Step2 Add sample data

data.ts
I use this data from react-chrono's sample

App.tsx

Then start the react application and access to localhost:3000

You will see the vertical timeline.

As you can see, we can create a timeline to edit items which is data.ts.

We will use Contentful to keep adding items without editing data.ts.

There are will be 4 steps.

Step 1 Create a model on Contentful

The first step is creating a model for items that need to follow data.ts format.

On Contentful the data types are the following.

You can see Contentful data model
https://www.contentful.com/developers/docs/concepts/data-model/
Images API
https://www.contentful.com/developers/docs/references/images-api/

The model should be like this. Actually, you can put anything as an item. But, I used the same name to make everything easy.

Image for post
Image for post

Step 2 Add content to the model

This step is quite easy because we just need to add new content to the model we created in the first step.

You can add anything you want to display on your timeline.
In this post, I used react-chrono's sample data.

Step 3 Add API Key

Click Settings > API keys on Contentful

Image for post
Image for post

Click Add API Key and create a new key.

We just need 2 items, Space ID and Content Delivery API - access token

This step is the same as this

Build a Simple Blog with Contentful and React

Step 4 Update react app

In this step first, we need to create client.ts to access Contentful API via contentful npm package. If you want to deploy your app to somewhere like Netilify. You must use the environment variables instead of hard-coding.

client.ts

To use the above, of course, you need to install the package

The last thing we need to do is to update App.tsx which is very simple.
First, get data from Contentful with useEffect.
Next we need to format the data we get from the API since the model we created on Contentful is a little bit different from react-chrono’s data format. Finally, we need to pass the data to react-chrono.

Currently, I put everything in App.tsx, but I should create a component for timeline part and format to simplify App.tsx.
The revised version will be pushed soon.

If everything works well, you will see something like this.

Image for post
Image for post

My repo is here

koji / MyTimeline-with-reactjs

#CreativeCoding #Art #PhysicalComputing #IoT #MachineLearning #python #creativetech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store