Introducing Blogtiple - A Cross Blogging Application
Tags: netlify, netlifyhackathon, blogging, react
Published: 2022-03-20 03:52:24

<h1 id="heading-introduction">Introduction</h1>
<p>Hey Folks, If you are into blogging well then this product is a treat for you guys, so pay attention to this blog. </p>
<p>Have you ever wondered why do you even write blogs? Is it to share the information or to grow as a blogger? Well, whatever the reason it might be I got your back with Blogtiple. </p>
<p>But how? you ask.</p>
<p>Hmmm! good question, before I answer that let me tell you what is the major problem I solved with this product. </p>
<h1 id="heading-the-problem">The Problem</h1>
<p>After getting into this Tech blogging world I realized one thing there are a lot of other blogging websites except Hashnode and Dev.to and the one other realization was that the more you post on each and every platforms the more audience and exposure you will have. This can also mean more leads for your next freelancing gig or maybe more recognization and if you are the second type who just want to share their blog post isn't it better the more people are now reading your blogs across the other Platforms?</p>
<p>But it's obvious to most of the users and they already post it to other platforms too. But, personally copying and pasting everything, it's a drag for me.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645781346321/oFgCCGB7J.png" alt="image.png" /></p>
<p>I can't copy and paste all my content across every other platform its too much work. So what's the solution?</p>
<h1 id="heading-the-idea-behind-blogtiple">The Idea Behind Blogtiple</h1>
<p> I thought to create a pipeline/system which can automatically import my already written blogs and post them to other blogging platforms. Well, that's what Blogtiple does for you all you need is to select the provider and Copy paste the link of your blog, and click post.</p>
<p>Cool and comfy isn't it?</p>
<iframe src="https://giphy.com/embed/kiBcwEXegBTACmVOnE" width="384" height="480" class="giphy-embed"></iframe><p><a href="https://giphy.com/gifs/badass-boye-kiBcwEXegBTACmVOnE">via GIPHY</a></p> 


<h1 id="heading-features">Features</h1>
<h3 id="heading-importing-your-already-written-blogs">Importing your already written blogs.</h3>
<p>This is one of the core features we offer and the flow works something like below.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645975042265/3qSk2Nfge.png" alt="image.png" /></p>
<p>As you can see the user is providing a URL and Provider for their blog, after that, we fetch that blog either from Dev, Medium, or Hashnode depending on the provider, and then post it to other platforms.</p>
<p>Till now we are only supporting Medium, Hashnode, and DEV but planning to add more as we grow.</p>
<h3 id="heading-scheduling-blogs-for-later-beta">Scheduling Blogs for later  (Beta)</h3>
<p>It's another amazing feature of this App, Say you want your blogs to be posted on different days on different platforms. You can easily schedule your posts on the days you like and I will be posted on them.</p>
<p>This feature is using Netlify's function's cron job which was released this month only.</p>
<p>Watch this video to understand more about the scheduling function on Netlify</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/-g6AoK3ZlAI"></iframe>


