Blogs are an excellent way to provide value in the form of useful and informative content to your users. Having a blog section on your website helps keep viewers engaged and updated with whatever you have going on.
Today, I’m going to show you how to pull data from your already existing medium account and display it in a blog card using React.
Note: This tutorial is written assuming you already know some HTML, CSS, JS, and are familiar with using React.
Step 1
The first thing we need to do is set up a layout of a blog card. A typical blog card consists of a featured image/thumbnail, a title, and an excerpt. A sample layout is shown below, along with some basic CSS styling.
Step 2
Next, need your medium account username. You can find your username by clicking your profile pic on the bottom left of the medium website as shown below.
Once you have your username, open a new browser tab and navigate to https://www.medium.com/feed/@username
This page contains all the data that we will need to populate our blog card, but there’s just one problem. It’s in RSS format!
Step 3
To convert the RSS data we are going to use a free service called rss2json.
Link: https://rss2json.com/sign-up
Once logged in, insert the medium feed link from step 2 and click the convert button.
You now have the API call URL generated for you shown below with the red arrow!
Step 4
Now we can go back to our code and fetch the data using the API link we just generated.
Step 5
Now that our data is fetched and set in the posts state we can start using it to fill our BlogCard component.
As seen above the posts data is an array of individual posts. For this example, we are going to use just 1 post to fill our BlogCard, but for your purposes, you can use as many as you’d like.
Step 6
Our card now has data from our medium posts connected, but the excerpt is showing all the HTML tags. It’s time for some cleanup!
Step 7
To clean up the HTML in our excerpt we are going to use install an npm package called sanitize-HTML. Then, we will use it to clean out the HTML tags from the data being passed into our excerpt.
Replace the data being passed with the new cleaned-up HTML and now we have our finished card!
Conclusion
Today we went through how to:
- Create a basic blog card layout
- Get RSS data from your medium account feed
- Convert that RSS data to JSON format using rss2json
- Fetch JSON data through an API call
- Apply the data to a blog card component
- Use sanitize-html to clean up our blog excerpt of unnecessary tags.
I hope you found this article useful, thanks for reading!
