Material UI Medium Blog

Aim of this Project is embed Medium as a blog on your React website with an active status badge (green badge) for a time period .

🛠️ Built with

• React JS - Front-End JavaScript library
• Material UI - React UI Framework

Installation

To setup the app for development on your local machine, please follow the instructions below:

1. Clone the repo to your machine

   git clone https://github.com/sabesansathananthan/material-ui-medium-blog.git
   cd material-ui-medium-blog

2. Install packages

   If you use npm

   npm install

   or

   If you use yarn

   yarn

3. Change username

   Use your Medium username👤 instead of @Sabesan96. in Slider.js

   mediumURL = "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@Sabesan96";

4. Change active hours Active hours set as morning 5.00 am to night 8.00 pm. You could change the active hours in PostCard.js. If your time zone is not Indian Standard Time IST Change the ISTOffset value.
   Calculation for Finding Offset
   For me it is IST. Therefore, +5:30.
   Offset = +5 x 60 + 30

   const ISTOffset = 330; // IST offset UTC +5:30 🕠
   const isOnline = ISTTime.getHours() >= 5 && ISTTime.getHours() <= 20;

5. Run the development server

   If you use npm

   npm start

   or

   If you use yarn

   yarn start

6. Visit http://localhost:3000

How does the category tag work?

How can we choose a particular category tag among a medium post’s 5 category tags?

I proposed a method for that. In a particular medium post which category tag was tagged the highest time in last 10 medium posts is suitable for that post.

Live Demo

Don't forget to give a star ⭐ for this repo 🙂

Related Article

Embed Medium as a blog on your React Website — Part 2 - Sabesan Sathananthan

Similar Projects

• React-Medium-Blog
• React-Dev.to-Blog
• react-medium-blog-v2

📄 License

This project is licensed under the MIT License - see the LICENSE file for details