<p>The flow for the Scheduling works something Like this.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645976201620/gyuyhiGl8.png" alt="image.png" /></p>
<p>Other Features to be Included Are</p>
<ul>
<li>Advance Analytics to keep track of all the blogs across all Platforms.</li>
<li>A Better markdown editor with Image and gifs and emoji integration support.</li>
<li>New platforms</li>
</ul>
<h1 id="heading-demo">Demo</h1>
<h2 id="heading-posting-directly-to-platforms">Posting Directly to Platforms</h2>
<p>Let me show you how to post your blogs from Hashnode to other platforms i.e Dev and Medium.</p>
<p>I wrote a test Blog on the Hashnode here it is </p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://blog.theashishmaurya.me/testing-blogtiple">https://blog.theashishmaurya.me/testing-blogtiple</a></div>
<p>Now let's get started</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646029368851/XSEPXdjNW.png" alt="image.png" /></p>
<ul>
<li>Let's log in, I will be using google provider for login.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646029465016/0KZGgKxbd.png" alt="image.png" /></p>
<ul>
<li>Once you are logged in you will be seeing the Import blog page and will be something like below</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646029683674/lw2Z_JCqq.png" alt="image.png" /></p>
<ul>
<li>Goto setting and add the API keys for the platforms. Just so you know the keys are encrypted once they leave your browser so even I can't use it.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646029845993/ZGnruO1NZ.png" alt="image.png" /></p>
<ul>
<li><p>Now save each of the keys and go to the Import option.</p>
</li>
<li><p>In Import Page Select the Provider to Hashnode and paste the link and then click on the fetch to fetch any blog you want.</p>
</li>
<li><p>I will be fetching my test blog</p>
</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646029965672/CST0RZysD.png" alt="image.png" /></p>
<ul>
<li>As you can see that it is fetched and displayed in the blog display Area.</li>
</ul>
<ul>
<li><p>Now let's select where we want to post and select put the original link as Canonical link. (It's important to put Canonical link)</p>
</li>
<li><p>You can also add some Tags too if you like.</p>
</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646030213955/ZlV5TDds8.png" alt="image.png" /></p>
<ul>
<li>Now you are all set to post these blogs to the other platform.</li>
</ul>
<h3 id="heading-results">Results</h3>
<p>Here we get the post to Dev.to and Medium</p>
<p><strong>Dev.to</strong>
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646030312856/JFWSvg3dr.png" alt="image.png" /></p>
<p><strong>Medium</strong></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646030350431/AkPvqvXQ2.png" alt="image.png" /></p>
<h2 id="heading-scheduling-for-later">Scheduling for Later</h2>
<p>Instead of posting directly, we can also schedule posts for later </p>
<p>Just instead of clicking on Post just click on Schedule and then select the date you want to post to.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1646030659726/PJ-N23BZV.png" alt="image.png" /></p>
<h1 id="heading-video-demo">Video Demo</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Oj2I8Xw9gz0"></iframe>


<p><br /><br /></p>
<h1 id="heading-role-of-netlify">Role of Netlify</h1>
<p>Here Netlify plays a crucial role, from hosting Blogtiple to triggering the scheduled functions by using Netlify functions for cron jobs. It is a crucial part of the scheduling feature and using Netlify functions solved a lot of problems and complexity I would have to deal with and efforts for writing my own cron job functions.</p>
<h1 id="heading-challenges">Challenges</h1>
<ul>
<li><p>The major challenge was to import blogs from Medium, as Medium does not support any fetch API for the user blog and only supports post API. The workaround was a hard job and the tradeoff was the time complexity increased a lot.</p>
</li>
<li><p>Second major challenge was to find a good way to trigger functions for scheduling as firebase function was my first choice but they are not free for use, hence I needed to find something else after some research luckily I got to know that Netlify has just launched cron job function this month and the timing couldn't be more perfect for me.</p>
</li>
<li><p>Also to ask users to give the API key for posting blogs to their blog still feels a lot, So I thought why not encrypt the API keys before they leave the client's browser this seems like a smart idea for the time been, but I am still having seconds thoughts on that.</p>
</li>
<li><p>One of the major problems is the URL, as medium and Hashnode have different kinds of URLs, some users have subdomains and some user have hosted their blog on their own domain. Writing cases for each kind of URL was a big challenge and I still think it's not fully resolved.</p>
</li>
</ul>
<h1 id="heading-future-plans">Future Plans</h1>
<p>In the future, there are some features I think are mandatory for this product of mine</p>
<ul>
<li>Advance Analytics to keep track of all the blogs across all Platforms.</li>
<li>A Better markdown editor with Image and gifs and emoji integration support.</li>
<li>I am thinking to add as many blogging platforms as much as I can.</li>
<li>Finding a better way to store API keys that is much safer and encrypted.</li>
</ul>
<h1 id="heading-tech-stack">Tech Stack</h1>
<p>To build this amazing product I used.</p>
<ul>
<li>NEXTJS for frontend and API calls</li>
<li>Material UI for Design</li>
<li>Firebase for authentication and Database</li>
<li>Netlify for Hosting and for scheduling function</li>
</ul>
<h1 id="heading-links">Links</h1>
<ul>
<li><a target="_blank" href="https://github.com/theashishmaurya/blogtiple">Github</a></li>
<li><a target="_blank" href="https://www.blogtiple.com/">Live Link</a> {Hosted On Netlify}</li>
</ul>
</br><p style="color:#808080;">This blog is posted using <a target="_blank" href="https://blogtiple.com">Blogtiple</a></p>