FRONT END
Embed Medium as a blog on your React Website — Part 2
Embed Medium on your Website using Material-UI gives better UI
I have already implemented Medium as a blog on my website. Before I used shards-react. I have mentioned that method in my 26th article. But I like to make it better. I liked that user interface but not satisfied. So I thought about using Material-UI for better user experience. Here I am going to explain implemented it in pure JavaScript and React Js. Here you could see the live demo of this react application. This is my 32nd Medium article.
I have already introduced React and Medium in my previous articles. If you’ve missed, click those links and read them. I like to show my active hours on my blog page with a green badge. I like to migrate my blog components from Shards-React to Material-UI. Because Material-UI Components are looking attractive and easy to handle. Then I thought, why can’t I implement that in my blog page. Now I finished that and have a repo in GitHub. In this article, I am going to say how to start from scratch.
Step1: Setup React Project 🆕
First, you need to create a react application. For that run the following command in your shell/terminal in a specific folder (e.g., desktop )
npx create-react-app medium-post
A new folder will be created, and it will be named as a medium-post. From this step, our application is bootstrapped with Create React App. For more information, click the link. Then open that project in your IDE. I am personally using the VS Code IDE.
Step2: Delete Unwanted Files 🗑️
You need to delete some files and organize the files for the development after you open the folder in your IDE. Therefore you need to go to the src folder and delete Logo.svg, App.css, index.css, and App.test.js files. And create the following folders inside the src folder named components, assets, helpers, and utils, then move your serviceWorker.js into the helper’s folder. App.js file into the Components folder.
Now open the index.js file and delete the following snippet in index.js file.
import ‘./index.css’;
Then modify the App.js and serviceWorker.js files paths in index.js import like following.
import App from ‘./components/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;
Go to the Components folder and open the App.js. Delete the return part of the App function. Now your file organization will be like below.
Step 3: Install packages 🔄
Install Material-UI for Material Design form component.
npm install @material-ui/core --save
Install Axios to make HTTP requests to the API.
npm install axios --save
Note: Fetching JSON Data can be achieved through the fetch API in JavaScript. Reason for using Axios Even old browsers like IE11 can run Axios without any issue.
Fetch()
, on the other hand, only supports Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (you can see the full compatibly table on Can I use…)
Install react-fontawesome to display icons.
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save
Step4: Fetch data from medium 🔗
Then create a new file named slider.js inside the components folder. Add the following code in the slider.js file.
Replace your Medium user name instead of @Sabesan96 on line 13.
Then create the utils folder and create the Totext.js file inside the utils folder. Add the following snippet in the Totext.js file.
Then create the ShortenText.js file inside the utils folder and add the following snippet in the ShortenText.js file
Create PostCard.js file inside the component folder and add the following snippet in the PostCard.js file.
In the PostCard.js I achieved the active status badge. In there I use the Date() function to create an object in JavaScript with current date and time. And I conditionally render the component (line 140) according to my wake up time (5 am) and Bedtime (10 pm). Code section of line 110 - line133 is for date formatting.
Finally, Render the Slider component in App.js, as shown below
Conclusion
Here I have showcased four steps to embed Medium as a blog on your React Website. If you use this, you won’t spend money to embed medium. However, when you follow these methods, you will be unable to show your related medium posts section in your blog. You can clone the Repo from this link. If you are going to use this project then Don’t forget to give a star⭐️ for this repo.
Happy Coding 😊 !!!
Thank you for reading this far. If you enjoyed this post, please share, comment, and press that 👏 a few times (up to 50 times). . . Maybe it will help someone.
Follow me on Twitter and Medium if you’re interested in more in-depth and informative write-ups like these in the future!